如何设置新浏览器标签的标题？答案

【问题标题】：How to set the title for the new browser tab?如何设置新浏览器标签的标题？
【发布时间】：2015-01-08 17:53:03
【问题描述】：

我对链接的新标签有疑问。

在用户点击链接之前我可以设置浏览器标签标题吗？如果新标签中包含的 html 没有标题属性，似乎没有办法讨论新标签的标题。我对吗？如何设置标题？

//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>

【问题讨论】：

你的意思是document.title = 'foo';？
href 是动态的，因此您必须对来自数据库或其他任何页面的这些页面有一些信息。所以当页面加载时将它们设置在那里......
如何拥有新标签页？你还是外部链接？因为如果它你可以在 url 上设置标题作为参数并在标签打开时使用它
您的意思是要通过链接传递下一页的标题？
@PaulS。我不能这样做，因为它会打开一个新选项卡，我可以打开 100 多个 html 文件。我无权访问这些 html 文件，并且它们没有在 html 中指定标题

标签： javascript html css

【解决方案1】：

正如您所拥有的，这是不可能的，因为您的链接只是普通的 HTML 链接。当新页面在新选项卡中打开时，当前页面将没有任何引用，因此无法以任何方式更改它。您需要使用 javascript 打开页面并以这种方式设置标题。

您可以在window onload 中动态设置它以查找所有a 标记并添加click 事件来打开窗口并设置标题。

如果您希望每个页面有不同的标题，可以将其存储在 a 标记中的 data- 属性中。

请注意，这仅适用于同一域中的页面（出于安全考虑），并且它不处理人们右键单击并按“在新窗口中打开”。不过，Windows 中的中键似乎确实有效。

HTML

<a href="test.html" data-title="A new page" target="_blank">open me</a>

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]));
    }

});

Sample JsFiddle

【讨论】：

【解决方案2】：

你可以通过 hash 传递标题并在另一个页面上获取它，如果这个另一个页面是你的，你可以修改它的代码。

第一页：

...
<a href="test.html#the_title_you_want" target="_blank">open me<a>
...

第二页 - 像这样修改正文开始标签：

<body onload="document.title=window.location.hash.replace('#','');">

如果您链接的页面不是您的，您可以使用window.open 方法：

<a href="javascript:var mw = window.open('test.html');mw.document.title = 'the_title_you_want';">open me</a>

【讨论】：

谢谢 Nicael，我想我误解了你的问题。他们在同一个域中，但我无权访问第二页。 +1 虽然
我尝试了最后一个选项 - 也不适合我

【解决方案3】：

我还没有看到 addEventListener 可靠地工作，尤其是在使用 javascript 打开新页面时。更改选项卡标题并使其可靠工作的最佳方法是设置超时，直到页面加载。您可能不得不使用超时值，但它可以工作。

var newWindow = window.open(url, '_blank');

setTimeout(function () {
    newWindow.document.title = "My Tab Name";
}, 100);

【讨论】：

好主意，但在某些系统上会出现跨域权限错误

【解决方案4】：

你有两个选择。使用纯 HTML，您可以让用户打开链接，然后更改标题。或者您可以使用内联 JavaScript 更改标题。以下是你如何做到这两点：

方法一

通过分配目标属性来更改链接，然后使用该窗口名称来控制文档。例如，在您的链接中，它将是：<a href="whatever" target="theNewWindow">。每当您想更改此页面的标题时，您都会使用 JavaScript：window.open("", "theNewWindow").document.title = "New Page Title!"; 然而，此方法的问题是所有具有该目标/窗口名称的链接都将在同一个窗口中打开。另外，第一次点击链接后，您的浏览器不会自动切换到新的标签/窗口。

方法二

通过分配 onclick 属性来更改链接，这将手动打开链接并立即更改页面标题。基本上它看起来像：<a href="whatever" onclick="var w=window.open(this.href, '_blank'); (w.onload=function(){w.document.title='New Page Title!';})(); return false;">。这会根据 href 属性打开窗口，立即更改标题，并将窗口设置为在完成加载时更改标题（以防万一确实有标题标签）。

这两种方法的问题（正如其他人所提到的）是您的 html 文件必须在同一个域中。

【讨论】：

【解决方案5】：

您可以制作自己的第 2 页，在框架集中打开其他页面（您无法编辑的页面）。然后，您可以在加载页面 2 时动态更改标题，或者按照其他人的建议，如果您使用 window.open，您可以从父页面控制标题。

【讨论】：

【解决方案6】：

最简单的方法如下：

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 页，并在新选项卡中打开第 2 页，则无法从第 1 页设置第 2 页的标题。

如果您可以访问第 2 页，则可以，否则不能。

【讨论】：

其实你可以在用JS而不是链接打开标签的时候设置标题。在这种情况下，当然域必须相同。
@Teemu 怎么样？假设他们在同一个域上。如何在不触摸第 2 页的情况下更改第 2 页的标题？
使用window.open 打开标签页，这样您就可以看到标签页的window 以及其中的所有内容。