如何通过嵌入代码将自研讨论弹窗部署到第三方网站并解决iframe遮挡问题

方案1：优化现有iframe实现（门槛最低，无需复杂JS开发） #

你之前的iframe问题是默认占满全屏且无透明配置，哪怕弹窗关闭也会遮挡页面内容，修改逻辑如下：

• 调整iframe默认尺寸：默认仅保留右下角触发按钮的大小（比如宽60px、高60px），background设为transparent，未展开状态下仅按钮区域可见，其余区域透明不遮挡站点内容
• 弹窗内部点击展开/关闭时，通过postMessage给父站点传递状态，父站点动态调整iframe的宽高、位置属性

调整后的嵌入代码示例：

<iframe 
  src="http://dev.zedmanager.com/test_pop" 
  style="
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    border: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    z-index: 999999;
    background: transparent;
    border-radius: 50%;
  "
  id="custom_comment_pop"
></iframe>
<script>
// 监听iframe发来的状态消息
window.addEventListener('message', (e) => {
  // 校验消息来源是你的域名，防止安全问题
  if(e.origin !== 'http://dev.zedmanager.com') return
  const iframe = document.getElementById('custom_comment_pop')
  if(e.data.type === 'openPop') {
    // 展开弹窗时调整为全屏尺寸
    iframe.style.width = '100%'
    iframe.style.height = '100%'
    iframe.style.bottom = '0'
    iframe.style.right = '0'
    iframe.style.borderRadius = '0'
  } else if(e.data.type === 'closePop') {
    // 关闭时缩回按钮大小
    iframe.style.width = '60px'
    iframe.style.height = '60px'
    iframe.style.bottom = '20px'
    iframe.style.right = '20px'
    iframe.style.borderRadius = '50%'
  }
})
</script>

你只需要在自己的弹窗页面里，点击展开/关闭按钮时给父窗口发送对应消息即可，示例代码（放在你的iframe页面中）：

// 展开弹窗时调用
window.parent.postMessage({type: 'openPop'}, '*')
// 关闭弹窗时调用
window.parent.postMessage({type: 'closePop'}, '*')

方案2：轻量JS SDK实现（体验更好，适合规模化推广） #

如果要做的更接近主流第三方嵌入工具的体验，你可以打包一个极小的JS SDK，用户只需要复制一段不到10行的script标签就能接入，所有逻辑都由你侧的SDK控制，不会暴露多余代码给用户，用户侧接入示例如下：

<script>
window.ZEDCommentConfig = {
  appId: '用户在你平台申请的唯一标识'
}
;!function(){let e=document.createElement("script");e.src="http://dev.zedmanager.com/sdk.js",e.async=!0,document.body.appendChild(e)}();
</script>

你侧的sdk.js负责动态创建iframe、监听交互、控制显隐逻辑，还可以支持用户自定义按钮位置、主题色、是否默认展开等配置，整体灵活度更高。

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