Thay đổi tiêu đề trang bằng Jquery


81

Làm cách nào để tạo <title>thẻ thay đổi động với jquery?

ví dụ: thêm lần lượt 3 >ký hiệu

> title
>> title
>>> title

Câu trả lời:


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

Đây chỉ đơn giản là một trình bao bọc JQuery cho:

document.title = 'test';

Để thêm> định kỳ, bạn có thể làm:

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

changeTitle();

Có thể không tốt hơn nếu sử dụng setInterval và clearInterval thay vì một chuỗi setTimeouts?
Spycho

1
Ý nghĩa của SEO khi gọi trang qua jQuery là gì?
TheBlackBenzKid

19

Không cần sử dụng jQuery để thay đổi tiêu đề. Thử:

document.title = "blarg";

Xem câu hỏi này để biết thêm chi tiết.

Để thay đổi động khi nhấp vào nút:

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

Để thay đổi động trong vòng lặp, hãy thử:

var counter = 0;

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

Để xâu chuỗi cả hai lại với nhau để nó tự động thay đổi khi nhấp vào nút, trong một vòng lặp:

var counter = 0;

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

khi người dùng nhấp chuột vào nút, danh hiệu sẽ được thay đổi như thế nào trong câu hỏi, và thay đổi này sẽ được looped
Ilya Medvedev

4

sử dụng

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

tôi biết, nhưng làm thế nào để làm cho nó động?
Ilya Medvedev

2
Đây là IS động, tức là với Javascript. Bạn có tình cờ có nghĩa là "hoạt hình" không?
darma

@IIya: cho thêm đánh dấu và mã để có câu trả lời hay hơn. câu hỏi của bạn không rõ ràng.
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

tôi sử dụng (và khuyến nghị):

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

và nó hoạt động trong IE cũng như đây là bí danh của

document.title = "Another Title";

Một số người sẽ tranh luận về cái nào tốt hơn, prop hay attr , và vì thuộc tính DOM call prop và thuộc tính attr Call HTML, tôi nghĩ điều này thực sự tốt hơn ...

sử dụng cái này sau khi tải DOM

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

hi vọng điêu nay co ich.


1

Một số mã để xem qua danh sách các tiêu đề (tuần hoàn hoặc một lần):

    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

Tôi sử dụng cái này:

document.title = "your_customize_title";

1

Mã HTML:

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

Mã truy vấn:

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

0
document.title="your title";

Tôi thích điều này.


Đây chỉ là sự lặp lại của các câu trả lời hiện có.
Pang

0

Cách rất đơn giản để thay đổi tiêu đề trang bằng jquery ..

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

Đây là phương thức Jquery:

$(document).ready(function(){   
    $("#changeTitle").click(function() {
       $(document).prop('title','I am New One');
    });
});
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.