javascript 中contentWindow和 frames

最新推荐文章于 2019-07-07 21:15:02 发布

转载最新推荐文章于 2019-07-07 21:15:02 发布 · 6.4k 阅读

文章标签：

#学习 #JS

学习同时被 2 个专栏收录

30 篇文章

订阅专栏

9 篇文章

订阅专栏

本文介绍了一种实现跨浏览器兼容性的富文本编辑器的方法。该编辑器通过使用 contentWindow 属性来确保在不同浏览器（如 IE 和 Firefox）中正确加载和编辑 iframe 中的内容，并详细展示了如何设置和调用相应的 JavaScript 函数。

ie 中为 frames["id"]其他为document.getElementById("id").contentWindow
contentWindow属性是指指定的frame或者iframe所在的window对象

在IE中iframe或者frame的contentWindow属性可以省略，但在Firefox中如果要对iframe对象进行编辑则

必须指定contentWindow属性。

function EnableEdit()
{
      var editor;
      editor = document.getElementById("HtmlEdit").contentWindow;
   // 针对IE浏览器, make it editable
      editor.document.designMode = 'On';
      editor.document.contentEditable = true;
   // For compatible with FireFox, it should open and write something to make it work
      editor.document.open();
      editor.document.writeln('<html><head>');
      editor.document.writeln('<style>body {background: white;font-size:9pt;margin: 2px; padding: 0px;}</style>');
      editor.document.writeln('</head><body></body></html>');
      editor.document.close();

}

<iframe   ID="HtmlEdit" MARGINHEIGHT="1" MARGINWIDTH="1" width="100%" height="312">
</iframe>

<html>
<body>
<script>
var ifr = document.createElement("iframe");
document.body.appendChild(ifr);
var ifrdoc = ifr.contentWindow.document;
var s = fixingHTB.innerHTML;   //进入可编辑模式前存好
ifrdoc.designMode = "on";     //文档进入可编辑模式
ifrdoc.open();                        //打开流
ifrdoc.write(s); 
ifrdoc.close();                        //关闭流
ifrdoc.designMode ="off";     //文档进入非可编辑模式
</script>
</body>
</html>