我有一个网页,实现了一组选项卡每个显示不同的内容。单击选项卡不会刷新页面,而是隐藏/取消隐藏客户端的内容。
现在需要根据页面上选择的选项卡更改页面标题(出于SEO原因)。这可能吗?有人能建议一个解决方案,通过javascript动态改变页面标题,而不重新加载页面?
我有一个网页,实现了一组选项卡每个显示不同的内容。单击选项卡不会刷新页面,而是隐藏/取消隐藏客户端的内容。
现在需要根据页面上选择的选项卡更改页面标题(出于SEO原因)。这可能吗?有人能建议一个解决方案,通过javascript动态改变页面标题,而不重新加载页面?
当前回答
也许你可以在一个字符串中加载你的标题上所有的选项卡标题,然后一旦你加载其中一个选项卡,通过javascript改变标题
首先把你的标题设置为
my app | description | contact | about us |
一旦你加载一个标签运行:
document.title = "my app | tab title";
其他回答
也许你可以在一个字符串中加载你的标题上所有的选项卡标题,然后一旦你加载其中一个选项卡,通过javascript改变标题
首先把你的标题设置为
my app | description | contact | about us |
一旦你加载一个标签运行:
document.title = "my app | tab title";
代码是 文档。Title = 'test'
使用document.title。
请参阅本页的基本教程。
但是为了得到SEO的配合
当页面发生变化时,你需要重新加载页面,这样搜索引擎才能看到不同的标题等等。
因此,确保页面重新加载工作,然后再添加文档。标题修改
有很多方法可以改变标题,主要有两种:
可疑的方法
在HTML中放入title标签(例如<title>Hello</title>),然后在javascript中:
let title_el = document.querySelector("title");
if(title_el)
title_el.innerHTML = "World";
明显正确的方法
最简单的方法是实际使用文档对象模型(DOM)提供的方法
document.title = "Hello World";
前一种方法通常用于更改文档正文中的标记。使用这种方法来修改元数据标签,就像在头部(如title)中发现的那样,这是一种值得怀疑的做法,不是惯用的,不是很好的风格,甚至可能无法移植。但你可以肯定的一点是,如果其他开发者看到你的标题,他们会很恼火。innerHTML =…他们维护的代码。
你想要的是后一种方法。这个属性是在DOM规范中提供的,顾名思义,专门用于更改标题。
还要注意,如果使用XUL,可能希望在尝试设置或获取标题之前检查文档是否已加载,否则将调用未定义的行为(这里是龙),这本身就是一个可怕的概念。这可以通过JavaScript实现,也可以不实现,因为DOM上的文档不一定属于JavaScript。但是XUL是完全不同的东西,所以我离题了。
说到.innerHTML
要记住的一些好建议是,使用. innerhtml通常是草率的。请改用appendChild。
虽然在两种情况下,我仍然发现.innerHTML是有用的,包括插入纯文本到一个小元素…
label.innerHTML = "Hello World";
// as opposed to...
label.appendChild(document.createTextNode("Hello World"));
// example:
el.appendChild(function(){
let el = document.createElement("span");
el.className = "label";
el.innerHTML = label_text;
return el;
}());
...清理一个集装箱…
container.innerHTML = "";
// as opposed to... umm... okay, I guess I'm rolling my own
[...container.childNodes].forEach(function(child){
container.removeChild(child);
});