一、问题起因
- 测试在使用
Firefox
浏览器测试的时候发现协议无法正常使用(开发使用的是Chrome
浏览器),查看相关代码发现iframe
中内容是在创建iframe
后,通过获取iframe
元素动态插入的。如果是用的src
属性链接的html
是可以正常显示的。
二、分析原因
1、动态插入的顺序
- 通过修改代码插入元素的顺序,更新到测试环境后发现,内容依旧没有显示,然后审查在
Firefox
下的iframe
元素,发现iframe
的src
属性是about:blank
2、针对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
复制代码
3、把问题重新使用Google
搜索
- 发现一个新的腾讯云的结果🔗链接,发现最开始
src
的方向应该是对的,重新设置src
为'javascript:'
,再到Firefox
环境中测试,发现协议已经可以打开了。 - 你以为这就完了?
- 当我在
Chrome
中再去打开协议后,发现Chrome
中的协议不显示了,但是dom
元素却存在,于是我使用判断浏览器的方法
navigator.userAgent.indexOf("Firefox")
复制代码
判断是否为Firefox
,如果不是就不iframe
加src='javascript:'
,至此才算真的完了。
总结
- 遇到未知的问题时,先分析问题可能是哪些原因产生的,然后对每一个可能做测试排除,直到最后找到真的原因。如果所有可能都测试完了,还没有解决,那就需要重新定义、审查问题。