如何创建动态网站嵌入链接 自动从URL参数设置Iframe地址？

直接通过原生JS解析URL参数后动态赋值iframe地址即可，完整实现代码如下：

1. 页面HTML结构 #

先在你要展示嵌入站点的页面加入iframe占位元素：

<!-- 嵌入站点的iframe容器，可自行调整宽高、边框等样式 -->
<iframe id="embeddedSite" width="100%" height="90vh" frameborder="0" allowfullscreen></iframe>
<!-- 无有效参数时的提示元素，默认隐藏 -->
<div id="errorTip" style="display: none; padding: 20px; text-align: center;">未获取到有效的嵌入站点地址</div>

2. 动态赋值iframe逻辑 #

在页面底部加入以下JS代码：

// 获取当前页面完整URL
const currentUrl = new URL(window.location.href);
// 提取code参数值
const targetIframeUrl = currentUrl.searchParams.get('code');
// 安全域名白名单，仅允许你自己的站点地址被嵌入，避免恶意参数风险
const ALLOWED_DOMAINS = ['https://webbbb.com'];

// 校验参数有效性和域名合法性
if (targetIframeUrl && ALLOWED_DOMAINS.some(domain => targetIframeUrl.startsWith(domain))) {
  // 合法则赋值给iframe的src属性
  document.getElementById('embeddedSite').src = targetIframeUrl;
} else {
  // 不合法则显示提示
  document.getElementById('errorTip').style.display = 'block';
}

注意事项 #

• 你需要嵌入的子站（也就是示例中的https://webbbb.com）必须配置允许被主站iframe嵌入，否则会出现跨域拒绝访问的问题：

  可以在子站的服务端响应头中添加配置：Content-Security-Policy: frame-ancestors https://website.com; 即可允许主站域名嵌入

• 必须配置安全域名白名单，避免攻击者传入恶意站点地址诱导用户访问，引发安全风险

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