超好用的iframe的postMessage穿参

前言

---

❝
跨域，简单来说是指不同域之间相互请求资源，例如AJAX请求，浏览器根据同源策略对响应结果进行拦截，这是浏览器对JavaScript实施的安全限制。所谓同源是指相同的域名、协议和端口，只要其中一项不同就为跨域
❞

背景

---

最近在调用公司其他部门的iframe标签的 SDK脚本 出现了问题，

在web项目中通过iframe嵌入另一个第三方web项目，第三方web项目里点击某个按钮要实时调用web项目的全局函数打开某个全局弹窗或者进行路由跳转，这时候两个项目存在了数据交互，显然违反了同源策略，在HTML5标准引入的window对象下的postMessage方法，可以允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递

---

兼容性

可以看出，postMessage在各大主流浏览器中，除低版本IE浏览器外,其他浏览器的支持度良好

语法

具体介绍可戳这里前往MDN，这里通俗地解释一下每个参数

• otherWindow.postMessage(message, targetOrigin, [transfer]);
• otherWindow：目标窗口（你想发送跨域消息的那个窗口），例如：iframe.contentWindowmessage 将要发送的数据
• targetOrigin 目标窗口的地址（URL），或者字符串’*'表示无限制、任何URL都允许发送
• transfer：可选参数，高级用法，这里不作讨论，是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

使用

我们假设现在有两个不同源的页面，父页面地址：http://a.index.com，子页面地址：http://b.index.com，父页面通过iframe引入子页面

我们假设现在有两个不同源的页面，父页面地址：http://a.index.com，子页面地址：http://b.index.com，父页面通过iframe引入子页面

<!-- a.index.html -->
<h1>父页面</h1>
<iframe id="iframe" src="http://b.index.com"></iframe>

①父页面向子页面发送一条消息

const iFrame = document.getElementById('iframe')
<!-- 需要等到iframe中的子页面加载完成后才发送消息，否则子页面接收不到消息 -->
iFrame.onload = function(){
  <!-- iFrame.contentWindow获取到iframe的window对象 -->
  iFrame.contentWindow.postMessage('父页面发送的消息','http://b.index.com');
}

②子页面接收父页面的消息

// 有发送就有接收，与postMessage配套使用的就是message事件
window.addEventListener('message',e=>{
    <!-- 对消息来源origin做一下过滤，避免接收到非法域名的消息导致的xss攻击 -->
    if(e.origin==='http://a.index.com'){
        console.log(e.origin) //父页面URL，这里是http://a.index.com
        console.log(e.source) // 父页面window对象，全等于window.parent/window.top
        console.log(e.data)  //父页面发送的消息
    }
},false)

③子页面向父页面发送一条消息 有了前面的基础，我们这里其实只要记住otherWindow.postMessage中otherWindow为你要发送数据的目标窗口的window对象

window.parent.postMessage('子页面发送的消息','http://a.index.com')

④父页面接收子页面的消息 接收的通信逻辑父传子和子传父一样

window.addEventListener('message',e=>{
    <!-- 对消息来源origin做一下过滤，避免接收到非法域名的消息导致的xss攻击 -->
    if(e.origin==='http://b.index.com'){
        console.log(e.origin) //子页面URL，这里是http://b.index.com
        console.log(e.source) // 子页面window对象，全等于iframe.contentWindow
        console.log(e.data) //子页面发送的消息
    }
},false)

注意点

• window.postMessage中的window指的是你想发送跨域消息的那个窗口(你需要通信的目标窗口)，而不是自身窗口的window

  • 父页面中：父页面向子页面发送跨域信息，window就是在父页面中嵌入的iframe指向的子页面的
    window，即：iFrame.contentWindow子页面中：

  • 子页面想父页面发送跨域信息，window就是父页面的window，在这里因为子页面是嵌入到父页面中的，对于子页面来讲，window就是top或者parent

• 需要等到iframe中的子页面加载完成后才发送消息，否则子页面接收不到消息

• 在监听message事件时需要判断一下消息来源origin

案例

我在接入统一登录的时候，发现其他部门写的脚本，场景：导致反复退出登录，就会多次回调成功的方法，导致多次验证报错，原因：函数执行栈内存没有销毁，需要添加cleanup函数，在单页面离开的时候进行销毁

;(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define([], factory);
  } else if (typeof exports === 'object' && typeof module !== 'undefined') {
    // Node.js or CommonJS
    module.exports = factory();
  } else {
    // Browser globals (root is window)
    root.createLoginComp = factory();
  }
}(typeof self !== 'undefined' ? self : this, function () {
  // 模块内容开始
  console.log('SDK初始化');
  function createLoginComp({
    info,
    messageCallback,
    loginSuccessCallback
  }) {
    return new Promise((resolve, reject) => {
      console.log('SDK初始化Dom');
      const el = document.getElementById(info.boxId);
      if (!el) {
        reject(`找不到id为${info.boxId}的元素，登录组件创建失败`);
        return;
      }
      const iframe = document.createElement("iframe");
      const url = `XXXXX`;
      iframe.src = url;
      iframe.allowTransparency = "true";
      iframe.style.cssText = "min-height: 100%; min-width: 100%; border-radius: 18px; box-shadow: 0px 2px 10px 0px #EAEDF3; background: #FFFFFF; border: none;";
      iframe.id = `${info.boxId}-frame`;
      el.innerHTML = "";
      el.appendChild(iframe);

      let messageEventListener = handleMessage.bind(null, messageCallback, loginSuccessCallback);

      iframe.onload = () => {
        if (!iframe.contentWindow.postMessage || !window.postMessage || !window.addEventListener) {
          reject('浏览器不支持 postMessage，登录组件创建失败');
          return;
        }
        window.addEventListener("message", messageEventListener);
        resolve({
          cleanup: () => {
            window.removeEventListener("message", messageEventListener);
            el.removeChild(iframe); // 移除 iframe
          }
        });
      };
      iframe.onerror = () => {
        reject('iframe 加载失败，可能是网络错误或资源不存在');
        el.removeChild(iframe); // 如果 iframe 加载失败，同样需要移除它
      };
    });
  }

  function handleMessage(messageCallback, loginSuccessCallback, event) {
    if (event.data.type === 'loginSuccess') {
      loginSuccessCallback(event.data);
    } else if (['success', 'error', 'businessAgreement'].includes(event.data.type)) {
      messageCallback(event.data);
    }
  }

  function queryURLParams(attr) {
    let obj = {},
        self = window.location.href;
    self.replace(/#([^?&=#]+)/g, (_, $1) => (obj['HASH'] = $1));
    self.replace(/([^?&=#]+)=([^?&=#]+)/g, (_, $1, $2) => (obj[$1] = $2));
    return typeof attr !== 'undefined' ? obj[attr] : obj;
  }
  // 模块内容结束
  return createLoginComp;
}));

总结

iframe DOM 元素本身不太可能造成内存泄漏。然而，事件监听器（特别是通过 window.addEventListener 添加的监听器）如果没有在适当的时机移除，

确实可能会导致内存泄漏。通过返回一个移除事件监听器的函数，并在 Promise 解决时提供给调用者，是一个很好的做法来避免这种情况。

为了确保不会造成内存泄漏，需要确保在 iframe 或包含 iframe 的组件被移除、替换或不再需要时，调用这个返回的函数来清除事件监听器。
在使用这个 SDK 的页面或组件中，需要在适当的生命周期钩子或事件中调用这个清理函数。

例如，在一个单页应用中，如果用户导航离开了使用了这个 iframe 的页面，就应该调用清理函数。

以下是避免内存泄漏的建议：

1. 调用清理函数：确保在组件卸载或页面销毁时，调用 resolve 方法返回的清理函数。

2. 避免匿名函数：避免了使用匿名函数作为事件监听器，这是好的做法。匿名函数更难被正确移除，因为你需要精确相同的函数引用来移除监听器。

3. 检查iframe的存在性：在移除事件监听器之前，检查 iframe 是否仍然存在于DOM中。如果 iframe 已经被移除，根据具体情况，监听器可能已经自动被清除。

使用iframe的contentWindow属性来添加和移除事件监听器：如果消息是在 iframe 内部发送和接收的，

考虑在 iframe 的 contentWindow 上添加和移除事件监听器，而不是全局的 window 对象上，这样当 iframe 被移除时，与之相关的监听器更有可能被垃圾回收。

总的来说，只要在不需要监听器或 iframe 被移除时，通过适当的机制移除了事件监听器，就可以大大减少内存泄漏的风险。