IFrame AND window对象

最新推荐文章于 2024-10-12 18:27:16 发布

原创最新推荐文章于 2024-10-12 18:27:16 发布 · 173 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#IFrame #window对象

JS 专栏收录该内容

21 篇文章

订阅专栏

本文深入探讨HTML文档与iframe元素之间的关系，包括如何通过事件、窗口对象等操作iframe，以及如何在不同浏览器环境下实现iframe的可编辑模式。通过实例演示了如何在iframe中插入HTML代码，并介绍了如何在iframe中应用设计模式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[size=medium]var detialIframe=document.all("detialIframe"); 此处的IFrame是从document取得的,即作作为document的子对象出现,虽然是文档(document)对象,但由于它是独立的页面,因而拥有自己的事件,拥有自己的窗口对象(contentWindow); Window.detialIframe 或 Window.frames(detialIframe)将直接取得IFrame的Window对象 IFRAME IFRAME 元素也就是文档中的文档 window 对象浏览器会在其打开一个 HTML 文档时创建一个对应的 window 对象。但是，如果一个文档定义了一个或多个框架(即，包含一个或多个 frame 或 iframe 标签)，浏览器就会为原始文档创建一个 window 对象，再为每个框架创建额外的 window 对象。这些额外的对象是原始窗口的子窗口，可能被原始窗口中发生的事件所影响。例如，关闭原始窗口将导致关闭全部子窗口。如果想要创建新窗口(以及对应的 window 对象)，可以使用像 open, showModalDialog 和 showModelessDialog 这样的方法。 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> document.designMode的功能与使用方法介绍将文档设置为设计模式要将整个文档设置为设计模式，可以对文档对象本身设置 designMode 属性。当文档处于设计模式时，将不运行脚本。这样，似乎在文档内设置一个按钮来打开或关闭设计模式是个好注意，但这样做没有作用。当用户打开它后，它将保持在设计模式状态。当他们下次单击此按钮时，它将被选定而不是被单击，他们再次单击它，将能够编辑它的值。这就是为什么如果要使用设计模式最好对框架或 IFrame 中的文档设置 designMode 属性的原因。下例展示如何为 IFrame 中的文档打开设计模式： <script for="btnDesign" event="onclick"> targetDoc = document.frames(0).document; if (targetDoc.designMode == "On") targetDoc.designMode = "Off"; else targetDoc.designMode = "On"; </script> <button id=btnDesign>DesignMode</button> <iframe src="blank.htm" style="border: black thin; width:100%; height:200px"></iframe> designMode 属性的值始终以首字母大写格式存储，即时它最初是以全部小写设置的。请在测试它的值时一定记住这点。designMode 属性的默认值是“Inherit”。 [/size]