jQuery: Wie ändere ich den Titel eines Dokuments während .ready ()?


145

Ich verwende einige verschachtelte Layouts in Ruby on Rails, und in einem der Layouts muss ich eine Zeichenfolge aus einem div einlesen und diese als Titel des Dokuments festlegen. Wie kann der Titel des Dokuments (falls vorhanden) korrekt festgelegt werden?

<script type="text/javascript">
$(document).ready(function() {

    // ???

});
</script>

Nur eine Erklärung für diejenigen, die sich fragen, warum sie nicht einfach das Titel-Tag auf der Serverseite festlegen: Manchmal wird die Seite mit gemischtem Inhalt und Aktion generiert. Das heißt, Sie haben möglicherweise zuerst eine Incude-Datei, die den Header erstellt, und dann wird der Inhalt aus einer Datenbank abgerufen, z. B. der Name des Kunden. Das heißt, zum Zeitpunkt des Versands des Titels ist der Name des Kunden nicht bekannt. Es ist eine schlampige Codierung, die Geschäftslogik und Präsentation nicht trennt. Zuerst alle Daten abrufen und dann anzeigen, aber manchmal ist es das, was Sie haben. Boss: "Geben Sie einfach den Benutzernamen in den Titel" Sie "ein. Ich muss den gesamten Code umgestalten."
Leif Neland

Antworten:


310

Das Folgende sollte funktionieren, wäre aber nicht SEO-kompatibel. Am besten setzen Sie den Titel in das Titel-Tag.

<script type="text/javascript">

    $(document).ready(function() {
        document.title = 'blah';
    });

</script>

14
Wäre kein durch Javascript generiertes HTML SEO-inkompatibel? Ich bin mir ziemlich sicher, dass Googlebot kein Javascript ausführt ...
Orion Edwards

1
Ich habe gelesen, dass es Möglichkeiten gibt, Google Bot mitzuteilen, was zu lesen ist, wenn Ihre Seiten mit Ajax erstellt werden.
Trusktr

2
@trusktr: Ich denke, Sie sprechen über diesen Google-Artikel: AJAX-Anwendungen crawlbar machen . Aber es hat NICHTS mit dieser Art von Problem zu tun, also hat Orion Edwards Recht. Es ist nur eine Methode, mit der Google Inhalte, die normalerweise mit AJAX generiert werden, über HTML-Snapshots und einige serverseitige Änderungen lesen kann.
Sk8erPeter

1
funktioniert nicht in FF 29.0.1 für mich, aber diese unten beschriebene Lösung funktioniert: stackoverflow.com/a/11171548/1915920
Andreas Dietrich

2
@OrionEdwards Jetzt, mehr als fünf Jahre später, rimmkaufman.com/blog/googlebot-crawling-javascript-site-ready/…
kqr

48

Nicht verwenden $('title').text('hi'), da der IE dies nicht unterstützt.

Es ist besser zu benutzen document.title = 'new title';



36

So was:

$(document).ready(function ()
{
    document.title = "Hello World!";
});

Stellen Sie sicher, dass Sie einen Standardtitel festlegen, wenn Ihre Website von Suchmaschinen ordnungsgemäß indiziert werden soll.

Ein kleiner Tipp:

$(function ()
{
    // this is a shorthand for the whole document-ready thing
    // In my opinion, it's more readable 
});

3
Sie sollten die Kurzschrift als neue "Frage" an sich posten. Nützlich!
MDCore

Ich bin mir nicht sicher, ob ich dich verstehe, MDCore.
Cllpse

Jeff hat vorgeschlagen, Stackoverflow für die technischen Tipps zu verwenden, die man in seinem Blog veröffentlichen könnte. Ich schlug vor, den Tipp als neue Frage zu veröffentlichen, die Sie selbst beantworten.
MDCore

16
<script type="text/javascript">
$(document).ready(function() {

    $(this).attr("title", "sometitle");

});
</script>

2
Ja, eigentlich können Sie nicht $('title').text(...)wegen eines Fehlers in IE
TMS

1
Warum nicht document.title?
Adardesign

6

document.title hat bei mir nicht funktioniert.

Hier ist eine andere Möglichkeit, dies mit JQuery zu tun

$('html head').find('title').text("My New Page Title");

auch für mich (FF 29.0.1) und wenn es überhaupt kein <title>Setup gibt , $('html head').add('<title>override default title</title>')funktioniert es auch nicht
Andreas Dietrich

2
Ist das SEO freundlich?
SearchForKnowledge

5

Ich verwende einige verschachtelte Layouts in Ruby on Rails, und in einem der Layouts muss ich eine Zeichenfolge aus einem div einlesen und diese als Titel des Dokuments festlegen.

Der richtige Weg, dies zu tun, ist auf der Serverseite.

In Ihrem Layout gibt es irgendwann einen Code, der den Text in das div einfügt . Stellen Sie mit diesem Code auch eine Instanzvariable ein, z. B. @page_titleund lassen Sie es dann in Ihrem äußeren Layout tun<%= @page_title || 'Default Title' %>


-2

Wenn Sie ein serverseitiges Skript get_title.php haben, das die aktuelle Titelsitzung wiedergibt, funktioniert dies in jQuery einwandfrei:

$.get('get_title.php',function(*respons*){
    title=*respons* + 'whatever you want'   
    $(document).attr('title',title)
})

2
Eine Ajax-Anfrage zum Setzen des Titels zu machen, ist meiner Meinung nach sehr verschwenderisch.
Jason Miesionczek

2
OP forderte speziell eine jQuery-Lösung für ein clientseitiges Problem an.
Joel Etherton

1
Das Festlegen des Titels über Ajax ist nützlich, da es helfen kann, die aktuelle Browser-Registerkarte für den Benutzer zu identifizieren, wenn er sich auf einer anderen Seite befindet.
Chim
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.