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 cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.