测试代码如下
<!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> </p>”，它没用用到br，是个段落p，其内是一个空格。
- 大小: 11.8 KB
- 大小: 6.6 KB
- 大小: 7.5 KB
- 大小: 14.2 KB
- 大小: 5.1 KB
分享到：
相关推荐
需要注意的是，不同浏览器对CSS打印规则的支持程度可能会有所不同，因此在实际应用中可能需要进行兼容性处理。同时，对于复杂的需求，如动态计算页眉页脚，可能需要借助一些库，如`jsPDF`或`html2canvas`等工具来...
不同的浏览器在实现DOM API时可能存在细微差异，例如`innerHTML`属性或`addEventListener`方法。统一使用DOM Level 2和3标准可以减少这种问题。 4. **事件处理**： 事件处理在不同浏览器间也存在差异，如事件冒泡...
除了简单的元素操作外，还可以利用`designMode`和`contentEditable`属性来重写`iframe`中的内容，使之成为可编辑状态。 ```javascript var iObj = document.getElementById('iId').contentWindow; iObj.document....
在JavaScript中，`innerHTML`属性是一个非常常用的工具，用于设置或获取HTML元素的内部HTML内容。然而，有时候我们在使用`innerHTML`插入包含JavaScript代码的HTML时，会发现这些脚本并没有像预期那样执行。这个问题...
3. 创建一个新的iframe元素，并设置其样式为绝对定位、宽度和高度都为0，这样iframe在打印前不会影响页面布局。 4. 将iframe添加到页面的body中，并获取iframe的contentWindow.document对象，为打印做准备。 5. 将...
在上面的代码中，我们使用 `document.getElementById("ali").contentWindow.document.body.innerHTML` 来获取 iframe 中的内容。`contentWindow` 是 iframe 的一个属性，指向 iframe 中的窗口对象。我们可以使用这个...
### JavaScript中的innerHTML与innerText的用法与区别 ...通过以上介绍，我们可以看出`innerHTML`和`innerText`各有优势，适用于不同的场景。在实际开发中，根据具体需求选择合适的属性是非常重要的。
在IT行业中，动态创建iframe和动态添加JavaScript代码是一种常见的技术，尤其在页面加载后需要异步加载内容或者实现跨域通信时。以下是对这个主题的详细讲解。 首先，`iframe`（Inline Frame）是HTML中的一种元素，...
IFrame允许在单一网页中嵌入另一个网页，从而实现内容的复用或隔离。下面我们将详细探讨这一主题。 **1. IFrame基本概念** IFrame，全称为Inline Frame，它是一个可以在HTML文档中嵌入另一个HTML文档的元素。通过...
然后利用 `ReplaceEx` 函数配合正则表达式，将回车换行符替换为 ` ` 标签，这样在JavaScript中使用 `innerHTML` 设置这段内容时，回车换行将被正确地解析为换行符。 需要注意的是，` ` 标签在HTML中代表一个...
在 JavaScript 中，innerHTML 和 innerText 是两个常用的属性，它们用于获取 HTML 元素中的内容。虽然它们都是用于获取内容的，但它们在获取...因此，在实际开发中，尽量使用 innerHTML 属性，以确保浏览器的兼容性。
这样就可以在 Iframe 中进行文本编辑。甚至可以进一步扩展，使其支持图片等多媒体内容的编辑： ```html ; imgEditer.document.write('图片.gif>')"> <iframe id="imgEditer"></iframe> ``` #### 六、注意事项 ...
各个浏览器对响应的缓存策略有所不同 浏览器存在跨域获取限制 前两个问题可以通过封装 XMLHTTPRequest 对象来解决，第三个问题的解决方法有很多中，兼容性和移植性比较好的就是在本域服务器上放置一个中转 ...
标题中的"innerHtml（转）"可能是指HTML DOM（Document Object Model）中的一个属性`innerHTML`，这是一个非常关键的概念，特别是在JavaScript中用于处理HTML元素的内容。`innerHTML`允许我们获取或设置HTML元素内部...
实际上，我们可以在 Ajax 返回数据并 `innerHTML` 到模板之前先把 `<div>` 中的 JavaScript 取出并写到模板页面的 `<head>` 中让浏览器解析。这样就相当于在打开模板页面的同时加载了所有 `<div>` 标签需要的 ...
然而，不同的浏览器可能对这个属性有不同的实现和行为，这就是在标题和描述中遇到的问题：在Firefox中，当为`iframe`的`document`设置`designMode`为`'On'`时，`body`元素的`innerHTML`会变成` `，而其他浏览器如...
在网页开发中，有时我们需要在不同的页面或者框架之间进行交互，比如子页面操作父页面的数据，或者在一个iframe中访问另一个iframe中的内容。这种情况在实际应用中很常见，尤其是在构建复杂Web应用时。以下是对"子...
5. **条件注释或特性检测**：在特定的IE版本中，可以使用条件注释或特性检测来编写兼容代码，确保在不同浏览器中有适当的行为。 理解这个IE6/7/8特有的`innerHTML`行为对于优化前端代码和确保在旧版浏览器中的良好...
本文将详细介绍如何在各种浏览器，包括Internet Explorer（IE）和Firefox（FF）等主流浏览器中，正确地获取Iframe中的内容。 首先，理解Iframe的基本概念。Iframe是一种HTML元素，允许我们在一个网页中嵌入另一个...
在网页开发中，有时我们需要对嵌入的`iframe`（Inline Frame）中的内容进行操作，例如修改DOM元素、触发事件等。为了实现这样的功能，我们需要首先获取到`iframe`的`document`对象，因为`document`对象是HTML文档的...