iframe 的用法與注意事項_經驗交流

來源:互聯網
上載者:User
本文主要來講述一下 iframe 的用法與注意事項:
好多同志對 iframe 是如何控制的,並不是十分瞭解,基本上還處於一個模糊的認識狀態.
注意兩個事項,ifr 是一個以存在的 iframe 的 ID 和 NAME 值:
 document.getElementById(“ifr”);
 window.frames[“ifr”];

要想使用iframe內的函數,變數就必須通過第二種方法.因為它取的是一個完整的DOM模型(不知道這樣說對不對).第一種方法只是取出了一個OBJECT而已.

如果只想改變iframe的 src 或者 border , scrolling 等 attributes(與property不是一個概念,property是不能寫在標籤內的,比如:scrollHeight,innerHTML等),就需要用到第一種方法.

如果想取得iframe的頁面(不是iframe本身),就需要使用第二種方法,因為它取得的是一個完整的DOM模型,比如想得到iframe的document.body的內容,就只能用第二種方法.

還要注意的是,如果在iframe的頁面未完全裝入的時候,調用iframe的DOM模型,會發生很嚴重的錯誤,所以,你要準備一個容錯模式.

下面是樣本,一個是aa.htm,一個是bb.htm,請先考到本地在運行,原因不用我在說了吧!

aa.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Untitled Page</title> <style type="text/css"> <!-- body{ margin:0px; } --> </style> </head> <body> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

bb.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>sub frame</title> <style type="text/css"> <!-- html,body{ margin:0px; width:90%; } --> </style> </head> <body> I'm a sub frame! ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
  • 相關文章

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.