代码中iframe无法加载求助：移动端/桌面端适配异常

你当前的代码存在两个核心问题导致iframe无法正常显示，PHP版本失效也大概率是相同原因，以下是具体修复方案：

1. 避免用document.write破坏页面DOM结构 #

当页面DOM初始化完成后调用document.write会直接清空整个文档，导致后续iframe代码根本无法渲染。改用标准DOM操作添加内容即可解决：

<html>
<body>
    <script>
        let details = navigator.userAgent;
        let regexp = /android|iphone|kindle|ipad/i;
        let isMobileDevice = regexp.test(details);
  
        if (isMobileDevice) {
            // 创建文本节点添加到页面，而非覆盖整个文档
            const mobileMsg = document.createTextNode("You are using a Mobile Device");
            document.body.appendChild(mobileMsg);
        } else {
            // 创建iframe元素并配置属性后添加到页面
            const iframe = document.createElement('iframe');
            iframe.src = "https://example.com/"; // 替换为允许被嵌入的网站地址
            iframe.style.cssText = "position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;";
            iframe.setAttribute('target', '_parent');
            document.body.appendChild(iframe);
        }
    </script>
</body>
</html>

2. 第三方网站的X-Frame-Options安全限制 #

你原本使用的https://google.com/设置了严格的X-Frame-Options响应头，禁止被其他域名页面嵌入iframe，这是浏览器安全机制，无法通过前端代码绕过。解决方式：

• 替换为自己可控的、允许被嵌入的页面（比如自有域名下的页面）
• 若需嵌入第三方内容，确认目标网站是否提供了专用嵌入代码（如YouTube的官方嵌入iframe）

PHP版本的修复思路 #

用PHP做设备检测时，同样要注意两个关键点：

• 输出iframe时保证HTML标签完整闭合，不破坏页面结构
• 避免嵌入有X-Frame-Options限制的网站

示例PHP代码：

<!DOCTYPE html>
<html>
<body>
<?php
$userAgent = $_SERVER['HTTP_USER_AGENT'];
$isMobile = preg_match('/android|iphone|kindle|ipad/i', $userAgent);

if ($isMobile) {
    echo "You are using a Mobile Device";
} else {
    echo '<iframe target="_parent" src="https://example.com/" style="position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;"></iframe>';
}
?>
</body>
</html>

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