Javascript 如何设置新浏览器标签的标题？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27846474/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set the title for the new browser tab?
提问by BonJon
I have a question about the new tab for the link.
我对链接的新标签有疑问。
Is there anyway I can set the browser tab title before user clicks a link? It seems like there is no way to debate the title for the new tab if the html contained in the new tab doesn't have title attribute. Am I right? How do I set the title?
无论如何，我可以在用户单击链接之前设置浏览器标签标题吗？如果新选项卡中包含的 html 没有 title 属性，似乎无法讨论新选项卡的标题。我对吗？如何设置标题？
//the href is dynamic so I can't set them one by one because I have 100+ html file here
<a href="test.html" target="_blank">open me<a>
采纳答案by Rhumborl
As you have it, this is not possible because your links are just normal HTML links. When the new page opens in a new tab, the current page will not have any reference to it and so cannot change it in any way. You will need to open the page using javascript and set the title that way.
正如您所拥有的，这是不可能的，因为您的链接只是普通的 HTML 链接。当新页面在新选项卡中打开时，当前页面将不会对其有任何引用，因此无法以任何方式对其进行更改。您将需要使用 javascript 打开页面并以这种方式设置标题。
You can dynamically set this up in window onloadto find all atags and add a clickevent whihc opens the window and sets the title.
您可以动态设置它window onload以查找所有a标签并添加一个click事件来打开窗口并设置标题。
If you want different titles for each page, you can store this in a data-attribute in the atag.
如果您希望每个页面有不同的标题，您可以将其存储data-在a标签的属性中。
Note tho that this will only work with pages in the same domain (for security), and that it does not handle people right clicking and pressing "Open in New Window". Middle click in Windows does seem to work however.
请注意，这仅适用于同一域中的页面（出于安全考虑），并且它不处理人们右键单击并按“在新窗口中打开”。但是，在 Windows 中单击鼠标中键似乎确实有效。
HTML
HTML
<a href="test.html" data-title="A new page" target="_blank">open me</a>
JavaScript
JavaScript
window.addEventListener("load", function() {
// does the actual opening
function openWindow(event) {
event = event || window.event;
// find the url and title to set
var href = this.getAttribute("href");
var newTitle = this.getAttribute("data-title");
// or if you work the title out some other way...
// var newTitle = "Some constant string";
// open the window
var newWin = window.open(href, "_blank");
// add a load listener to the window so that the title gets changed on page load
newWin.addEventListener("load", function() {
newWin.document.title = newTitle;
});
// stop the default `a` link or you will get 2 new windows!
event.returnValue = false;
}
// find all a tags opening in a new window
var links = document.querySelectorAll("a[target=_blank][data-title]");
// or this if you don't want to store custom titles with each link
//var links = document.querySelectorAll("a[target=_blank]");
// add a click event for each so we can do our own thing
for(var i = 0; i < links.length; i++) {
links[i].addEventListener("click", openWindow.bind(links[i]));
}
});
回答by nicael
You can pass the title with hash and get it on another page, if this another page is yours and you can modify its code.
您可以使用哈希传递标题并将其放在另一个页面上，如果另一个页面是您的并且您可以修改其代码。
1st page:
第一页：
...
<a href="test.html#the_title_you_want" target="_blank">open me<a>
...
2nd page - modify the body opening tag like this:
第二页 - 像这样修改正文开始标签：
<body onload="document.title=window.location.hash.replace('#','');">
If the page you are linking to isn't yours, you can use window.openmethod:
如果您要链接的页面不是您的页面，则可以使用window.open方法：
<a href="javascript:var mw = window.open('test.html');mw.document.title = 'the_title_you_want';">open me</a>
回答by Pluto
You have two options. Using pure HTML, you can let the user open up links, then later on change the title. Or you can change the title with inline JavaScript. Here's how you do both:
你有两个选择。使用纯 HTML，您可以让用户打开链接，然后更改标题。或者您可以使用内联 JavaScript 更改标题。以下是您如何执行这两项操作：
Method 1
方法一
Change your links by assigning a target attribute, and then later on use that window name to control the document. For instance in your links it would be: <a href="whatever" target="theNewWindow">. Whenever you want to change the title for this page, you'd use JavaScript as such: window.open("", "theNewWindow").document.title = "New Page Title!";The problem with this method however is that all links with that target/window name will open in that same window. In addition, after the first time the link is clicked, your browser won't automatically switch to the new tab/window.
通过分配目标属性来更改链接，然后使用该窗口名称来控制文档。例如，在您的链接中，它将是：<a href="whatever" target="theNewWindow">。每当您想更改此页面的标题时，您都会使用 JavaScript：window.open("", "theNewWindow").document.title = "New Page Title!";但是，此方法的问题是所有具有该目标/窗口名称的链接都将在同一窗口中打开。此外，在第一次点击链接后，您的浏览器不会自动切换到新的选项卡/窗口。
Method 2
方法二
Change your links by assigning an onclick attribute, which would open the link manually and change the title of the page immediately. Basically it would come down to look like: <a href="whatever" onclick="var w=window.open(this.href, '_blank'); (w.onload=function(){w.document.title='New Page Title!';})(); return false;">. This opens the window based on the href attribute, immediately changes the title, and sets the window to change the title to that when it finishes loading (just in case there really was a title tag).
通过分配 onclick 属性来更改您的链接，这将手动打开链接并立即更改页面标题。基本上，它会降下来的样子：<a href="whatever" onclick="var w=window.open(this.href, '_blank'); (w.onload=function(){w.document.title='New Page Title!';})(); return false;">。这将根据 href 属性打开窗口，立即更改标题，并将窗口设置为在完成加载时更改标题（以防万一真的有标题标签）。
The problem with both of these methods (as mentioned by others) is your html files have to be on the same domain.
这两种方法的问题（正如其他人所提到的）是您的 html 文件必须在同一个域中。
回答by Mike Collins
I have not seen addEventListener work reliably, especially when opening a new page using javascript. The best way to change the tab title and have it work reliably is to set a timeout until the page loads. You may have to play with the timeout value, but it works.
我还没有看到 addEventListener 可靠地工作，尤其是在使用 javascript 打开新页面时。更改选项卡标题并使其可靠工作的最佳方法是设置超时直到页面加载。您可能必须使用超时值，但它有效。
var newWindow = window.open(url, '_blank');
setTimeout(function () {
newWindow.document.title = "My Tab Name";
}, 100);
回答by David P
You could make your own Page 2 that opens up the other pages (the ones you can't edit), in a frameset. You can then either change the title dynamically when loading your page 2, or as others have suggested if you use window.open you can control the title from the parent page.
您可以制作自己的第 2 页，以在框架集中打开其他页面（您无法编辑的页面）。然后，您可以在加载页面 2 时动态更改标题，或者按照其他人的建议，如果您使用 window.open，您可以从父页面控制标题。
回答by AtanuCSE
If you are in page 1, and opening page 2 in a new tab, you can't set title for page 2 from page 1.
如果您在第 1 页，并在新选项卡中打开第 2 页，则无法从第 1 页设置第 2 页的标题。
If you have access to page 2 then it's possible, otherwise not.
如果您有权访问第 2 页，则有可能，否则就没有。
