`
zhouyrt
  • 浏览: 1125758 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

设置iframe的document.designMode后仅Firefox中其body.innerHTML为br

 
阅读更多

设置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输出的仍然是空字符串。

  • 大小: 3 KB
  • 大小: 3.7 KB
0
顶
0
踩
分享到：
| 图片播放（1）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    设置iframe的document.designMode后仅Firefox中其body[removed]为br

    设置iframe的document.designMode后仅Firefox中其body[removed]为br&lt;/title&gt; &lt;meta charset=”utf-8″&gt; &lt;/head&gt; &lt;body&gt; &lt;iframe frameborder=”1″ style=”height: 330px;”&gt;&lt;/...

    document.designMode的功能与使用方法介绍

    这就是为什么如果要使用设计模式最好对框架或 IFrame 中的文档设置 designMode 属性的原因。下例展示如何为 IFrame 中的文档打开设计模式： 代码如下:&lt;script for=”btnDesign” event=”oncli

    让你的网站可编辑的实现js代码

    四、按照你自己的意图修改好后，在地址栏中输入： 代码如下: [removed]document.body.contentEditable=’false’; void 0 好了，截图吧，把对方网站给“黑”了~~ 嘿嘿，无害的。可以用来吓一吓人，比保存HTML要方便...

    JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)

    本文实例讲述了JS实现iframe编辑器光标位置插入内容的方法。分享给大家供大家参考，具体如下： &lt;... &lt;iframe id="x" name="x"&gt;...//setTimeout('window.frames["x"].document.designMode="On"',200);

    新浪网易的评论块制作源码

    window.frames["iframe1"].document.designMode='on'; 4. 打开简易窗体 var newwindow = window.open("tab.htm",'_blank', toolbars=0,resizable=1); 5. iframe里执行父窗体的方法 window.opener.XXX(xxx); ...

    editable-bookmarklet:可编辑的书签可切换任何可编辑的网页

    如果将此代码复制并粘贴到浏览器的地址栏中，则可以使任何网页都可编辑。 [removed] document . body . contentEditable = 'true' ; document . designMode = 'on' ; void 0 如果您使用chrome并复制此代码，则...

    一个符号插入器 中用到的js代码

    /** * @author tin555 */ function setHTML(html)... eWebEditor.document.designMode=”On”; eWebEditor.document.open();... eWebEditor.document.body.contentEditable=”true”; eWebEditor.document.execCommand

    DesignMode-crx插件

    语言:English tiny帮助程序启用document.designmode 快捷方式以切换document.designmode。 这允许您轻松编辑任何网站。 完美地交给设计师，以不同的文本游戏。

    iframe节点初始化的问题探讨

    复制代码代码如下: var ifr = document.createElement(‘iframe’); ifr.width = 300; ifr.height = 300; var idoc = ifr.contentDocument || ifr.contentWindow.document; idoc.designMode = ‘on’; idoc....

    在textarea文本域中显示HTML代码的方法

    这是一个iframe 的 给你一个参考的：  代码如下:  &lt;iframe ID=”tryit” ... tryit.document.designMode=”On”;   tryit.document.open();   tryit.document[removed]+=tryit.[removed](“&lt;b&gt;asdf

    几个有趣的Javascript Hack

    1. 直接在浏览器中编辑网页内容 代码如下:[removed]document.body.contentEditable=’true’;document.designMode=’on’; void(0); 访问任意网站，在地址栏输入以上代码，会发生当前网页已经变成编辑模式了。2. ...

    DesignMode

    设计模式是每个程序员的必修课，这里将23种模式整理在一起，想学习这方面知识的朋友们可以学习下。

    解除网页锁定

    　javascript:document.body.contentEditable='true'; document.designMode='on'; void 0 　然后回车，你就可以随心所欲的修改这个网站啦！ 　通过这段代码你可以对一些禁止复制内容的网页进行复制了。

    学习js在线html(富文本,所见即所得)编辑器

    你可以使用iframe来实现，修改iframe的designMode属性使其可以被编辑。 代码如下:&lt;iframe id=”myEditer” width=”100%” height=”150px”&gt;&lt;/iframe&gt; [removed]myEditer.document.designMode = ‘on’...

    极酷的javascirpt，让你随意编辑任何网页

    其情形可以参考我们的煎蛋大师傅 sein 在偶然得知了一个 javascript 秘籍后的兴奋癫狂状（下面的留言更值得一看），现在有人挖掘出了一个蛮酷的技巧，只要打开一个网站，然后在地址栏内打入： 代码如下:[removed...

    如何检测控件的DesignMode

    codeproject上面一个很好的例子，下载了下来，很有参考意义，友情转发

    编译的 HTML 帮助文件 (.chm) DHTML手册

    这是因为轻便的行为仅当在 HTC 文件中不使用 document 对象时才可被定义。结果将使得轻便的行为比常规行为运行更加快速和有效率。但是，轻便的 DHTML 行为可以与常规的 DHTML 行为一样的方法访问主文档的 document ...

Magicbox
Global site tag (gtag.js) - Google Analytics