设置iframe的document.designMode后仅Firefox中其body.innerHTML为br - Snandy - ITeye博客

`

zhouyrt

浏览: 1172381 次
性别:
来自: 北京

最近访客更多访客>>

a612986

tweenkin

zymdev

小白到此一游

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

zhizhen23： LZ 提供的链接地址失效了
重写的isPlainObject方法
LovingBaby： LovingBaby 写道function fun() {}f ...
读jq之二（两种扩展）
LovingBaby：说的很清楚！jQuery作者为了实现简洁调用的苦心！高超的编程 ...
读jq之一（jq对象的组成）
hard_ly： ...
将伪数组转换成数组
zlxzlxzlxzlxzlx：这不能算是任意进制之间的转换，例如二十六进制、十二进制又该如何 ...
用递归实现十进制数转换N进制

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

博客分类：

Brower compatibility

阅读更多

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

查看图片附件

0
顶

0
踩

分享到：

设置iframe为可编辑状态后敲回车在各浏览器 ... | 图片播放（1）

2012-02-14 14:30
浏览 2881
评论(0)
分类:Web前端
查看更多

评论

发表评论

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

相关推荐

设置iframe的document.designMode后仅Firefox中其body[removed]为br: 在提及的场景中，问题在于当`document.designMode`被设置为`'On'`后，Firefox浏览器会将`iframe`的`body`内容自动转换为一个`<br>`标签，而其他浏览器如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 <body onload="editer.document.designMode='On'"> <iframe id="editer"></iframe> </body> ``` 这样就可以在 ...

如何检测控件的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`** 返回当前文档的 `<body>` 节点。 - **`document.head`** 返回当前文档的 `<head>` 节点。 - **`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 <iframe id="editableFrame" style="width:100%; height:400px;"></iframe> ...

JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox): 本文实例讲述了JS实现iframe编辑器光标位置插入内容的方法。分享给大家供大家参考，具体如下： <... <iframe id="x" name="x">...//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