控制iframe的小技巧

做web ssh时遇到一个问题：想要手工建立一个iframe，然后在其中添加DOM组件，但是发现各浏览器对iframe的行为不同。

测试浏览器： chrome 75.0.3770.100, firefox 60.7.2esr, firefox 67.0.4

测试代码：

<html>
<head></head>
<body>
<div>test iframe</div>
<iframe id='iframe' name='iframe' src='#'>frame content</iframe>
<script type="text/javascript">let ifr = document.getElementById('iframe')let newDoc = ifr.contentDocument || ifr.contentWindow.document;let div = newDoc.createElement('div')newDoc.body.appendChild(div)let text = newDoc.createTextNode('text')div.appendChild(text)console.log('appended');
</script>
</body>
</html>

结果很出乎意料

	iframe src='#'	iframe src=''	（说明
chrome	两层iframe，而且内容未处理	一层iframe，内容已处理，为想要的结果	对于chrome，设置src为空即可满足要求
firefox ESR	一层iframe，内容已处理，为想要的结果	一层iframe，内容未处理	firefox ESR版可以正确控制src='#'的iframe
firefox标准版	两层iframe，内容已处理	一层iframe，内容未处理	比较奇怪的控制逻辑…… src必须有值，而且一定会被读取并显示
（说明	除了Firefox ESR以外，对于src='#'的iframe，浏览器都会重新读取一次当前页面内容并显示到iframe中。firefox标注版iframe内容可以显示，chrome里的内容未显示（但是可以inspect看到）	chrome可以正确理解空src的iframe并处理后续内容；firefox两版本均认为无src（或src为about:blank）的iframe无内容，无法进行appendChild之类的操作

为了再各种情况都获得好结果（单层iframe且处理内容），需要处理一下iframe的文档流：

    ...let newDoc = ifr.contentDocument || ifr.contentWindow.document;//hacknewDoc.open()newDoc.write('')newDoc.close()let div = newDoc.createElement('div')...

此时src已经无关紧要，不管是空或者是'#'，各个浏览器均可以显示为单层iframe并正常处理内容。个人理解是用write方法强制把组件设置成可编辑，覆盖了firefox的默认操作

控制iframe的小技巧相关推荐

android系统手机流量控制方法,手机流量控制！安卓手机控制流量设置小技巧
原标题:手机流量控制!安卓手机控制流量设置小技巧手机流量控制!安卓手机控制流量设置小技巧?随着4G网络时代的开启,手机每月耗流量不再是以M为单位,二手以G为单位.曾经的2G时代,一个月只需要20.3 ...
java 获取 word 窗体域_办公小技巧：巧用窗体域控制Word文档修改区
原标题:办公小技巧:巧用窗体域控制Word文档修改区有时我们发给别人的Word文档,仅仅需要对方修改其中的一小部分,比如房屋出租合同中的房屋承租人信息,采购清单中的数量信息等.这类文档中的其他信息 ...
ANSYS 经典界面绘图控制小技巧
回到我们自身,作为一名 ANSYS 使用者,工作报告中通常会插入大量分析结果图,如变形云图.应力云图以及模态振形等,漂亮好看的展示图片更容易获得认可和加分. 接下来将简单介绍 ANSYS 经典绘图控制 ...
我的世界java版控制键_我的世界：教你几个实用的快捷键小技巧，萌新可能对此一无所知！...
#我的世界# 作为一位经常打字的作者,CTRL+C(复制)和CTRL+V(粘贴)是用得最为频繁的(当然伪萌新可不是搬运工,纯原创!). 想要让打字变得更快,用好键盘快捷键是非常必要的!游戏也是如此!掌 ...
FineUI小技巧（4）关闭窗体那些事
前言 FineUI中的Window控件常用作选择.新增或编辑内容.而关闭Window控件却有很多技巧,了解这些技巧有助于项目的快速开发. 如何关闭Window控件第一个问题就是如何关闭Window控 ...
55种网页常用小技巧(javascript) （转）
55种网页常用小技巧(javascript) 1. οncοntextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 <tab ...
你想的到想不到的 javascript 应用小技巧方法
javascript 在前端应用体验小技巧继续积累. 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElemen ...
55种网页常用小技巧(转载)
55种网页常用小技巧乖的无聊发表于 2005-4-18 13:18:09 1. οncοntextmenu="window.event.returnValue=false" ...
做网页很实用代码集合和CSS制作网页小技巧整理
做网页很实用代码集合控制横向和纵向滚动条的显隐?<body style="overflow-y:hidden"> 去掉x轴 <body style=" ...

控制iframe的小技巧

控制iframe的小技巧相关推荐

最新文章

热门文章