jQuery:如何在.ready()期间更改文档标题?


146

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

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

    // ???

});
</script>

只是为那些想知道为什么不只是在服务器端设置标题标签的人提供了一个解释:有时页面是在内容和操作混合在一起的情况下生成的。也就是说,您可能首先有一个incude文件,该文件成为标头,然后从数据库中提取内容,例如客户名称。这意味着在发送标题时,客户名称未知。这是草率的编码,没有将业务逻辑和表示分离开来,先获取所有数据,然后令人讨厌,但这有时就是您所拥有的。老板:“只要在标题中输入客户名称”,您“我就必须重构所有代码。”
Leif Neland

Answers:


310

以下应该可以,但是与SEO不兼容。最好将标题放在title标签中。

<script type="text/javascript">

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

</script>

14
用JavaScript生成的HTML不会与SEO不兼容吗?我很确定googlebot不会执行javascript ...
Orion Edwards,

1
我读过,有一些方法可以告诉Google Bot使用Ajax制作页面时应阅读的内容...尝试使用Google搜索。
trusktr 2011年

2
@trusktr:我想您是在谈论Google的这一文章:使AJAX应用程序可抓取。但这与此类问题无关,因此Orion Edwards是对的。这只是让Google通过HTML快照和某些服务器端修改来读取通常由AJAX生成的内容的一种方法。
Sk8erPeter

1
对我来说,在FF 29.0.1中不起作用,但是下面描述的此解决方案有效:stackoverflow.com/a/11171548/1915920
Andreas Dietrich

2
@OrionEdwards现在,五年多以后,rimmkaufman.com
blog /

48

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

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



36

像这样:

$(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 
});

3
您应该将速记内容本身发布为新的“问题”。有用!
MDCore

不确定我了解您,MDCore。
cllpse

杰夫建议人们使用stackoverflow作为可能会贴在自己博客上的技术提示。我建议将提示作为您自己回答的新问题发布。
MDCore


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>')无法使用
Andreas Dietrich

2
这是SEO友好的吗?
SearchForKnowledge

5

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

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

在您的布局中,有时会有些代码将文本放入div中。使此代码还设置一些实例变量,例如@page_title,然后在您的外部布局中进行设置<%= @page_title || 'Default Title' %>


-2

如果您有一个服务器端脚本get_title.php可以回显当前标题会话,则在jQuery中可以正常工作:

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

2
我认为,进行ajax请求来设置标题是非常浪费的。
詹森·米森西奇

2
OP专门要求使用jQuery解决客户端问题。
Joel Etherton

1
通过ajax设置标题很有用,因为它可以帮助用户在其他页面上时识别当前的浏览器选项卡。
2013年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.