2. 程式人生 > >前端頁面中的iframe框架的實踐

前端頁面中的iframe框架的實踐

阿新 • • 發佈：2019-01-23

說在前面的話，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：

  1.   注：測試環境IE：8.0，FF：23.0.1  
  2.   a>隱藏iframe表框  
  3.     i>標籤中設定：frameborder="0",<iframeframeborder="0"width="400"height="400"src="http://blog.csdn.net/cuew1987"scrolling="no"></iframe>
  4.     ii>DOM操作：  
  5.         <body>
  6.         <iframeframeborder="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>等到的資訊：<divid="msg"></div></div>
  52.             <iframeframeborder="1"width="400"height="400"src="son.html"scrolling="no"id="myiframe"></iframe>
  53.         </body>
  54.         son.html:  
  55.         <body>
  56.         <inputtype="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>等到的資訊：<divid="setMsg"></div></div>
  68.         <inputtype="button"value="setMsg"onClick="setMsg()"><br>
  69.         <iframeframeborder="1"width="400"height="400"src="son.html"scrolling="no"id="myiframe"></iframe>
  70.         <scripttype="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.         <divid="msg">Hello world!!!</div>
  81.         </body>


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

  1. 實際使用iframe中，會遇到iframe高度的問題，由於被巢狀的頁面長度不固定而顯示出來的滾動條，不僅影響美觀，還會對使用者操作帶來不便  
  2.     a>同域下的高度自適應  
  3.     parent.html:  
  4.     <body>
  5.     <iframewidth="400"id="myiframe"onload="setHeight()"height="1"frameborder="0"src="son.html"></iframe>
  6.     <scripttype="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.     b>跨域下高度自適應  
  40.     頁面：  
  41.     index.html:(http://www.csdn.net)  
  42.     <iframewidth="400"id="myiframe"onload="setHeight()"height="1"frameborder="0"src="son.html"></iframe>
  43.     son.html:  
  44.     <body>
  45.     <iframeid="agentIframe"style="position:absolute; top:-10000;left:-1000;"height="10"width="100%"></iframe>
  46.     </body>
  47.     <script>
  48.         function getHeight(){  
  49.             var idoc = document;   
  50.             if(idoc.body){  
  51.                 return Math.max(idoc.body.scrollHeight,idoc.body.offsetHeight);     
  52.             }else if(idoc.documentElement){  
  53.                 return Math.max(idoc.documentElement.scrollHeight,idoc.documentElement.offsetHeight);     
  54.             }  
  55.         }  
  56.         window.onload = function(){  
  57.             var h = getHeight();  
  58.             document.getElementById("agentIframe").src="http://www.csdn.net#"+h;  
  59.         }  
  60.     </script>
  61.     agent.html:(http://www.csdn.net)  
  62.     <script>
  63.     (function(){  
  64.         var con = parent.parent.document.getElementById('frame_content');       
  65.         var href = parent.parent.frames["frame_content"].frames["iframeC"].location.hash;        
  66.         con.style.height = href.split("#")[1]+"px";  
  67.     })();  
  68.     </script>

4.iframe背景透明：

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

  1. index.html:  
  2. <bodystyle="background-color:#00f;">
  3. <iframeframeborder="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允許透明

  1. <bodystyle="background-color:#00f;">
  2. <iframeallowTransparency="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:

  1. a>首先來看看window.frameElement這個屬性。  
  2.     返回嵌入當前window物件的元素(比如 <iframe> 或者 <object>),即為包含本頁面的iframe或frame物件。如果當前window物件已經是頂層視窗,則返回null.  
  3.     看看一個例子：  
  4.     parent.html:  
  5.     <body>
  6.     <iframeframeborder="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.     <divid="msg">Hello world!!!</div>
  11.     <scripttype="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>相容性如下圖：  


  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元件提交(包括上傳域)：

  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 = $("<iframeid=" + 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. b>HTML5中：  
  73. HTML 4.01 與 HTML 5 之間的差異  
  74. 在 HTML5 中 target 屬性不再是被廢棄的屬性。不再支援 frame 和 frameset。  
  75. 現在，parent, top 和 framename 值大多用於 iframe。 

相關推薦

前端頁面中的iframe框架的實踐

說在前面的話，iframe是可以做很多事情的。 例如： a>通過iframe實現跨域; b>使用iframe解決IE6下select遮擋不住的問題 c>通過iframe解決Ajax的前進後退問題 d>通過iframe實現非同步上傳。(Easyui中f

前端頁面使用AngularJS框架的情況下如何判斷複選框是否選中，以及向集合中新增和移除id

使用angularJS框架的話都需要引入angular.min.js檔案，這個想必各位大佬都懂得，我就不多說了。 這裡主要說說如何判斷複選框是否選中，以及向集合中新增和移除id。   1、如果判斷複選框被選中呢 一般我們在複選框中都是這樣寫： <td>&

在eclipse上邊搭建一個最最最最最最最最最最最最最最最最最最最最最最最最簡單的ssh框架spring4+struts2+hibernate5，然後實現從資料庫中查詢一個數據，在前端頁面中顯示出來

在eclipse上邊搭建一個最最最簡單的ssh框架spring4+struts2+hibernate5，然後實現從資料庫中查詢一個數據，在前端頁面中顯示出來   需要的包和工具連結如下： jar包：https://download.csdn.net/download/hands

前端頁面中form表單數據轉換json數據

ria ret bsp var urn pre func function clas $.fn.serializeJson=function(){ var serializeObj={}; var array=thi

前端頁面中把form表單中的資料轉換為json格式

$.fn.serializeJson=function(){               var serializeObj={};               var array=this.serializeArray();               var str=th

一個頁面中iframe之間的值的傳遞

test.jsp <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head></head>

前端頁面中input輸入框只能輸入數字

input輸入框只能輸入數字 在實際的專案中，有很多輸入框，比如說年齡欄位，身高欄位等等，要求使用者輸入的是純數字，為了簡單，我們可以直接在input標籤中新增onkeyup對輸入的內容進行驗證，如下程式碼： <input type="text" placehold

超簡潔的jquery操作頁面中iframe內的dom元素

$("#iframe1").contents().find("#news_text").html(""); iframe1：頁面中的iframe的ID； news_text：iframe內需要被操作的元素的ID； JS程式碼如下： document.getElem

前端頁面中的儲存邏輯

今天一位朋友在群裡問到一個問題「app 中設定介面修改設定的時候，每修改一項，就會觸發 loading，導致使用者體驗不佳，如何避免？」 這是一個非常常見的「編輯 - 儲存」頁面，一般來說，這類頁面的邏輯分成兩種：一類是單獨有個儲存按鈕進行儲存；另一類是修

前端頁面中各種常用資料回顯、預設被選中問題——JS學習筆錄

最近常常遇到各種複選框、單選框、下拉框的預設被選中的問題，開始也是絞盡腦汁的想辦法，今天寫一篇學習總結的博文來寫一下學習總結。 單選框（radio）預設被選中： 一、jstl技術進行回顯 <input type="radio" name="sex" <f:i

js控制頁面中iframe內的頁面提交

只是js的操作，沒什麼技術含量，做個備忘將a.jsp中的iframe內的頁b.jsp中的form提交a.jsp內容：<%@   page   language="java"   %><script language="javascript"><!

【前端框架】Backbone.js在大型單頁面應用中的應用實踐

Backbone.js是什麼？ Backbone.js是一個JavaScript MVC框架，提供了良好的程式碼組織能力，可以方便地將應用程式解耦成可以複用的部分，為建立大型的單頁面應用提供框架支援，目前的版本是0.9.10（注：現在已到1.2.1版本）。通過將應用程式分解成MVC模式中不同職責的模組，

在Bootstrap開發框架的前端檢視中使用@RenderPage實現頁面內容模組化的隔離，減少複雜度

在很多開發的場景中，很多情況下我們需要考慮抽象、以及模組化等方面的內容，其目的就是為了使得開發的時候關注的變化內容更加少一些，整體開發更加簡單化，從而減少開發的複雜度，在Winform開發的時候，往往可以通過定義基類模組、使用者控制元件的方式實現這個目的，而在Web開發的時候，我們是否也可以利用這些特性呢？特

iframe框架中的頁面重新整理

　1，reload 方法，該方法強迫瀏覽器重新整理當前頁面。 　　語法：location.reload([bForceGet]) 　　引數： bForceGet， 可選引數， 預設為 false，從客戶端快取裡取當前頁。true, 則以 GET 方式，從服務端取最新的

1.IFRAME框架中載入的頁面 禁止URL直接訪問

1.在jsp頁面 會使用許多的iframe,使用者可以F12知道 選單的url路徑，然後可以直接URL訪問，或者修改IFRAME中的src地址。這個時候有兩種方法禁止直接訪問iframe的內容，首先是js載入時候禁止，/*    * 只允許，同一域名下IFRAME 凨來了 

框架頁面盡可以這麽用(後置代碼中控制框架)

out get .cn top align lock 顯示 摘要 oct 下面是框架頁: <%@ Page CodeBehind="Frameset.aspx.cs" Language="c#" AutoEventWireup="false" Inherits="Ib

（轉）基於MVC4+EasyUI的Web開發框架經驗總結（6）--在頁面中應用下拉列表的處理

ica new web開發 don ext images 如果 bob 獲取 http://www.cnblogs.com/wuhuacong/p/3840321.html 在很多Web界面中，我們都可以看到很多下拉列表的元素，有些是固定的，有些是動態的；有些是字典內容，

前端頁面給指定的div添加遮罩層，並且帶有加載中的小旋轉圖片

left 說了 -s 加載 jquer 其中 ges loading style 話不多說，先上代碼，其實還是比較簡單的 1 $("<div id=‘shade‘ style=‘opacity:0.85;background:white‘></div

【html】點擊鏈接讓頁面在 iframe 中變換

pan dex fff tar html order get eight 鏈接 Demo: <html><body> <a href= "1.html " target= "iFrameName "> page1 </a&

web前端頁面解決中文傳參亂碼問題

new 字符串數組 代碼 背景 項目 一次 截取 單純 獲取url 　　問題背景：在項目中往往會涉及到前端跳轉頁面時要傳一些參數給下一個頁面，如果參數是英文或者數字的時候就很好解決，然而有時候傳參會涉及到中文漢字，這個時候再單純的拼接往往就會導致中文亂碼，下面我們就該討論一