如何在 .ready() 期间更改文档的标题？答案

【问题标题】：How can I change the title of the document during .ready()?如何在 .ready() 期间更改文档的标题？
【发布时间】：2010-09-15 20:35:33
【问题描述】：

我在 Ruby on Rails 中使用了一些嵌套布局，在其中一个布局中，我需要从 div 中读取字符串并将其设置为文档的标题。设置文档标题的正确方法（如果有）是什么？

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

    // ???

});
</script>

【问题讨论】：

对于那些想知道为什么不只是在服务器端设置标题标签的人的解释：有时页面是由内容和动作混合生成的。 IE。您可能首先有一个包含文件，它制作标题，然后从数据库中提取内容，例如顾客姓名。这意味着在发送标题时，客户名称是未知的。这是草率的编码，没有分离业务逻辑和表示，首先获取所有数据，然后显示它，但有时这就是你所拥有的。老板：“把客户名放在标题里就行了”你“我要重构所有代码。”

【解决方案1】：

以下内容应该可行，但与 SEO 不兼容。最好把title放在title标签里。

<script type="text/javascript">

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

</script>

【讨论】：

不会有任何 javascript 生成的 HTML 与 SEO 不兼容吗？我很确定 googlebot 不会执行 javascript...
我读到有一些方法可以告诉 Google Bot 在使用 Ajax 制作页面时要阅读的内容...尝试谷歌搜索。
@trusktr：我认为您正在谈论这篇 Google 文章：Making AJAX Applications Crawlable。但这与这类问题无关，所以 Orion Edwards 是对的。这只是一种让 Google 通过 HTML 快照和一些服务器端修改来读取通常使用 AJAX 生成的内容的方法。
对我来说在 FF 29.0.1 中不起作用，但下面描述的这个解决方案有效：stackoverflow.com/a/11171548/1915920
@OrionEdwards 现在，五年多后，rimmkaufman.com/blog/googlebot-crawling-javascript-site-ready/…

【解决方案2】：

不要使用$('title').text('hi')，因为IE不支持。

最好使用document.title = 'new title';

【讨论】：

【解决方案3】：

这在所有浏览器中都可以正常工作...

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

在 IE 中也可以使用

【讨论】：

【解决方案4】：

像这样：

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

如果您希望您的网站被搜索引擎正确索引，请务必设置默认标题。

一个小提示：

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

【讨论】：

【解决方案5】：

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

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

});
</script>

【讨论】：

【解决方案6】：

document.title 不适合我。

这是使用 JQuery 的另一种方法

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

【讨论】：

对我来说也是（FF 29.0.1），如果根本没有设置<title>，即使$('html head').add('<title>override default title</title>') 也不起作用

【解决方案7】：

我在 Ruby on Rails 中使用了一些嵌套布局，在其中一个布局中，我需要从 div 中读取字符串并将其设置为文档的标题。

正确的做法是在服务器端。

在您的布局中，有时会有一些代码将文本放入 div。让这段代码也设置一些实例变量，例如@page_title，然后在你的外部布局中让它做<%= @page_title || 'Default Title' %>

【讨论】：

【解决方案8】：

如果您有一个与当前标题会话相呼应的服务器端脚本 get_title.php，这在 jQuery 中可以正常工作：

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

【讨论】：