如何用HTML和JavaScript实现打开含全屏iframe的about:blank页面

直接上可运行的代码，核心是通过用户交互触发打开about:blank，并向该页面写入包含全屏iframe的HTML内容：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>AB Cloaked 模拟器</title>
</head>
<body>
    <div>
        <input type="text" id="targetUrl" placeholder="输入目标URL（需带http/https）" value="https://example.com">
        <button onclick="openABCloaked()">打开伪装about:blank</button>
    </div>

    <script>
        function openABCloaked() {
            const targetUrl = document.getElementById('targetUrl').value.trim();
            if (!targetUrl) return;

            // 打开about:blank窗口
            const blankWindow = window.open('about:blank', '_blank');
            if (!blankWindow) {
                alert('浏览器阻止了弹出窗口，请允许本站弹出');
                return;
            }

            // 向空白页写入全屏iframe的HTML
            blankWindow.document.write(`
                <!DOCTYPE html>
                <html style="margin:0; padding:0; overflow:hidden;">
                <body style="margin:0; padding:0; overflow:hidden;">
                    <iframe 
                        src="${targetUrl}" 
                        style="width:100vw; height:100vh; border:none; display:block;"
                        allow="fullscreen"
                    ></iframe>
                </body>
                </html>
            `);
            blankWindow.document.close(); // 结束写入，确保页面渲染
        }
    </script>
</body>
</html>

关键说明 #

1. 用户交互触发：必须通过按钮点击这类用户主动操作触发window.open，否则浏览器会拦截弹出窗口。
2. 全屏样式设置：给html、body设置margin:0; padding:0; overflow:hidden，iframe用100vw/100vh确保占满视口，同时去掉边框。
3. DOM写入：通过document.write直接向新打开的about:blank页面注入HTML，因为从当前页面打开的空白页属于同源，不会有跨域限制。

之前尝试无效的原因大概率是：

• 没有通过用户交互触发弹出，被浏览器拦截
• 没有正确设置iframe和页面的样式导致无法全屏
• 错误尝试跨域操作空白页DOM（但从当前页面打开的about:blank是同源的，可直接操作）

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