Ändern des Seitentitels mit Jquery

82

Wie <title>erstelle ich mit jquery dynamisch wechselnde Tags?

Beispiel: Hinzufügen von 3 >Symbolen nacheinander

> title
>> title
>>> title

javascript jquery title

— Ilja Medwedew
quelle

186

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

Dies ist einfach ein JQuery-Wrapper für:

document.title = 'test';

So fügen Sie regelmäßig ein> hinzu:

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

changeTitle();

— Gazler
quelle

Könnte es nicht besser sein, setInterval und clearInterval anstelle einer Reihe von setTimeouts zu verwenden?

— Spycho

1

Was bedeutet es für SEO, die Seite über jQuery aufzurufen?

— TheBlackBenzKid

20

Es ist nicht erforderlich, jQuery zu verwenden, um den Titel zu ändern. Versuchen:

document.title = "blarg";

Siehe diese Frage für weitere Details.

Um die Schaltfläche dynamisch zu ändern, klicken Sie auf:

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

Versuchen Sie Folgendes, um die Schleife dynamisch zu ändern:

var counter = 0;

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

So reihen Sie die beiden so aneinander, dass sie sich beim Klicken auf die Schaltfläche in einer Schleife dynamisch ändern:

var counter = 0;

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

— Spycho
quelle

Wenn der Benutzer auf die Schaltfläche klickt, wird der Titel wie in Frage geändert und diese Änderung wird wiederholt

— Ilya Medvedev

4

mit

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

— Gowri
quelle

Ich weiß, aber wie macht man es dynamisch?

— Ilya Medwedew

2

Nun, das ist dynamisch, dh mit Javascript. Würden Sie zufällig "animiert" bedeuten?

— Darma

@IIya: Geben Sie mehr Markup und Code für eine bessere Antwort. Ihre Fragen sind unklar.

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

Erweitern Sie das Snippet

— Shahbaz Ahmad
quelle

2

Ich benutze (und empfehle):

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

und es funktioniert auch im IE, dies ist ein Alias für

document.title = "Another Title";

Einige werden darüber diskutieren, was besser ist, prop oder attr , und da prop call DOM-Eigenschaften und attr HTML-Eigenschaften aufruft, denke ich, dass dies tatsächlich besser ist ...

Verwenden Sie dies nach dem DOM-Laden

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

hoffe das hilft.

— Sakes Yordi
quelle

1

Ein Code zum Durchlaufen einer Titelliste (kreisförmig oder einmalig):

    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
quelle

1

Ich benutze dieses:

document.title = "your_customize_title";

— Haimei
quelle

1

HTML Quelltext:

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

Abfragecode:

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

— Ekta P. Sutariya
quelle

0

document.title="your title";

Ich bevorzuge das.

— Raheem
quelle

Dies ist nur eine Wiederholung der vorhandenen Antworten.

— Pang

0

Es ist eine sehr einfache Möglichkeit, den Seitentitel mit jquery zu ändern.

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

Hier die Jquery-Methode:

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

— Ekta P. Sutariya
quelle