#### 1、問題描述
切換左邊導航,動態改變右邊的iframe的src屬性,來展示不同的頁面內容。當反復切換30次左右時候,IE11下發生白屏現象。
實現代碼如下:
```
//nav
<div>
<a href="switch('yyy.html')"></a>
<a href="switch('zzz.html')"></a>
</div>
//iframe
<div id='content'>
<iframe id='iframeId' src='xxx.html'></iframe>
<div>隱藏/顯示導航</div>
</div>
//js
function switchUrl(url) {
document.getElementById('iframeId').src = url;
}
```
#### 2、問題原因
多次切換iframe引起IE內存泄漏。
#### 3、解決方案
多次切換iframe引起IE瀏覽器內存泄漏,最主要的原因是切換iframe的src后,IE瀏覽器都沒有將原來的iframe所占的內存釋放掉,反復切換導致內存不斷上漲,直到內存泄漏,瀏覽器白屏為止。所以,在沒次切換之前,應該將上一個iframe手動清除掉。
針對上面的代碼,只需動態創建iframe,然后修改switchUrl方法即可。
```
function switch(url) {
var frame = $('#iframeId');
if(frame && frame[0]) {
frame[0].contentWindow.document.write('');
frame[0].contentWindow.close();
frame.remove();
}
$('#content').html('<iframe src="' + url + '"></iframe>');
}
```
- 1、前端常用知識點
- 1.1 如何修改input的placeholder
- 1.2 如何修改滾動條默認樣式
- 1.3 理解BFC
- 1.4 數字每隔三位加逗號
- 1.4.1 簡單粗暴的做法
- 1.4.2 比較常用的方法
- 1.5 D3圖表中如何讓文字豎著顯示
- 1.6 Handlebars模板中如何比較兩個值
- 1.7 SVG/D3中字體特殊設置
- 1.8 Handlebars模板中序號從1開始排序
- 1.9 修改checkbox默認樣式
- 1.10 D3.js 執行transition動畫中斷
- 2、執法項目
- 2.1 面積圖填充為線條樣式
- 2.2 一個paseFloat()方法兩分鐘就把頁面卡死了
- 2.3 開發中常見的細節問題
- 3、迪愛斯項目
- 3.1 熱點冰點卡死問題
- 3.2 ifream切換導致內存泄漏
- 3.3 D3文字旋轉問題
- 3.4 D3圖表提示框位置問題
- 3.5 js如何實現頁面iframe事件監聽
- 3.6 zTree-jQuery 樹插件異步加載如何傳參
- 3.7 圖易加載無延遲隱藏部分頁面組件
- 4、指揮大屏項目
- 4.1 長時間運行chrome瀏覽器奔潰問題
- 5、PC端指揮項目
- 5.1 地圖上各區域添加圖表并將圖表顯示在各區域中心位置
- 5.2 svg里面添加image標簽該的width,height屬性被壓縮問題
- 5.3 地圖上添加圖表或文字后較小的區域無法鉆取
- 5.4 svg添加image元素在谷歌低版本不顯示
- 5.5 input輸入框記住用戶名或密碼后樣式被瀏覽器自帶的樣式覆蓋
- 6、運維項目
- 6.1 按鍵F11頁面無法縮放
- 6.2 主頁面逆時針旋轉的兩段弧問題
- 6.3 websocket的close方法不起作用
- 7、漢陽項目
- 8、警務云項目
- 8.1 PKI兼容chrome瀏覽器問題
- 9、萬達項目
- 9.1 直方圖中出現數值比刻度值大
- 9.2 D3選擇集的處理模版
- 9.3 將數字轉化為三分位節法
- 9.4 制作簡易X軸
- 10、涪陵項目
- 10.1 IE11部分版本瀏覽器下滾動條位置不對
- 11、昆明大屏展示
- 11.1第一期五個頁面經驗匯總
- 11.2防止文本越界
- 11.3SVG里面謹慎設置font-family
- 11.4Error: <rect> attribute height: A negative value is not valid
- 12、技偵動態管控
- 12.1 使用CSS3動畫導致頁面抖動
- 12.2 使用 digitroll數字滾動插件,給數字加逗號(3位數分隔)
- 13、ES6前端開發框架
- 13.1 打包后部署到Tomcat下訪問路徑不對
- 14、貴陽項目
- 14.1、關于引用不到saga文件報錯的問題
- 15、React前端開發框架
- 15.1 this.refs.xxx獲取到的值是undefined
- 15.2 Mockjs與mapbox不兼容
- 15.3 axios聯調報跨域錯誤
- 15.4 saga結合websocket使用方法
- 15.5 打包部署后訪問頁面白屏