iframe动态创建与内存释放

iframe动态创建与内存释放

-在弹窗中引入外部页面，多个iframe 使用时，使用动态创建来减少内存一次性占用。

##iframe的动态创建

createIframe(dom, src) {
                dom.innerHTML = '';
                let iframe = document.createElement("iframe");
                iframe.style.width = '100%';
                iframe.style.height = '99%';
                iframe.style.margin = '0';
                iframe.style.padding = '0';
                iframe.style.overflow = 'hidden';
                iframe.style.border = 'none';
                iframe.src = src;
                dom.appendChild(iframe);
                return iframe;
            },

-在关闭弹窗时将iframe正确释放。

##iframe的释放

destroyIframe(iframe) {
                iframe.src = 'about:blank';  //指向空白可以释放巨大的内存。
                try {
                    iframe.contentWindow.document.write('');
                    iframe.contentWindow.document.clear();
                } catch (e) {
                }
                iframe.parentNode.removeChild(iframe); // 页面去除iframe 元素。
            },

-图片对比图1 iframe弹窗打开前 f12 前端页面source 内容

-图2 弹窗内容关闭后 source内容。