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:'，至此才算真的完了。

总结

• 遇到未知的问题时，先分析问题多是哪些缘由产生的，而后对每个可能作测试排除，直到最后找到真的缘由。若是全部可能都测试完了，尚未解决，那就须要从新定义、审查问题。