iframe動態內容在Firefox下不顯示

1、問題原由

• 測試在使用Firefox瀏覽器測試的時候發現協議沒法正常使用（開發使用的是Chrome瀏覽器），查看相關代碼發現iframe中內容是在建立iframe後，經過獲取iframe元素動態插入的。若是是用的src屬性連接的html是能夠正常顯示的。

2、分析緣由

一、動態插入的順序

• 經過修改代碼插入元素的順序，更新到測試環境後發現，內容依舊沒有顯示，而後審查在Firefox下的iframe元素，發現iframe的src屬性是about:blank

二、針對about:blank百度搜索

（1）、經過location修改

var iframe = document.createElement('iframe');
document.body.appendChild(iframe); //插入到須要的位置
iframe.contentWindow.location ='javascript:void((function() {'+ script +'})())';
複製代碼

修改後，顯示的內容閃爍後消失，說明很大多是這個src屬性引發的。
（2）、經過原生的方法設置src或刪除src屬性

var iframe = document.createElement('iframe');
// 首先是設置src爲空，發現依舊閃爍後消失
iframe.src = '' 
// 移除src,仍是閃爍後消失
iframe.removeAttrbute('src')
// 設置src爲javascript:void(0)，仍是閃爍消失
iframe.src = javascript:void(0)
複製代碼

思考是不是本身的方向錯了？
（3）、嘗試更換插入元素的方法 以前使用的是獲取iframe的head和body元素，而後使用innerHTML去設置元素內容。更換其餘插入方法
（3.1）首先將原來的待插入的元素字符串，插入到一個新建的html元素div中，再使用appendChild的方法將元素插入到iframe中，發現結果依舊閃爍後消失；

const iframeDom = document.getElementById('my-iframe').contentWindow.document
let tempNode = document.createElement('div');
tempNode.innerHTML = style; // style 爲樣式字符串

iframeDom.getElementsByTagName('head')[0].appendChild(tempNode.firstChild)
複製代碼

（3.2）使用DOMParser，依舊不顯示

function createDocument(txt) {
    const template = `<div class='child'>${txt}</div>`;
    let doc = new DOMParser().parseFromString(template, 'text/html');
    let div = doc.querySelector('.child');
    return div;
}

const container = document.getElementById('container');
container.appendChild(createDocument(style));
複製代碼

（3.3）使用DocumentFragment（不行）

const template = `<div class='child'>${style}</div>`;
let frag = document.createRange().createContextualFragment(template);
iframeDom.getElementsByTagName('head')[0].appendChild(frag) // frag.firstChild
複製代碼

三、把問題從新使用Google搜索

• 發現一個新的騰訊雲的結果🔗連接，發現最開始src的方向應該是對的，從新設置src爲'javascript:'，再到Firefox環境中測試，發現協議已經能夠打開了。
• 你覺得這就完了？
• 當我在Chrome中再去打開協議後，發現Chrome中的協議不顯示了，可是dom元素卻存在，因而我使用判斷瀏覽器的方法

navigator.userAgent.indexOf("Firefox")
複製代碼

判斷是否爲Firefox，若是不是就不iframe加src='javascript:'，至此纔算真的完了。

總結

• 遇到未知的問題時，先分析問題多是哪些緣由產生的，而後對每個可能作測試排除，直到最後找到真的緣由。若是全部可能都測試完了，尚未解決，那就須要從新定義、審查問題。