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

设置iframe为可编辑状态后敲回车在各浏览器中输出的innerHTML不同

 
阅读更多

测试代码如下

 

<!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>
		<button>测试1</button>
		<script>
			var ifr = document.getElementsByTagName('iframe')[0];
			setTimeout(function(){
				ifr.contentWindow.document.designMode = 'On';
				ifr.contentWindow.focus();
			}, 10);
			
			function prinf() {
				console.log(ifr.contentWindow.document.body.innerHTML);
			}
			
			var btn = document.getElementsByTagName('button')[0];
			btn.onclick = function() {
				prinf();
			}
			
		</script>
 	</body>
</html>
 

 

页面中的iframe,设置其document.designMode为“On”,这时开启了可编辑状态。浏览器中打开该html,光标默认定在在iframe中。这时在其内敲回车,再点击button。查看各浏览器控制台,发现一个很有趣的现象。iframe的body.innerHTML在各浏览器中输出内容均不同。

 

Firefox10 :

 

chrome17 :

 

 

safari5 :

 

 

opera11 :

 

 

IE9 :

 

可以看到各浏览器对于回车的解析不一样(chrome和safari输出的结构一样。)

 

Firefox 中解析成 “<br>”。

 

chrome/safari 中解析成“<div><br></div>”,及会在br外再包个div。

 

opera 中解析成“<p><br></p>”,及会在br外面包个p标记。

 

IE9 中解析成“<p>&nbsp;</p>”,它没用用到br,是个段落p,其内是一个空格。

 

 

 

 

 

 

  • 大小: 11.8 KB
  • 大小: 6.6 KB
  • 大小: 7.5 KB
  • 大小: 14.2 KB
  • 大小: 5.1 KB
0
0
分享到:
评论

相关推荐

    js iframe 打印 打印预览 页眉页脚的设置

    需要注意的是,不同浏览器对CSS打印规则的支持程度可能会有所不同,因此在实际应用中可能需要进行兼容性处理。同时,对于复杂的需求,如动态计算页眉页脚,可能需要借助一些库,如`jsPDF`或`html2canvas`等工具来...

    js跨浏览器是正对目前各浏览器标准不同

    不同的浏览器在实现DOM API时可能存在细微差异,例如`innerHTML`属性或`addEventListener`方法。统一使用DOM Level 2和3标准可以减少这种问题。 4. **事件处理**: 事件处理在不同浏览器间也存在差异,如事件冒泡...

    iframe框架\JS获取iframe元素

    除了简单的元素操作外,还可以利用`designMode`和`contentEditable`属性来重写`iframe`中的内容,使之成为可编辑状态。 ```javascript var iObj = document.getElementById('iId').contentWindow; iObj.document....

    关于在innerHTML中JS不执行的问题

    在JavaScript中,`innerHTML`属性是一个非常常用的工具,用于设置或获取HTML元素的内部HTML内容。然而,有时候我们在使用`innerHTML`插入包含JavaScript代码的HTML时,会发现这些脚本并没有像预期那样执行。这个问题...

    js调用iframe实现打印页面内容的方法

    3. 创建一个新的iframe元素,并设置其样式为绝对定位、宽度和高度都为0,这样iframe在打印前不会影响页面布局。 4. 将iframe添加到页面的body中,并获取iframe的contentWindow.document对象,为打印做准备。 5. 将...

    js获取iframe中的内容

    在上面的代码中,我们使用 `document.getElementById("ali").contentWindow.document.body.innerHTML` 来获取 iframe 中的内容。`contentWindow` 是 iframe 的一个属性,指向 iframe 中的窗口对象。我们可以使用这个...

    js中innerHTML与innerText的用法与区别

    ### JavaScript中的innerHTML与innerText的用法与区别 ...通过以上介绍,我们可以看出`innerHTML`和`innerText`各有优势,适用于不同的场景。在实际开发中,根据具体需求选择合适的属性是非常重要的。

    动态创建iframe,并动态添加js执行代码

    在IT行业中,动态创建iframe和动态添加JavaScript代码是一种常见的技术,尤其在页面加载后需要异步加载内容或者实现跨域通信时。以下是对这个主题的详细讲解。 首先,`iframe`(Inline Frame)是HTML中的一种元素,...

    js调用-嵌入iframe

    IFrame允许在单一网页中嵌入另一个网页,从而实现内容的复用或隔离。下面我们将详细探讨这一主题。 **1. IFrame基本概念** IFrame,全称为Inline Frame,它是一个可以在HTML文档中嵌入另一个HTML文档的元素。通过...

    使用innerHTML时注意处理空格和回车符(asp后台处理)

    然后利用 `ReplaceEx` 函数配合正则表达式,将回车换行符替换为 ` ` 标签,这样在JavaScript中使用 `innerHTML` 设置这段内容时,回车换行将被正确地解析为换行符。 需要注意的是,` ` 标签在HTML中代表一个...

    innerHTML和innerText的区别

    在 JavaScript 中,innerHTML 和 innerText 是两个常用的属性,它们用于获取 HTML 元素中的内容。虽然它们都是用于获取内容的,但它们在获取...因此,在实际开发中,尽量使用 innerHTML 属性,以确保浏览器的兼容性。

    iframe 的使用

    这样就可以在 Iframe 中进行文本编辑。甚至可以进一步扩展,使其支持图片等多媒体内容的编辑: ```html ; imgEditer.document.write('图片.gif&gt;')"&gt; &lt;iframe id="imgEditer"&gt;&lt;/iframe&gt; ``` #### 六、注意事项 ...

    跨浏览器的设置innerHTML方法

    各个浏览器对响应的缓存策略有所不同 浏览器存在跨域获取限制 前两个问题可以通过封装 XMLHTTPRequest 对象来解决,第三个问题的解决方法有很多中,兼容性和移植性比较好的就是在本域服务器上放置一个中转 ...

    innerHtml(转)

    标题中的"innerHtml(转)"可能是指HTML DOM(Document Object Model)中的一个属性`innerHTML`,这是一个非常关键的概念,特别是在JavaScript中用于处理HTML元素的内容。`innerHTML`允许我们获取或设置HTML元素内部...

    解决ajax返回innerHTML中javascript不能运行问题

    实际上,我们可以在 Ajax 返回数据并 `innerHTML` 到模板之前先把 `&lt;div&gt;` 中的 JavaScript 取出并写到模板页面的 `&lt;head&gt;` 中让浏览器解析。这样就相当于在打开模板页面的同时加载了所有 `&lt;div&gt;` 标签需要的 ...

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

    然而,不同的浏览器可能对这个属性有不同的实现和行为,这就是在标题和描述中遇到的问题:在Firefox中,当为`iframe`的`document`设置`designMode`为`'On'`时,`body`元素的`innerHTML`会变成` `,而其他浏览器如...

    子页面访问父页面和跨iframe访问(ie 和火狐)

    在网页开发中,有时我们需要在不同的页面或者框架之间进行交互,比如子页面操作父页面的数据,或者在一个iframe中访问另一个iframe中的内容。这种情况在实际应用中很常见,尤其是在构建复杂Web应用时。以下是对"子...

    IE6/7/8中使用innerHTML清空元素,其子元素也被清空

    5. **条件注释或特性检测**:在特定的IE版本中,可以使用条件注释或特性检测来编写兼容代码,确保在不同浏览器中有适当的行为。 理解这个IE6/7/8特有的`innerHTML`行为对于优化前端代码和确保在旧版浏览器中的良好...

    [导入]Javascript获取IFrame内容(兼容IE&FF)

    本文将详细介绍如何在各种浏览器,包括Internet Explorer(IE)和Firefox(FF)等主流浏览器中,正确地获取Iframe中的内容。 首先,理解Iframe的基本概念。Iframe是一种HTML元素,允许我们在一个网页中嵌入另一个...

    jQuery获取iframe的document对象的方法

    在网页开发中,有时我们需要对嵌入的`iframe`(Inline Frame)中的内容进行操作,例如修改DOM元素、触发事件等。为了实现这样的功能,我们需要首先获取到`iframe`的`document`对象,因为`document`对象是HTML文档的...

Global site tag (gtag.js) - Google Analytics