测试代码如下
<!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文档的...