Динамическое изменение заголовка страницы из тега h1 с помощью Javascript

Во-первых, спасибо, что нашли время, чтобы прочитать этот вопрос. Какое замечательное сообщество у Stack Overflow :)

Мне нужно изменить тег заголовка страницы на основе текста, содержащегося в элементе h1 на этой странице.

Я искал вокруг и нашел функцию Javascript "document.title". Я играл с этим, пытаясь вытащить текст из моего элемента h1, который имеет класс «Категория-H1».

<script type="text/javascript">
    document.title = document.getElementsByClassName("Category-H1");
</script>

Однако он просто устанавливает заголовок страницы в «[object HTMLCollection]», что, как я понимаю, является нулевым значением. Является ли JS лучшим для этого? Я знаю, что мой код взломан, какие-нибудь советы?

Заранее спасибо! - Алекс

Изменить

Мне сообщили, что строка кода возвращает объект коллекции, а не строку. Было указано на пример кода:

setTimeout(function () { document.title = "iFinity User Profile - " + document.getElementById("test").outerText; }, 1000);

Однако этот код создает заголовок страницы «Профиль пользователя iFinity — не определено». У меня есть элемент h1 на этой странице с идентификатором «test».


javascript page-title
person Alex Ritter    schedule 26.10.2012    source источник

Ответы (5)


arrow_upward
3
arrow_downward

Ты почти там.

[object HTMLCollection] не является нулевым значением — это строковое представление набора html-элементов. Вы хотите выбрать первый, а затем получить от него внутренний html.

document.getElementsByClassName("Category-H1")[0].innerHTML

Кроме того, убедитесь, что вы делаете это после загрузки документа. Вы можете либо сделать это, добавив скрипт в конец вашего документа, либо запустить его при событии onload тела.

person Mike Park    schedule 26.10.2012
comment
Он загружает новый заголовок на страницу. Мне все еще нужно добавить событие onload в тело? Я знаю, что это не оптимально для поисковых систем, но я хочу дать ему наилучший шанс. - person Alex Ritter; 27.10.2012
comment
Где тег <script/> в вашем html? - person Mike Park; 27.10.2012
comment
Я пытаюсь найти его с firebug прямо сейчас. Сценарий был добавлен в файл .ascx скина, я не уверен, где DotNetNuke помещает его в фактическом считывании кода. - person Alex Ritter; 27.10.2012
comment
Вы должны иметь возможность просто просмотреть исходный код и найти его таким образом. - person Mike Park; 27.10.2012
comment
Нашел в исходниках. Похоже, скрипт загружается в теге body - person Alex Ritter; 27.10.2012
comment
Кроме того, при просмотре источника кажется, что он все еще имеет старый тег заголовка, даже после замены на js. - person Alex Ritter; 27.10.2012
comment
Это нормально — вы не увидите изменения заголовка в источнике. я думаю, ты в порядке - person Mike Park; 27.10.2012
comment
Прохладный. Большое спасибо за Вашу помощь! - person Alex Ritter; 27.10.2012

arrow_upward
2
arrow_downward

Это должно работать:

document.title = document.getElementsByClassName("Category-H1")[0].innerHTML;

Функция getElementsByClassName() возвращает набор элементов ( [object HTMLCollection], поэтому вам нужно получить из него элемент, я предполагаю, что первый.

person andrux    schedule 26.10.2012
comment
Я думаю, что вам все еще не хватает части. - person Mike Park; 27.10.2012
comment
Я не вижу, где, можно, пожалуйста, поподробнее? - person andrux; 27.10.2012

arrow_upward
0
arrow_downward

Лучшим решением может быть следующее:

<script type="text/javascript">
document.title = document.getElementsByTagName("H1")[0].innerHTML
</script>

Это спасло бы от установки класса h1.

person Tyler    schedule 21.07.2016

arrow_upward
0
arrow_downward

Это очень близко, но я обнаружил, что — в любом случае, работая с Firefox, — когда вы используете getElementsByTagName("H1"), он дает вам массив, который вы узнали. Тем не менее, он работает лучше, используя:

<script type="text/javascript">
    document.title = document.getElementsByTagName("H1").item(0).innerHTML;
</script>

Обратите внимание на добавление .item(0).innerHTML после получения элемента, а не [0].innerHTML.

person David Covey    schedule 12.01.2017

arrow_upward
0
arrow_downward

Я не знаю, есть ли у вас в этом опыт или нет, но другой альтернативой, которая кажется очень популярной в наши дни, является использование jQuery. Как и в предыдущих обсуждениях, приведенный ниже код предполагает, что вы заинтересованы в получении первого экземпляра тега «H1» или класса «Category-H1». Это важный момент, потому что, если вы не нацелитесь на атрибут «ID», вы получите набор элементов.

Этот код также предполагает, что вы уже реализовали включение библиотеки jQuery либо непосредственно со своего веб-сайта, либо со ссылкой на CDN.

<script type="text/javascript">
    $(document).ready(function () {
        document.title = $("H1")[0].innerText;
    });
</script>

$(document).ready вызовет свою закрытую функцию только после завершения загрузки объектной модели документа (DOM) и до того, как механизм рендеринга браузера отобразит страницу.

Содержимое внутри функции захватит внутренний текст первого экземпляра тега «H1» и назначит это текстовое значение тегу заголовка документа в разделе заголовка.

Я надеюсь, что это добавит еще один уровень помощи.

person David Covey    schedule 17.08.2017