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

Question

我对 link 的新标签有疑问。

我是否可以在用户单击 link 之前设置浏览器选项卡标题？如果新选项卡中包含的 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>

Answer 1

如果您在第 1 页，并在新选项卡中打开第 2 页，则无法从第 1 页为第 2 页设置标题。

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

Answer 2

您可以通过哈希传递标题并将其放在另一个页面上，如果另一个页面是您的，您可以修改其代码。

第 1 页：

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

第 2 页 - 像这样修改 body 开始标记：

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

Answer 3

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

Answer 4

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

您可以在 window onload 中动态设置它以查找所有 a 标签并添加一个 click 事件 whihc 打开 window 并设置标题。

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

请注意，这仅适用于同一域中的页面（出于安全考虑），并且它不会处理人们的右键单击和按下 "Open in New Window"。然而，在 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

Answer 5

你有两个选择。使用纯 HTML，您可以让用户打开 link，然后再更改标题。或者您可以使用内联 JavaScript 更改标题。以下是您如何执行这两项操作：

方法一

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

方法二

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

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

Answer 6

我没有看到 addEventListener 可靠地工作，尤其是在使用 javascript 打开新页面时。更改选项卡标题并使其可靠工作的最佳方法是设置页面加载前的超时时间。您可能需要调整超时值，但它确实有效。

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

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

Answer 7

最简单的方法如下：

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"

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

How to set the title for the new browser tab?

html

javascript

css

方法一

方法二