使用jQuery更改页面标题


Answers:


184
$(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();

使用setInterval和clearInterval而不是使用setTimeouts字符串可能会更好吗?
Spycho

1
SEO通过jQuery调用页面有什么含义?
TheBlackBenzKid 2014年

19

无需使用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);
});

当用户点击按钮,标题将改变像的问题,而这个变化将被环
伊利亚·梅德韦杰夫

4

使用

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

我知道,但是如何动态制作呢?
伊利亚·梅德韦杰夫

2
很好,这是动态的,即使用Javascript。您是否会偶然地表示“动画”?
darma

@IIya:提供更多标记和代码以获得更好的答案。您的问题不清楚。
Gowri

3

 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);
        });


2

我使用(并推荐):

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

它也可以在IE中使用,这是

document.title = "Another Title";

有些人会争论wich更好,prop还是attr,并且因为prop调用DOM属性和attr调用HTML属性,所以我认为这实际上更好。

在DOM加载后使用它

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

希望这可以帮助。


1

一些代码来浏览标题列表(循环或一次性):

    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() );

1

我用这个:

document.title = "your_customize_title";

1

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()); 
    });
});

0
document.title="your title";

我喜欢这个。


这只是现有答案的重复。

0

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

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

这里是Jquery方法:

$(document).ready(function(){   
    $("#changeTitle").click(function() {
       $(document).prop('title','I am New One');
    });
});
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.