使用iframe调起scheme与app通信引发的内存泄漏

回收插入DOM結構中iframe的正确姿势

// 创建iframe并插入body中
  const scheme = 'gactravel://target/action'
  const iframe = document.createElement('iframe');
  iframe.style.width = '1px';
  iframe.style.height = '1px';
  iframe.style.display = 'none';
  iframe.src = scheme;
  document.body.appendChild(iframe);
  
// 回收iframe
// 第一步DOM Tree中删除iframe
  document.body.removeChild(iframe); // 
  // 或者 iframe.remove();
// 第二步删除分离DOM
  iframe = null; // 釋放iframe
复制代码

错误姿势

运行在app中的h5使用scheme和app通信，h5通过新建一个iframe，在iframe中发起一个scheme，由app捕获并响应。

  const scheme = 'gactravel://target/action'
  const iframe = document.createElement('iframe');
  iframe.style.width = '1px';
  iframe.style.height = '1px';
  iframe.style.display = 'none';
  iframe.src = scheme;
  document.body.appendChild(iframe);
  setTimeout(iframe.remove, 100);
复制代码

原因

setTimeout 中的iframe.remove方法执行过程中，Node.remove 方法中this的指向错误，直接将方法放到setTimeout中，remove方法的this将会是window，正确执行需要指向iframe。

如果要使用setTimeout来执行iframe.remove，可以这么使用

setTimeout(() => {iframe.remove()}, 100)
// or
setTimeout(iframe.remove.bind(iframe), 100)
复制代码