iframe使用總結（實戰）

原創 renxing518 2020-02-25 00:25


目錄(?)[+]

說在前面的話，iframe是可以做很多事情的。
例如：
a>通過iframe實現跨域;
b>使用iframe解決IE6下select遮擋不住的問題
c>通過iframe解決Ajax的前進後退問題
d>通過iframe實現異步上傳。(Easyui中form組件就是用的iframe，實現表單提交時，可以提交上傳域)
下面就一些問題一一論述。

1、iframe基本知識：

iframe 元素會創建包含另外一個文檔的內聯框架（即行內框架）。
在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不支持 iframe 元素。
提示：您可以把需要的文本放置在 <iframe> 和 </iframe> 之間，這樣就可以應對無法理解 iframe 的瀏覽器。
<iframe width=420 height=330 frameborder=0 scrolling=auto src="URL"></iframe>

可選屬性：

標準屬性：

 

2、操作iframe：

[html] view plain copy
 print?
  1.   注：測試環境IE：8.0，FF：23.0.1  
  2.   a>隱藏iframe表框  
  3.     i>標籤中設置：frameborder="0",<iframe frameborder="0" width="400" height="400" src="http://blog.csdn.net/cuew1987" scrolling="no"></iframe>  
  4.     ii>DOM操作：  
  5.         <body>  
  6.         <iframe frameborder="1" width="400" height="400" src="http://blog.csdn.net/cuew1987" scrolling="no" id="myiframe"></iframe>  
  7.         <script>  
  8.         var myiframe = document.getElementById("myiframe");  
  9.         myiframe.style.border="none";//FF下有效，IE下無效   
  10.         myiframe.setAttribute("frameborder",0);//FF下有效，IE下無效   
  11.         myiframe.frameBorder = 0;//FF下有效，IE下無效   
  12.         </script>  
  13.         </body>  
  14.   b>動態創建iframe  
  15.   <script>  
  16.     var newFrame = document.createElement("iframe");  
  17.     newFrame.src ="http://blog.csdn.net/cuew1987";  
  18.     newFrame.frameBorder = 0;//FF、IE隱藏邊框有效  
  19.     newFrame.width = "400px";  
  20.     newFrame.height = "400px";  
  21.     newFrame.scrolling = "no";  
  22.     document.body.appendChild(newFrame);  
  23.   </script>  
  24.   c>獲取iframe  
  25.     i>var obj = document.getElementById("iframeID");  
  26.       獲取iframe對象，可直接操作iframe標籤屬性,如只想改變iframe的 src 或者 border ，scrolling 等attributes  
  27.     ii>var dom = frames["iframeName"];  
  28.        獲取iframe的DOM對象，此對象可用來操作對象，比如想操作iframe頁面中的元素。  
  29.    d>獲取iframe中的window對象  
  30.     function getIframeWindow(obj) {  
  31.         //IE || w3c  
  32.         return obj.contentWindow || obj.contentDocument.parentWindow;  
  33.         //parentWindow 是 parent window object  
  34.     }  
  35.     document.getElementById取到的iframe是不能直接操作裏面的document的，只能這樣取：  
  36.     IE:frames[id].document或obj.contentWindow.document;  
  37.     FF:dom.contentDocument或obj.contentDocument;不綁定任何事件.  
  38. e>獲取iframe頁面高度  
  39.     function getIframeHeight(obj){  
  40.         var idoc = getIframeWindow(obj).document;   
  41.         if(idoc.body){  
  42.             return Math.max(idoc.body.scrollHeight,idoc.body.offsetHeight);     
  43.         }else if(idoc.documentElement){  
  44.             return Math.max(idoc.documentElement.scrollHeight,idoc.documentElement.offsetHeight);     
  45.         }  
  46.     }  
  47. f>父子頁面互訪  
  48.     i>子訪問父：  
  49.         parent.html:  
  50.         <body>  
  51.             <div>等到的信息：<div id="msg"></div></div>  
  52.             <iframe frameborder="1" width="400" height="400" src="son.html" scrolling="no" id="myiframe"></iframe>  
  53.         </body>  
  54.         son.html:  
  55.         <body>  
  56.         <input type="button" onClick="setMsg()" value="setMsg">  
  57.         <script>  
  58.         function setMsg(){  
  59.             var msg = window.parent.document.getElementById("msg");  
  60.             msg.innerHTML= "Hello world!!";  
  61.         }  
  62.         </script>  
  63.         </body>  
  64.     ii>父訪問子：  
  65.         parent.html:  
  66.         <body>  
  67.         <div>等到的信息：<div id="setMsg"></div></div>  
  68.         <input type="button" value="setMsg" onClick="setMsg()"><br>  
  69.         <iframe frameborder="1" width="400" height="400" src="son.html" scrolling="no" id="myiframe"></iframe>  
  70.         <script type="text/javascript">  
  71.         function setMsg(){  
  72.             var obj = document.getElementById("myiframe");  
  73.             var msg = getIframeWindow(obj).document.getElementById("msg");  
  74.             document.getElementById("setMsg").innerHTML = msg.innerHTML;  
  75.         }  
  76.         </script>  
  77.         </body>  
  78.         son.html:  
  79.         <body>  
  80.         <div id="msg">Hello world!!!</div>  
  81.         </body>  


3.iframe高度自適應和跨域：

[html] view plain copy
 print?
  1. 實際使用iframe中，會遇到iframe高度的問題，由於被嵌套的頁面長度不固定而顯示出來的滾動條，不僅影響美觀，還會對用戶操作帶來不便  
  2.     a>同域下的高度自適應  
  3.     parent.html:  
  4.     <body>  
  5.     <iframe width="400" id="myiframe" onload="setHeight()" height="1" frameborder="0" src="son.html"></iframe>  
  6.     <script type="text/javascript">    
  7.     function getIframeWindow(obj) {  
  8.         return obj.contentWindow || obj.contentDocument.parentWindow;  
  9.     }  
  10.     function getIframeHeight(obj){  
  11.         var idoc = getIframeWindow(obj).document;   
  12.         if(idoc.body){  
  13.             return Math.max(idoc.body.scrollHeight,idoc.body.offsetHeight);     
  14.         }else if(idoc.documentElement){  
  15.             return Math.max(idoc.documentElement.scrollHeight,idoc.documentElement.offsetHeight);     
  16.         }  
  17.     }  
  18.     function setHeight(){     
  19.         var myiframe = document.getElementById("myiframe");  
  20.         myiframe.height = getIframeHeight(myiframe);  
  21.     }   
  22.     </script>   
  23.     </body>  
  24.     另：document.documentElement與document.body相關說明(W3C DOM2.0規範)  
  25.     document.doucmentElement:  
  26.         documentElement of type Element, readonly,This is a convenience attribute that allows direct access to the   
  27.         child node that is the root element of the document. For HTML documents, this is the element with the tagName "HTML".  
  28.     document.body:  
  29.         document.body is the element that contains the content for the document. In documents with <body> contents, returns the <body> element,   
  30.         and in frameset documents, this returns the outermost <frameset> element.  
  31.         Though body is settable, setting a new body on a document will effectively remove all the current children of the existing <body> element.  
  32.     IE在怪異模型（Quicks Mode）下document.documentElement無法正確取到clietHeight scrollHeight等值，比如clientHeight=0。  
  33.     獲取scrollTop:  
  34.     var sTop=Math.max(  
  35.         (document.body?document.body.scrollTop:0),  
  36.         (document.documentElement?document.documentElement.scrollTop:0),  
  37.         (window.pageYOffset?window.pageYOffset:0)  
  38.     );      
  39.   
  40.     b>跨域下高度自適應  
  41.     頁面：  
  42.     index.html:(http://www.csdn.net)  
  43.     <iframe width="400" id="myiframe" onload="setHeight()" height="1" frameborder="0" src="son.html"></iframe>  
  44.     son.html:  
  45.     <body >  
  46.     <iframe id="agentIframe" style="position:absolute; top:-10000;left:-1000;" height="10" width="100%"></iframe>  
  47.     </body>  
  48.     <script>  
  49.         function getHeight(){  
  50.             var idoc = document;   
  51.             if(idoc.body){  
  52.                 return Math.max(idoc.body.scrollHeight,idoc.body.offsetHeight);     
  53.             }else if(idoc.documentElement){  
  54.                 return Math.max(idoc.documentElement.scrollHeight,idoc.documentElement.offsetHeight);     
  55.             }  
  56.         }  
  57.         window.onload = function(){  
  58.             var h = getHeight();  
  59.             document.getElementById("agentIframe").src="http://www.csdn.net#"+h;  
  60.         }  
  61.     </script>  
  62.     agent.html:(http://www.csdn.net)  
  63.     <script>  
  64.     (function(){  
  65.         var con = parent.parent.document.getElementById('frame_content');       
  66.         var href = parent.parent.frames["frame_content"].frames["iframeC"].location.hash;        
  67.         con.style.height = href.split("#")[1]+"px";  
  68.     })();  
  69.     </script>  

4.iframe背景透明：

在ie6/7/8下引入iframe的時候，它的背景默認是白色，即使設置了style=”background-color:transparent;”也無效，
但是其他瀏覽器(firefox,chrome,opera,ie9)都正常顯示，要解決這個兼容性問題，必須用到一個屬性。
下面來看看現象：

[html] view plain copy
 print?
  1. index.html:  
  2. <body style="background-color:#00f;">  
  3. <iframe frameborder="0" height="200" width="200"  src="son.html" scrolling="yes" id="myiframe"   
  4. style="background-color:transparent;"></iframe>  
  5. </body>  


結果如下圖：(FF中有滾動條是因爲在index.html中設置了有滾動條)

解決：
給iframe設置屬性：allowTransparency=”true” //設置爲true允許透明

[html] view plain copy
 print?
  1. <body style="background-color:#00f;">  
  2. <iframe allowTransparency="true" frameborder="0" height="200" width="200"  src="son.html"   
  3. scrolling="yes" id="myiframe"></iframe>  
  4. </body>  


備註：iframe不設置此屬性時，可使用iframe解決在IE6、7環境中遮住select

5.判斷頁面中是否有iframe:

[html] view plain copy
 print?
  1. a>首先來看看window.frameElement這個屬性。  
  2.     返回嵌入當前window對象的元素(比如 <iframe> 或者 <object>),即爲包含本頁面的iframe或frame對象。如果當前window對象已經是頂層窗口,則返回null.  
  3.     看看一個例子：  
  4.     parent.html:  
  5.     <body>  
  6.     <iframe frameborder="1" width="400" height="400" src="son.html" scrolling="no" id="myiframe"></iframe>  
  7.     </body>  
  8.     son.html:(注意frameElement用在son.html中，如果用在parent.html中,則返回null)  
  9.     <body>  
  10.     <div id="msg">Hello world!!!</div>  
  11.     <script type="text/javascript">  
  12.         var iframe = window.frameElement;  
  13.         if(iframe){  
  14.             iframe.src = "http://blog.csdn.net/cuew1987";  
  15.         }  
  16.     </script>  
  17.     </body>  
  18.     備註：雖然該屬性名爲frameElement,但該屬性也會返回其他類型比如 <object> 或者其他可嵌入窗口的元素.  
  19. b>兼容性如下圖：  


[html] view plain copy
 print?
  1. c>定義函數：  
  2.     i>判斷父頁面中是否含有iframe  
  3.     function hasIframe(){  
  4.         return document.getElementsByTagName("iframe").length > 0;  
  5.     }  
  6.     ii>判斷某個頁面是否在iframe標籤中  
  7.     function innerIframe(){  
  8.         var iframe = window.frameElement;  
  9.         if(iframe){  
  10.             return typeof iframe !== "undefined";  
  11.         }  
  12.     }  

6、HTML5中iframe：

HTML 4.01 與 HTML 5 之間的差異在 HTML 5 中，僅僅支持 src 屬性
<iframe src="/index.html"></iframe>
HTML5中全局屬性：

7、easyui中form組件提交(包括上傳域)：

[html] view plain copy
 print?
  1. function submitForm(target, options) {  
  2.     options = options || {};  
  3.     if (options.onSubmit) {  
  4.         if (options.onSubmit.call(target) == false) {  
  5.             return;  
  6.         }  
  7.     }  
  8.     var form = $(target);  
  9.     if (options.url) {  
  10.         form.attr("action", options.url);  
  11.     }  
  12.     var frameId = "easyui_frame_" + (new Date().getTime());  
  13.     var frame = $("<iframe id=" + frameId + " name=" + frameId + "></iframe>").attr(  
  14.             "src",  
  15.             window.ActiveXObject ? "javascript:false" : "about:blank").css(  
  16.             {  
  17.                 position : "absolute",  
  18.                 top : -1000,  
  19.                 left : -1000  
  20.             });  
  21.     var t = form.attr("target"), a = form.attr("action");  
  22.     form.attr("target", frameId);//在iframe中提交表單  
  23.     try {  
  24.         frame.appendTo("body");  
  25.         frame.bind("load", cb);  
  26.         form[0].submit();  
  27.     } finally {  
  28.         form.attr("action", a);  
  29.         t ? form.attr("target", t) : form.removeAttr("target");  
  30.     }  
  31.     var checkCount = 10;  
  32.     function cb() {  
  33.         frame.unbind();  
  34.         var body = $("#" + frameId).contents().find("body");  
  35.         //contents()查找匹配元素內部所有的子節點（包括文本節點）。如果元素是一個iframe，則查找文檔內容  
  36.         var data = body.html();  
  37.         if (data == "") {  
  38.             if (--checkCount) {  
  39.                 setTimeout(cb, 100);  
  40.                 return;  
  41.             }  
  42.             return;  
  43.         }  
  44.         var ta = body.find(">textarea");  
  45.         if (ta.length) {  
  46.             data = ta.val();  
  47.         } else {  
  48.             var pre = body.find(">pre");  
  49.             if (pre.length) {  
  50.                 data = pre.html();  
  51.             }  
  52.         }  
  53.         if (options.success) {  
  54.             options.success(data);  
  55.         }  
  56.         setTimeout(function() {  
  57.             frame.unbind();  
  58.             frame.remove();  
  59.         }, 100);  
  60.     };  
  61. };  
  62. 另：form 的target屬性：  
  63. a>HTML4中：  
  64. 定義和用法：target 屬性規定在何處打開 action URL。  
  65. 兼容性：在 HTML 4.01 中，不贊成使用 form 元素的 target 屬性；在 XHTML 1.0 Strict DTD 中，不支持該屬性。  
  66. 屬性值：  
  67. _blank 新窗口中打開  
  68. _self  默認，在相同的框架中打開  
  69. _parent 父框架中打開  
  70. _top    整個窗口中打開  
  71. framename  指定的frame name屬性值的框架中打開  
  72.   
  73. b>HTML5中：  
  74. HTML 4.01 與 HTML 5 之間的差異  
  75. 在 HTML5 中 target 屬性不再是被廢棄的屬性。不再支持 frame 和 frameset。  
  76. 現在，parent, top 和 framename 值大多用於 iframe。  

8、網上問題收集：

a>window.frameElement在chrome下undefined?

問題描述：
今天在重新編寫我的日曆組件的時候，由於用到使用iframe自定義屬性傳值，
將父頁面的值寫在iframe 自定義屬性上，然後在iframe頁面中使用 window.frameElement.getAttribute() 獲取，
奇怪的是之前編寫的日曆控件代碼一直都這樣寫，沒有發生過錯誤，但是今天在chrome裏面 window.frameElement 竟然是 undefined，
在firefox 甚至IE6下都沒有問題，後來百度沒有答案， 再google 也，沒有答案。
解決：
最後自己根據以往經驗想到或許是本地調試權限問題，於是打開apache使用域名的形式訪問，果然可以了，呵呵！

 

問題收集持續更新。。。

 

說在最後的話：此文中許多都是前輩們的經驗，在此做一總結，豐富自我的同時，以備需要之人蔘考，如果你是大神，請飄過，文中有不當之處，還望各位不要手下留情，不吝賜教，感激不盡！

今天上午打開微博的第一條消息就是博友轉發的李開復：“世事無常，生命有限。原來，在癌症面前，人人平等。”，已身患淋巴癌，在這裏希望李開復老師能早日康復！經過幾個晚上的努力，此篇文章終於寫完，生命不息，奮鬥不止！

201309062026新浪微博李開復：“在以往的職業生涯裏，我一直篤信“付出總有回報”的信念，所以給自己的負荷一直比較重，甚至堅持每天努力擠出三小時時間工作，還曾天真的和人比賽“誰的睡眠更少”、“誰能在凌晨裏及時回覆郵件”……努力把“拼命”作爲自己的一個標籤。現在，冷靜下來反思：這種以健康爲代價的堅持，不一定是對的。”

我想這就是所謂的人生價值吧。祈福！

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Iframe url跳轉方法

一、適用背景 頁面A嵌入Iframe頁面B Iframe頁面B跳轉到頁面C 由於是在Iframe頁面B中跳轉到頁面C，所以頁面C是以Iframe形式顯示。 我想要頁面C是以地址欄中是頁面C的url的形式顯示。 如圖所示： 不做任

明媚呀 2020-07-04 03:07:38

S Q L 注 入 路 徑 問 題

本文作者：未知下午沒什麼事情 看了看angel寫一個路徑的問章　找了肉雞試了半天 費了牛勁了 我發現如果出現 Microsoft OLE DB Pro

kxlzx 2020-07-07 04:05:04

ifram詳細用法(轉)

Iframe 詳解2007-01-08 11:19frame與Iframe的各項屬性   frame例子：<frameset cols="50%,*">  <noframes>   <body>   Sorry,your explorer

hzleexia 2020-07-06 15:25:08

iframe ie下自動適應高度

          function reinitIframe() {             var iframe = document.getE

阿才7167 2020-07-06 13:13:59

解決IOS iframe不滾動問題

解決IOS iframe不滾動問題參考文章： （1）解決IOS iframe不滾動問題 （2）https://www.cnblogs.com/xiaomingsun/p/6795643.html 備忘一下。

zhengxiuchen86 2020-07-06 12:05:07

跳出iframe框架的方法

採用js實現οnclick="parent.window.location = 'login.jsp';"

Rainet_yang 2020-07-06 05:05:38

瞭解什麼是IFRAME ASP.NET

瞭解什麼是IFRAME ASP.NET 安全工程師，要能獨立負責網站安全、局域網安全、服務器安全等，要了解網頁掛馬有IFRAME框架掛馬、JS文件掛馬、僞裝掛馬、CSS掛馬、ActiveX組件掛馬等方式，這樣纔可以

哈哈哈哈哈哈哈哈哈哈哈哈 2020-07-05 13:13:06

【原創】使用yahoo雅虎js庫（YUI）建立無刷新的N級樹（可添加刪除節點）

1、首先你要去下面地址下載yahoo類庫     http://developer.yahoo.com/yui/     2。5版本的 8。84M，你可以不全用，只用樹的 2、然後需要把yui/build/treeview/文件夾下面的文

goody9807 2020-07-05 02:39:22

獲取頁面中子iframe中的元素

先說明，本人是一個菜鳥，寫學校裏的一個前端項目的時候遇到一個問題，怎麼獲取頁面中iframe中的元素，查了很多百度，都沒有成功，後來得到前輩的指點，解決了，分享給大家：     var result_win = $("【子iframe的選

跌跌撞撞的编程之路 2020-07-04 19:58:10

讓Iframe自適應高度

<iframe id="rightFrame" name="rightFrame" style="width:100%;" frameborder=

三好农民 2020-07-04 11:36:29

iframe自適應高度問題解決方案

<iframe id="rightFrame" style="width:100%;" frameborder="0" scrolling="no" οnlοad="initHeight('rightFrame',594)" src="

三好农民 2020-07-04 11:36:29

MSN中的天氣預報

<iframe src="http://feeds.china.msn.com/weather/" frameborder="0" width="320" scrolling="no" height="370" /></iframe>  

qinii 2020-07-04 08:46:05

web模態窗口window.showModalDialog簡介

1、基本知識 showModalDialog() (IE 4+ 支持) showModelessDialog() (IE 5+ 支持) window.showModalDialog()方法用來創建一個顯示HTML內容的模態對話框。 win

am20100204 2020-07-03 21:58:09

兼容多個瀏覽器的自適應iframe尺寸的腳本

JS代碼如下: <script type="text/javascript"> function SetWinHeightBySelf(iframeObj){ if (document.getElementById){

刘秋荣 2020-07-03 18:54:05

DevExpress Asp.net(1) AspxButton的客戶端操作

  20090626 javascript調用父窗口（父頁面）的方法 window.parent與window.opener的區別 javascri

zgjsczwj 2020-07-03 12:21:37