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

Posted 2023-05-08

【中文标题】如何在 .ready() 期间更改文档的标题？

【英文标题】：How can I change the title of the document during .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 中不起作用，但下面描述的这个解决方案有效：***.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 
);

【讨论】：

您应该将速记内容本身作为一个新的“问题”发布。有用！

不确定我是否理解你，MDCore。

Jeff 建议使用 *** 来获取可能放在博客上的技术提示。我建议将提示作为您自己回答的新问题发布。

【参考方案5】：

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

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

);
</script>

【讨论】：

是的，实际上，你不能使用$('title').text(...)，因为bug in IE

为什么不document.title？

【参考方案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)
)

【讨论】：

在我看来，做一个ajax请求来设置标题是非常浪费的。

OP 专门请求一个客户端问题的 jQuery 解决方案。

通过 ajax 设置标题很有用，因为它可以帮助在用户处于不同页面时识别当前浏览器选项卡。