如何用JavaScript在新页面打开链接并添加覆盖内容的Div？

你的代码无法生效的核心原因是浏览器同源策略限制：当你打开跨域的第三方网站（比如google.com）时，你的page1.html与该网站不属于同一域名、协议、端口，浏览器会禁止你的脚本访问跨域窗口的document对象，更无法修改其内容——这是浏览器的安全机制，防止恶意脚本篡改其他网站内容。

可行解决方案 #

由于无法直接修改跨域窗口的内容，你可以通过自建中转页面的方式实现需求：

步骤1：修改page1.html的打开逻辑 #

不再直接打开跨域URL，而是打开你自己域名下的中转页面，把目标跨域地址作为参数传递：

// 点击链接时执行的代码
function openTargetPage() {
    const targetUrl = encodeURIComponent("https://www.google.com/");
    // 替换成你自己的中转页面URL，比如proxy.html
    window.open(`proxy.html?url=${targetUrl}`, "_blank");
}

步骤2：创建中转页面（proxy.html） #

在这个页面里，先渲染你需要的单选按钮div，再用iframe加载目标跨域URL，这样既保留了目标页面的内容，又能添加自定义覆盖层：

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 自定义覆盖层样式，固定在顶部 */
        .custom-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 15px;
            background: #fff;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            z-index: 9999;
        }
        /* iframe占满页面，顶部留出覆盖层的高度 */
        #target-iframe {
            width: 100%;
            height: 100vh;
            margin-top: 60px;
            border: none;
        }
    </style>
</head>
<body>
    <!-- 你的自定义覆盖div，包含单选按钮 -->
    <div class="custom-overlay">
        <label>
            <input type="radio" name="option" value="yes" checked> Yes
        </label>
        <label style="margin-left: 15px;">
            <input type="radio" name="option" value="no"> No
        </label>
    </div>
    <!-- 加载目标跨域URL的iframe -->
    <iframe id="target-iframe"></iframe>

    <script>
        // 获取URL参数中的目标地址并加载到iframe
        const params = new URLSearchParams(window.location.search);
        const targetUrl = params.get('url');
        if (targetUrl) {
            document.getElementById('target-iframe').src = decodeURIComponent(targetUrl);
        }
    </script>
</body>
</html>

说明 #

• 中转页面属于你的域名，和page1.html同源，不存在跨域限制，你可以自由控制它的内容。
• iframe加载跨域页面是浏览器允许的正常行为，不会触发同源策略限制。
• 如果需要完全覆盖目标页面内容（而不是只在顶部添加），可以隐藏iframe，直接在中转页面渲染你的自定义内容即可。

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