Динамическая замена title на JavaScript и Jquery

Динамическая замена title на JavaScript и Jquery

Единственный более менее нормальный способ менять заголовок на лету, остальные не работали в разных браузерах.

var data = $('h1').html() + '| Умный заголовок';
document.title = data.replace( /([\\s\\S]+)<title>/, '' ).replace(/<\\/title>([\\s\\S]+)/, '' );

Скрипт находит в документе текст между тегом

<h1> </h1>

, после чего он помещается между тегами

<title> </title>

с добавлением текста \”| Умный заголовок\”. Аминь.

0 comments
  1. Серега
    Серега
    03.08.2011 at 01:35

    Здравствуйте!

    Чет у меня не получилось… А как, полностью правильно записать код javascript?

    Reply
  2. utz0r2
    utz0r2
    03.08.2011 at 10:20

    К примеру, вот так

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="windows-1251" />
    <title>ОДИН</title>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script>
    $(function($){
        $('#change').click(function() {
            var data = $('h1').html(); // jQuery, поиск h1
            document.title = data.replace( /([\\s\\S]+)<title>/, '' ).replace(/<\\/title>([\\s\\S]+)/, '' );
        });
    });     
    </script>
    </head>
    <body>
    <h1>Супер заголовок</h1>
    <a href="#" id="change">Сменить тайтл на – Супер заголовок</a>
    </body>
    </html>

    Reply
  3. Серега
    Серега
    03.08.2011 at 12:11

    Здравствуйте!

    Спасибо за ответ. Так сработало, но когда смотрю исходный код, то в <title> слово не изменилось (браузер FireFox)

    Reply
  4. Я
    Я
    06.08.2011 at 01:32

    А чем такой способ не устраивает?

    $('#changetitle').live('click', function(){
    $('title').text('новый титл');
    });

    <_a id='changetitle'>сменить</a>

    Reply
  5. Серега
    Серега
    12.08.2011 at 17:24

    Здравствуйте!

    Честно сказать так и не понял, куда вставить этот кусок кода, чтобы все правильно заработало)

    Вообще хотелось бы получить такое (в тему блога вроде бы вписывается):
    Есть тег, например <p>слово</p> и чтобы это же слово вставилось в <title>старое слово – новое слово из тега </title> Только, чтобы это было в исходном коде при просмотре. Такое реально получить? Или же средствами javascript невозможно?

    Reply
  6. utz0r2
    utz0r2
    15.08.2011 at 10:07

    Оно то поменяет, но если смотреть просто исходный код то ничего не увидите, а если инспектором (оперы) или файербагом (фаерфокс), то увидите новый тайтл.

    Reply
  7. Серега
    Серега
    15.08.2011 at 11:14

    Ясно, спасибо. Как я понял поисковик тоже не увидит новый тайтл, да?)

    Reply
  8. utz0r2
    utz0r2
    15.08.2011 at 11:16

    Да, не увидит

    Reply
  9. Серега
    Серега
    15.08.2011 at 21:49

    Здравствуйте!
    Все понятно. Еще раз спасибо за ответы)

    Успехов Вам и Вашему блогу!

    Reply
  10. Павел
    Павел
    03.11.2011 at 03:23

    а есть возможность обновлять title ежесекундно?

    Reply
  11. utz0r2
    utz0r2
    03.11.2011 at 15:30

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="windows-1251" />
    <title>ОДИН</title>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script>
    $(function($){
        setInterval(change_title, 1000);

    function change_title() {
        var time=new Date();
        var data = $('h1').html(); // jQuery, поиск h1
        data = data + "и  Текущее время: " + time;
        document.title = data.replace( /([\\s\\S]+)<title>/, '' ).replace(/<\\/title>([\\s\\S]+)/, '' );
    }    
        
    });    
    </script>
    </head>
    <body>
    <h1>Супер заголовок</h1>
    Берем из h1 заголовок и подставляем время которое обновляется каждую секунду.
    </body>
    </html>

    Reply
  12. Григорий
    Григорий
    30.10.2015 at 17:57

    Отличный скрипт! В 2015 году еще более актуален для одностраничников.

    Reply
Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные поля помечены *

Scroll Up