使用 Jquery 更改页面标题

如何使用 jquery 动态更改 <title>标记?

例如: 逐个添加3个 >符号

> title
>> title
>>> title
127469 次浏览

using

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

There's no need to use jQuery to change the title. Try:

document.title = "blarg";

See this question for more details.

To dynamically change on button click:

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

To dynamically change in loop, try:

var counter = 0;


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

To string the two together so that it dynamically changes on button click, in a loop:

var counter = 0;


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

This is simply a JQuery wrapper for:

document.title = 'test';

To add a > periodically you can do:

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


changeTitle();

Some code to walk through a list of titles (circularily or one-shot):

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

I use this one:

document.title = "your_customize_title";
document.title="your title";

I prefer this.

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

i use (and recommend):

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

and it works in IE as well this is an alias to

document.title = "Another Title";

Some will debate on wich is better, prop or attr, and since prop call DOM properties and attr Call HTML properties, i think this is actually better...

use this after the DOM Load

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

hope this helps.

Its very simple way to change the page title with jquery..

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

Here the Jquery method:

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

Html code:

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

Jquery code:

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