如何通过window.open打开窗口并添加HTML或JS代码？

重要前提：同源策略限制 #

如果你用window.open打开的是外部域名页面（比如示例中的https://google.com），完全无法向该窗口注入代码或修改内容。这是浏览器的同源安全策略，禁止不同域名的脚本互相操作，避免恶意行为。

只有当目标窗口和当前页面属于同一域名（同源），或者你先打开空白窗口再自行构建内容时，才能实现需求。

场景1：打开空白窗口并注入自定义内容 #

这种方式不受同源限制，适合创建完全自定义的弹窗：

// 打开空白新窗口
const myWindow = window.open('', '_blank', 'width=600,height=400');

// 向空白窗口写入完整HTML（包含JS）
myWindow.document.write(`
<!DOCTYPE html>
<html>
<head>
    <title>自定义弹窗</title>
</head>
<body>
    <h2>这是注入的内容</h2>
    <button onclick="alert('触发弹窗！')">点击测试</button>
    <script>
        // 直接嵌入JS代码
        console.log('自定义窗口已加载');
        // 也可以在这里执行更多逻辑
    </script>
</body>
</html>
`);

// 完成写入后关闭文档流，确保内容渲染
myWindow.document.close();

场景2：向同源窗口注入代码 #

如果打开的是同域名下的页面，可等待窗口加载完成后，直接操作其DOM或注入脚本：

// 打开同源页面（比如自己网站的页面）
const myWindow = window.open('/internal-page.html');

// 等待窗口加载完成再执行操作
myWindow.onload = () => {
    // 方式1：直接执行JS代码
    myWindow.eval('alert("注入的弹窗！")');

    // 方式2：创建脚本标签注入
    const scriptTag = myWindow.document.createElement('script');
    scriptTag.textContent = `
        // 这里写要注入的JS逻辑
        const btn = document.createElement('button');
        btn.textContent = '新增按钮';
        btn.onclick = () => alert('新增按钮触发！');
        document.body.appendChild(btn);
    `;
    myWindow.document.body.appendChild(scriptTag);

    // 也可以直接修改DOM
    const heading = myWindow.document.createElement('h3');
    heading.textContent = '注入的标题';
    myWindow.document.body.prepend(heading);
};

关键注意事项 #

• 弹窗拦截：浏览器会拦截非用户交互触发的window.open，所以最好把打开窗口的逻辑绑定到按钮点击等用户操作上。
• 加载时机：必须等待目标窗口onload事件触发后再注入代码，否则可能因为DOM未加载完成导致操作失败。
• 跨域无法绕过：外部域名页面的操作权限完全被浏览器禁止，没有合法方法绕过这个限制。

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