使用Jquery更改页面标题

Question

如何使用jQuery实现动态更改<title>标签？

例如：逐个添加3个>符号。

> title
>> title
>>> title

- Ilya Medvedev

Answer 1

$(document).prop('title', 'test');

这只是一个jQuery的包装器，用于：

document.title = 'test';

要定期添加 > ，您可以执行以下操作：

function changeTitle() {
    var title = $(document).prop('title'); 
    if (title.indexOf('>>>') == -1) {
        setTimeout(changeTitle, 3000);  
        $(document).prop('title', '>'+title);
    }
}

changeTitle();

- Gazler

---

使用setInterval和clearInterval而不是一系列的setTimeout是否更好呢？ - Spycho

通过jQuery调用页面对SEO有什么影响？ - TheBlackBenzKid

Answer 2

不需要使用jQuery来更改标题。尝试使用：

document.title = "blarg";

请参考此问题以获取更多细节。

要在按钮点击时动态更改：

$(selectorForMyButton).click(function(){
    document.title = "blarg";
});

尝试在循环中实现动态更改：

var counter = 0;

var titleTimerId = setInterval(function(){
    document.title = document.title + '>';
    counter++;
    if(counter == 5){
        clearInterval(titleTimerId);
    }
}, 100);

将它们串联在一起，以便在按钮点击时动态更改，在循环中：

var counter = 0;

$(selectorForMyButton).click(function(){
  titleTimerId = setInterval(function(){
    document.title = document.title + '>';
    counter++;
    if(counter == 5){
        clearInterval(titleTimerId);
    }
  }, 100);
});

- Spycho

---

当用户点击按钮时，标题将像问题中所示更改，并且此更改将循环进行。 - Ilya Medvedev

Answer 3

使用

$('title').html("new title");

- Gowri

---

我知道，但是如何使它动态化？ - Ilya Medvedev

这是动态的，也就是说使用了Javascript。你是不是指"动画效果"？ - darma

@IIya：请提供更多的标记和代码以获得更好的答案。你的问题不够清晰。 - Gowri

Answer 4

 var isOldTitle = true;
        var oldTitle = document.title;
        var newTitle = "New Title";
        var interval = null;
        function changeTitle() {
            document.title = isOldTitle ? oldTitle : newTitle;
            isOldTitle = !isOldTitle;
        }
        interval = setInterval(changeTitle, 700);

        $(window).focus(function () {
            clearInterval(interval);
            $("title").text(oldTitle);
        });

- Shahbaz Ahmad

Answer 5

HTML代码：

Change Title:
<input type="text" id="changeTitle" placeholder="Enter title tag">
<button id="changeTitle1">Click!</button>

Jquery 代码：

$(document).ready(function(){   
    $("#changeTitle1").click(function() {
        $(document).prop('title',$("#changeTitle").val()); 
    });
});

- Ekta P. Sutariya

Answer 6

我使用（并推荐）：

$(document).attr("title", "Another Title");

它在IE中也能工作，这是对

的别名。

document.title = "Another Title";

有些人会争论哪种更好，prop或attr，由于prop调用DOM属性和attr调用HTML属性，我认为这实际上更好...

在DOM加载之后使用此方法。

$(function(){
    $(document).attr("title", "Another Title");
});

希望这能帮到你。

- Sakes Yordi

Answer 7

一些代码用于循环或单次遍历标题列表：

    var titles = [
            " title",
            "> title",
            ">> title",
            ">>> title"
    ];

    // option 1:
    function titleAniCircular(i) {
            // from first to last title and back again, forever
            i = (!i) ? 0 : (i*1+1) % titles.length;
            $('title').html(titles[i]);
            setTimeout(titleAniCircular, 1000, [i]);
    };

    // option 2:
    function titleAniSequence(i) {
            // from first to last title and stop
            i = (!i) ? 0 : (i*1+1);
            $('title').html(titles[i]);
            if (i<titles.length-1) setTimeout(titleAniSequence, 1000, [i]);
    };

    // then call them when you like.
    // e.g. to call one on document load, uncomment one of the rows below:

    //$(document).load( titleAniCircular() );
    //$(document).load( titleAniSequence() );

- etuardu

Answer 8

我使用这个：

document.title = "your_customize_title";

- Haimei

Answer 9

使用jQuery更改页面标题的方法非常简单。

<a href="#" id="changeTitle">Click!</a>

这是Jquery方法：

$(document).ready(function(){   
    $("#changeTitle").click(function() {
       $(document).prop('title','I am New One');
    });
});

- Ekta P. Sutariya

Answer 10

document.title="your title";

我更喜欢这个。

- Raheem

---

这只是现有答案的重复。 - Pang