vue内嵌iframe导致页面崩溃内存泄漏

29ab22fb7c24c6fe8d22587c53ad2862_38097.png

9547844ca95916f72106c12c30d40026_54316.png

最近项目中碰到一个比较严重的问题，系统老是导致浏览器莫名其妙的重启，我试了下，在现网每点击一个页面，大概会增加20M内存，最后到125M左右内存的时候会引发页面崩溃，后来发现是框架中的iframe标签造成的，当切换iframe中的页面时，前一个页面中的无法被完全释放，导致浏览器所占的内存不停的飙升，最终导致浏览器崩溃。

解决办法：
用js动态删除或创建一个iframe，效果果然好很多

if (this.sessionId) {
   this.srcUrl = `${this.$route.params.menuRoute}&auth_token=${this.sessionId}`
   let box = document.getElementById('iframe_box')
   let iframe = document.getElementsByTagName('iframe')
   if (iframe.length > 0) {
        box.removeChild(iframe[0])
   }
   const iframeNew = document.createElement('iframe')
   iframeNew.src = this.srcUrl
   iframeNew.frameborder = '0'
   iframeNew.style="width: 100%;height: 87vh !important;border: none;"
   box.appendChild(iframeNew)
}