如何动态通过iframe嵌入Replit？现有实现代码不生效原因排查

故障原因 #

• Replit默认对普通项目访问页设置了X-Frame-Options: SAMEORIGIN响应头，同时CSP规则中的frame-ancestors配置仅允许同域名页面嵌入，跨域站点直接嵌入普通项目地址会被浏览器安全策略拦截，这是核心故障原因。
• 动态创建的iframe未设置宽高属性，就算资源加载成功也会因默认尺寸为0，无法在页面上正常显示。
• 若你要嵌入的Replit项目为私有状态，也会默认禁止外部嵌入。

解决方法 #

• 改用Replit官方的嵌入专用地址，在原有项目地址后追加embed=true参数，替换原有普通访问地址。
• 手动给iframe设置明确的宽高属性，保证内容可见。
• 提前确认待嵌入的Replit项目为公开状态。

调整后可正常运行的代码 #

HTML部分 #

<div id="placeHolder">
</div>

JS部分 #

let placeHolder = document.getElementById('placeHolder');
let iframe = document.createElement('iframe');
// 设置iframe宽高，可根据需求自定义数值
iframe.width = '100%';
iframe.height = '600px';
// 改用嵌入专用地址
iframe.src = "https://replit.com/@SilkyS/HelloWorld?embed=true";
placeHolder.appendChild(iframe);

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