通过JavaScript向新页面写入内容并保留原页面地址

这个问题我之前也碰到过，核心是要让新窗口的相对资源解析基准和原页面保持一致，同时又能完全自定义页面内容。这里有两个靠谱的解决方案：

方案一：利用<base>标签指定资源基准（推荐） #

通过在动态内容中添加<base>标签，直接告诉浏览器所有相对URL的解析基准是原页面的地址，这样即使新窗口是空白打开的，相对资源也能正确指向原页面的对应路径。

const win = window.open("", "");
// 构造包含base标签的动态内容，基准设为原页面的完整URL
const dynamicContent = `
<base href="${window.location.href}">
<link rel="stylesheet" href="/static/style.css">
<div>my dynamic content</div>
`;
win.document.documentElement.innerHTML = dynamicContent;

原理说明 #

<base>标签是HTML的标准元素，它会为页面中所有的相对URL（包括样式、脚本、图片等）设置一个统一的解析基准。把它的href设为原页面的window.location.href，就能让新窗口里的相对资源和原页面的引用逻辑完全一致。如果只需要基于原页面的域名/根路径，也可以简化为window.location.origin。

方案二：打开原页面后立即停止加载并替换内容 #

如果你确实需要新窗口的地址栏显示原页面的URL，可以先打开原页面，然后立即调用stop()方法终止原页面的加载，再替换成自定义内容。不过这个方法可能存在兼容性问题，部分浏览器可能会提前加载原页面的部分资源，所以仅作为备选。

const win = window.open(window.location, "");
// 立即停止原页面的加载过程
win.stop();
// 写入自定义内容，此时新窗口的地址已经是原页面URL，相对资源会自动基于它解析
const dynamicContent = `
<link rel="stylesheet" href="/static/style.css">
<div>my dynamic content</div>
`;
win.document.documentElement.innerHTML = dynamicContent;

额外注意 #

• 浏览器的弹出窗口拦截机制通常只允许在用户交互（比如点击事件）中触发window.open()，所以确保你的代码是绑定在用户操作上的，避免被拦截。

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