【iframe】基本使用以及动态创建和销毁

tip
有些场景在使用iframe后，资源没有得到释放，造成页面卡顿，比如二级弹框里面显示iframe,在关闭弹框后没有进行销毁，造成不必要的内存占用,有时候销毁iframe是有必要的

iframe基本使用

方式一：html标签

 <iframe id="xxx" title="Inline Frame Example" 
 	width="800" height="800"
    src="https://www.....com/">
 </iframe>

iframe属性可直接百度了解：iframe属性

方式二：动态添加

<div id="iframeBox"></div>

 function createIframe() {
    let iframe = document.createElement('iframe')
    iframe.src = 'https://xxxxxx.com';
    iframe.width = '400';
    iframe.height = '400'; // 像素
    iframe.height = '70%'; // 像素
    iframe.id = '';
    iframe.name = '';
    iframe.title = '';
    // ....添加其他属性

    // 将创建的iframe添加到页面
    let el = document.getElementById('iframeBox')
    el.appendChild(iframe)
  }

如何销毁

 function clearIframe (id) {
    let el = document.getElementById(id);
    let iframe = el.contentWindow;
    if (el) {
      try {
        // 空白页面
        el.src = 'about:blank';
      } catch (e) {
        // 有资料显示如果是https协议，在设置about:blank会报错，需要更改为javascript:void(0)；
        //（亲测是https协议，在设置about:blank后并没有报错，后续考证一下
        el.src = 'javascript:void(0)';
      };
      try {
        iframe.document.write('');
        iframe.document.clear();
        // 以上操作已删除了大量资源
      } catch (e) {};

      // 删除iframe(按需选择是否需要删除iframe节点)
      document.body.removeChild(el);
    }
  }
  // clearIframe('id')