`
zhouyrt
  • 浏览: 1162140 次
  • 性别: 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
分享到:
评论

相关推荐

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

    在提及的场景中,问题在于当`document.designMode`被设置为`'On'`后,Firefox浏览器会将`iframe`的`body`内容自动转换为一个`&lt;br&gt;`标签,而其他浏览器如Chrome、Safari和Opera则保持`body.innerHTML`为空字符串。...

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

    当 `designMode` 设置为 `"On"` 时,整个文档或者指定的元素(如IFrame内的文档)将变为可编辑状态,用户可以直接在浏览器中修改文本、插入图片等。反之,当 `designMode` 设置为 `"Off"` 时,编辑功能将被禁用。 ...

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

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

    编辑器中designMode和contentEditable的属性的介绍

    在Firefox中,可以通过JavaScript设置`contentDocument`的`designMode`来达到类似的效果: ```javascript iframeName.document.designMode = "on"; ``` 这里,`iframeName`是`iframe`控件的`name`属性。 然而,...

    iframe框架\JS获取iframe元素

    #### 三、Firefox下访问操作`iframe`内容 Firefox浏览器支持W3C标准,可以通过`contentDocument`来访问`iframe`内部的文档对象。 ```javascript var iObj = document.getElementById('iId').contentDocument; alert...

    iframe 的使用

    通过设置 Iframe 的 `designMode` 属性为 `'On'`,可以使 Iframe 成为可编辑区域。例如: ```html &lt;body onload="editer.document.designMode='On'"&gt; &lt;iframe id="editer"&gt;&lt;/iframe&gt; &lt;/body&gt; ``` 这样就可以在 ...

    如何检测控件的DesignMode

    `DesignMode`属性允许我们在代码中判断当前控件是否在设计环境中,这样可以为设计工具提供特殊的支持,例如显示占位符文本、禁用某些功能或者提供预览行为。 标题"如何检测控件的DesignMode"聚焦于这个关键属性的...

    网页ps代码

    在提供的代码片段中,我们看到了`document.body.contentEditable='true';`和`document.body.contentEditable='false';`这两行代码。`contentEditable`属性是HTML元素的一个属性,用于控制该元素及其子元素是否可以被...

    在线编辑器的实现原理(兼容IE和FireFox)

    在线编辑器的实现原理主要涉及Web页面中的富文本编辑功能,尤其关注如何使其在不同的浏览器,如Internet Explorer(IE)和Firefox中保持兼容性。在本文中,我们将深入探讨在线编辑器的核心技术,并通过示例代码展示...

    javascript document.execCommand() 常用解析

    对于那些依然需要兼容旧浏览器的项目,使用`document.execCommand()`方法时,需要确保文档的`designMode`属性被设置为`"on"`,这样用户才能进行文本选择和编辑。不过,由于这些命令的兼容性和安全性问题,它们在复杂...

    javascriptDom节点API个人总结.docx

    - **`document.body`** 返回当前文档的 `&lt;body&gt;` 节点。 - **`document.head`** 返回当前文档的 `&lt;head&gt;` 节点。 - **`document.activeElement`** 返回当前文档中获取了焦点的元素,常用于处理表单元素或...

    java script 各种js 特效

    代码`javascript:document.body.contentEditable='true'; document.designMode='on'; void 0`将整个网页变为可编辑状态,允许用户进行实时编辑。 2. **图片飞行特效**:这段代码`javascript:R=0; x1=.1; y1=.05; x2...

    Delphi能用TWebBrowser制作网页编辑器吗demo宣贯.pdf

    r.Add(OleObject.Document.Body.ParentElement.OuterHTML); end; Result := r; end; ``` 这段代码可以从 TWebBrowser 中读取当前显示网页的源代码,并将其存储在一个 `TStringList` 对象中。 ##### 2. 设计模式...

    精谈iframe的作用和使用方式

    2. **表单编辑**:`iframe`还可以用作富文本编辑器的基础,通过设置`iframe`的`designMode`属性为`on`,使其成为可编辑区域。 ```html &lt;iframe id="editableFrame" style="width:100%; height:400px;"&gt;&lt;/iframe&gt; ...

    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并复制此代码,则...

Global site tag (gtag.js) - Google Analytics