如何设置新浏览器标签的标题？
[英]How to set the title for the new browser tab?
问题描述
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.如果新选项卡中包含的 html 没有 title 属性，似乎无法讨论新选项卡的标题。 Am I right?我对吗？ How do I set the 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>
7 个解决方案
解决方案1
8 已采纳 2015-01-08 18:24:50
As you have it, this is not possible because your links are just normal HTML links.正如您所拥有的，这是不可能的，因为您的链接只是普通的 HTML 链接。 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.您将需要使用 javascript 打开页面并以这种方式设置标题。
You can dynamically set this up in window onload to find all a tags and add a click event whihc opens the window and sets the title.您可以动态此设置在window onload找到所有的a标签，并添加click whihc打开的窗口，并设置标题事件。
If you want different titles for each page, you can store this in a data- attribute in the a tag.如果您希望每个页面有不同的标题，您可以将其存储在a标签的data-属性中。
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]));
}
});
解决方案2
2 2015-01-08 18:04:01
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.open method:如果您链接的页面不是您的，您可以使用window.open方法：
<a href="javascript:var mw = window.open('test.html');mw.document.title = 'the_title_you_want';">open me</a>
解决方案3
1 2015-01-08 19:25:01
You have two options.你有两个选择。 Using pure HTML, you can let the user open up links, then later on change the title.使用纯 HTML，您可以让用户打开链接，然后更改标题。 Or you can change the title with inline JavaScript.或者您可以使用内联 JavaScript 更改标题。 Here's how you do both:以下是您如何执行这两项操作：
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"> .例如，在您的链接中，它将是： <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!";每当您想更改此页面的标题时，您都可以使用 JavaScript： 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.此外，在第一次点击链接后，您的浏览器不会自动切换到新的选项卡/窗口。
Method 2方法二
Change your links by assigning an onclick attribute, which would open the link manually and change the title of the page immediately.通过分配 onclick 属性来更改您的链接，这将手动打开链接并立即更改页面标题。 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;"> .基本上它看起来像： <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).这会根据 href 属性打开窗口，立即更改标题，并设置窗口以在完成加载时更改标题（以防万一真的有标题标签）。
The problem with both of these methods (as mentioned by others) is your html files have to be on the same domain.这两种方法的问题（正如其他人所提到的）是您的 html 文件必须在同一个域中。
解决方案4
1 2018-09-17 15:47:28
I have not seen addEventListener work reliably, especially when opening a new page using javascript.我还没有看到 addEventListener 可靠地工作，尤其是在使用 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.您可能必须使用超时值，但它有效。
var newWindow = window.open(url, '_blank');
setTimeout(function () {
newWindow.document.title = "My Tab Name";
}, 100);
解决方案5
0 2015-01-08 18:17:41
You could make your own Page 2 that opens up the other pages (the ones you can't edit), in a frameset.您可以制作自己的第 2 页，以在框架集中打开其他页面（您无法编辑的页面）。 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 时动态更改标题，或者按照其他人的建议，如果您使用 window.open，您可以从父页面控制标题。
解决方案6
0 2021-05-12 17:33:59
The simplest way is a follows:最简单的方法如下：
var winTab = window.open("", "_blank")
//Open URL by writing iframe with given URL
winTab.document.write("write iframe with your url in src here")
//Set Title for the new tab
winTab.document.title = "Form Title"
解决方案7
-1 2015-01-08 18:02:18
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 页，则有可能，否则就没有。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.