设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
更新时间：2012年02月27日 18:49:48 作者：
设置iframe的document.designMode为On可以让其可编辑，一般用在富文本编辑器组件中。这里仅列出各浏览器差异
重现如下：
<!doctype html>
<html>
<head>
<title>设置iframe的document.designMode后仅Firefox中其body.innerHTML为br</title>
<meta charset="utf-8">
</head>
<body>
<iframe frameborder="1" style="height: 330px;"></iframe>
<script>
var ifr = document.getElementsByTagName('iframe')[0];
var doc = ifr.contentWindow.document;
function prif() {
console.log(ifr.contentWindow.document.body.innerHTML);
}
function changeDesignMode() {
ifr.contentWindow.document.designMode = 'On';
}
prif();
</script>
</body>
</html>
以上代码iframe的body中没有写入任何html标记。正常情况下输出ifr.contentWindow.document.body.innerHTML应该是空字符串。但Firefox中有点特殊。
请按下面步骤依次操作。
Firefox中打开该html默认输出了空字符串
控制台中执行changeDesignMode方法，再执行prif方法，这时输出的innerHTML为“<br>”，如下
Chrome/Safari/Opera输出的仍然是空字符串。
复制代码 代码如下:
<!doctype html>
<html>
<head>
<title>设置iframe的document.designMode后仅Firefox中其body.innerHTML为br</title>
<meta charset="utf-8">
</head>
<body>
<iframe frameborder="1" style="height: 330px;"></iframe>
<script>
var ifr = document.getElementsByTagName('iframe')[0];
var doc = ifr.contentWindow.document;
function prif() {
console.log(ifr.contentWindow.document.body.innerHTML);
}
function changeDesignMode() {
ifr.contentWindow.document.designMode = 'On';
}
prif();
</script>
</body>
</html>
以上代码iframe的body中没有写入任何html标记。正常情况下输出ifr.contentWindow.document.body.innerHTML应该是空字符串。但Firefox中有点特殊。
请按下面步骤依次操作。
Firefox中打开该html默认输出了空字符串
控制台中执行changeDesignMode方法，再执行prif方法，这时输出的innerHTML为“<br>”，如下
Chrome/Safari/Opera输出的仍然是空字符串。
相关文章
这篇文章主要介绍了5分钟打造简易高效的webpack配置,详细的介绍了打包调试、提取公共代码、压缩、热替换等配置，有兴趣的可以了解一下2017-07-07
下面小编就为大家带来一篇JS非空验证及邮箱验证的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
下面小编就为大家带来一篇关于Iframe父页面与子页面之间的相互调用。小编觉得挺不错的，希望对大家有所帮助。一起跟随小编过来看看吧，祝大家游戏愉快哦2016-11-11
这篇文章主要介绍了一些老手都不一定知道的JavaScript技巧,需要的朋友可以参考下2014-05-05
javascript两种function的定义介绍及区别说明
javascript两种function的定义方式function a(){}和a=function(){}具体使用如下，感兴趣的朋友可以参考下，希望对你对你学习function的定义有所帮助2013-05-05
这篇文章主要为大家详细解析了bootstrap下拉菜单使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
这篇文章主要为大家详细介绍了JavaScript实现环绕鼠标旋转效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
JavaScript.The.Good.Parts阅读笔记（一）假值与===运算符
JavaScript 假值与===运算符，学习js的朋友可以看下。2010-11-11
这篇文章主要为大家详细介绍了Javascript数组常用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助2022-02-02
这篇文章主要介绍了JavaScript鼠标悬停事件用法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
最新评论