iframe动态内容在Firefox下不显示

3,528 阅读2分钟

一、问题起因

  • 测试在使用Firefox浏览器测试的时候发现协议无法正常使用(开发使用的是Chrome浏览器),查看相关代码发现iframe中内容是在创建iframe后,通过获取iframe元素动态插入的。如果是用的src属性链接的html是可以正常显示的。

二、分析原因

1、动态插入的顺序

  • 通过修改代码插入元素的顺序,更新到测试环境后发现,内容依旧没有显示,然后审查在Firefox下的iframe元素,发现iframesrc属性是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)、尝试更换插入元素的方法 之前使用的是获取iframeheadbody元素,然后使用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,如果不是就不iframesrc='javascript:',至此才算真的完了。

总结

  • 遇到未知的问题时,先分析问题可能是哪些原因产生的,然后对每一个可能做测试排除,直到最后找到真的原因。如果所有可能都测试完了,还没有解决,那就需要重新定义、审查问题。