如何使用JavaScript打开指定标题的新浏览器标签页？

方法1：打开同源空白页并设置标题 #

这是最可靠的方案，因为你能完全控制新打开的页面：

// 从变量或用户输入获取动态标题
const dynamicTitle = "我的自定义标题";

// 打开空白新标签页
const newTab = window.open('', '_blank');

// 页面加载完成后设置标题（可选添加页面内容）
newTab.onload = function() {
  newTab.document.title = dynamicTitle;
  // 可选：给空白页添加内容，不需要可删除这行
  newTab.document.body.innerHTML = `<h1>${dynamicTitle}</h1>`;
};

方法2：打开外部页面时的折中方案（局限性大） #

如果要打开外部域名的页面，浏览器同源策略会阻止你直接修改它的标题。这种情况可以用中转页过渡：

1. 先在项目里建一个简单的中转HTML页面（比如redirect.html）：

<!DOCTYPE html>
<html>
<head>
  <script>
    // 读取URL参数里的标题和目标地址
    const params = new URLSearchParams(window.location.search);
    document.title = params.get('title') || '默认标题';
    // 跳转到目标页面
    window.location.href = params.get('url');
  </script>
</head>
<body></body>
</html>

2. 在主页面用JS调用：

const targetUrl = "https://example.com";
const dynamicTitle = "外部页面的自定义标题";

// 打开中转页并传递参数
window.open(`redirect.html?title=${encodeURIComponent(dynamicTitle)}&url=${encodeURIComponent(targetUrl)}`, '_blank');

注意：这种方法只能让中转页短暂显示自定义标题，跳转到外部页面后，标题会被目标页面的原始标题替换。

关键提醒 #

• 浏览器安全限制：非同源页面的DOM（包括标题）无法直接修改，这是同源策略的安全机制，防止恶意脚本篡改其他网站内容。
• 动态标题来源：可以把dynamicTitle替换为用户输入值（比如document.getElementById('titleInput').value），注意做转义处理避免XSS风险。

内容的提问来源于stack exchange，提问作者manimk