iframe的一些記錄

時間 2019-11-17

標籤 iframe 一些記錄欄目 HTML 简体版

原文原文鏈接

首要要作配置操做，配置兩個域名，我這裏使用的是Apache。附件中的demo1和demo2javascript

<VirtualHost *:80>
    DocumentRoot "D:/htdocs/iframe/demo1"
    ServerName www.iframe1.cn
</VirtualHost>
<VirtualHost *:80>
    DocumentRoot "D:/htdocs/iframe/demo2"
    ServerName www.iframe2.cn
</VirtualHost>

iframe的一些屬性介紹：php

屬性	值	描述
align	left right top middle bottom	不同意使用。請使用樣式代替。規定如何根據周圍的元素來對齊此框架。
frameborder	1 0	規定是否顯示框架周圍的邊框。
height	pixels %	規定 iframe 的高度。
longdesc	URL	規定一個頁面，該頁面包含了有關 iframe 的較長描述。
marginheight	pixels	定義 iframe 的頂部和底部的邊距
marginwidth	pixels	定義 iframe 的左側和右側的邊距。
name	frame_name	規定 iframe 的名稱
sandbox	"" allow-forms allow-same-origin allow-scripts allow-top-navigation	啓用一系列對 <iframe> 中內容的額外限制。html 能夠在這裏作調試前端
scrolling	yes no auto	規定是否在 iframe 中顯示滾動條。
seamless	seamless	規定 <iframe> 看上去像是包含文檔的一部分。html5 能夠在這裏作調試java
src	URL	規定在 iframe 中顯示的文檔的 URL。
srcdoc	HTML_code	規定在 <iframe> 中顯示的頁面的 HTML 內容。web 能夠在這裏作調試chrome
width	pixels %	定義 iframe 的寬度。

一、iframe無刷新文件上傳

這個上傳我服務器端使用的是PHP代碼。跨域

1 <div style="padding:20px">
2         <h1>一、無刷新上傳</h1>
3         <form action="action.php" enctype="multipart/form-data" method="post" target="iframeUpload"> 
4             <iframe name="iframeUpload" width="400" height="400" frameborder='1'></iframe><br/>
5             <input id="file1" name="file1" type="file"> 
6             <input value="上傳圖片" type="submit"> 
7         </form>
8 </div>

使用iframe上傳的關鍵點是target="iframeUpload"，這個屬性的設置。action.php中的代碼以下：數組

 1 <?php
 2 require_once('upload.php');
 3 header("Content-Type:text/html;charset=utf-8");
 4 $type = array('jpg', 'jpeg', 'png', 'gif');
 5 $path = sprintf('%s/%s/%s/', date('Y'), date('m'), date('d'));
 6 
 7 $upload = new App_Util_Upload('file1', 0, $type);
 8 //獲取上傳信息
 9 $info = $upload->getUploadFileInfo();
10 $fileName = time() . rand(1000, 9999) . '.' . $info['suffix'];
11 $fullName = $path . $fileName;    
12 $path = rtrim('upload', DIRECTORY_SEPARATOR) . '/' . $fullName;
13 $success = $upload->save($path);
14 $msg = $success ? '上傳成功<br/>' : '上傳失敗<br/>';
15 echo $msg;
16 echo '<img src="'.$path.'" width="300" height="300"/>';

二、iframe自適應高度

同域的狀況下：

網絡中的方法一：直接用onload函數獲取iframe中的內容高度，若是頁面載入一次之後，高度不變，這招是挺好用的，可是我在firefox與IE中，表現不理想，如圖，並無徹底的將頁面顯示，chrome和safrai的表現不錯。

<iframe id="iFrame1" name="iFrame1" width="100%" onload="this.height=iFrame1.document.body.scrollHeight" 
frameborder="0" src="autoheight.html" scrolling="no"></iframe>

後面發現，若是在iFrame1.document.body.scrollHeight的後面在加上20的話，iframe也是能徹底展示出來的，這個應該是受到了我autoheight.html這個頁面裏的CSS影響，

autoheight.html中的頁面代碼是這樣的：

1 <div style="padding:20px;border:1px solid #000;width:650px">
2         <img src="autoheight.jpg" width="600"><br/>
3         一張圖片
4 </div>

爲了驗證個人猜測，我把padding給去除掉，仍是用原先的代碼onload="this.height=iFrame1.document.body.scrollHeight"，但事實與個人猜測徹底不一樣

網絡中的方法二：這個函數出自於前端開發博客。與上面的簡單方法不一樣，這裏多了些瀏覽器兼容方面的檢驗。

 1 <script type="text/javascript">
 2             function setIframeHeight(iframe) {
 3                 if (iframe) {
 4                     var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
 5                     if (iframeWin.document.body) {
 6                         iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
 7                     }
 8                 }
 9             };
10             window.onload = function () {
11                 setIframeHeight(document.getElementById('iFrame2'));
12             };
13  </script>
14  <iframe id="iFrame2" name="iFrame2" width="100%" frameborder="0" src="autoheight.html" scrolling="no" onload="setIframeHeight(this)"></iframe>

var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;

這句是用來獲取iframe的window對象。

文章Iframes, onload, and document.domain中說「he iframe element object has a property called contentDocument that contains the iframe’s document object, so you can use the parentWindow property to retrieve the window object.」

意思就是一些瀏覽器能夠經過iframeElement.contentDocument.parentWindow得到iframe的window對象。通過測試發只有IE9與IE8是根據iframe.contentDocument.parentWindow來獲取的，其餘firefox、chrome、safrai、IE六、IE7都是根據frame.contentWindow獲取的

iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;

這句話就是在獲取iframe的高度了。

body是DOM對象裏的body子節點，即 <body> 標籤；
documentElement 是整個節點樹的根節點root，即<html> 標籤；

剛剛上一個方法因爲用的是body.scrollHeight致使了各個瀏覽器的解釋不一樣，引發了顯示的不一致。經測試發現使用documentElement.scrollHeight後，都能正確顯示。

異域的狀況下：

跨域的時候，因爲js的同源策略，父頁面內的js不能獲取到iframe頁面的高度。須要一個頁面來作代理。總共有三張頁面，

注意下三個頁面的域名
http://www.iframe1.cn/index.html http://www.iframe1.cn/agent.html http://www.iframe2.cn/iframe.html
index.html與agent.html在同一個域名下

iFrame3與iframeC分別爲index.html與iframe.html頁面上面的iframe的id。下面的圖是用websequencediagrams在線畫的。

index.html中代碼：

<iframe id="iFrame3"  name="iFrame3" src="http://www.iframe2.cn/iframe.html" width="100%" height="0" scrolling="no" frameborder="0"></iframe>

iframe.html中代碼：

 1 <body>
 2     <img src="koala.jpg" />
 3     跨域訪問！
 4     <iframe id="iframeC" name="iframeC" width="0" height="0" style="display:none;" ></iframe>
 5     <script type="text/javascript">
 6     function sethash(){
 7         hashH = document.documentElement.scrollHeight;
 8         urlC = "http://www.iframe1.cn/agent.html";
 9         document.getElementById("iframeC").src=urlC+"#"+hashH;
10     }
11     window.onload=sethash;
12     </script>
13 </body>

agent.html中代碼：

 1 <body>
 2     <script type="text/javascript">
 3     function  pseth() {
 4         var iObj = parent.parent.document.getElementById('iFrame3');
 5         iObjH = parent.parent.frames["iFrame3"].frames["iframeC"].location.hash;
 6         iObj.style.height = iObjH.split("#")[1]+"px";
 7     }
 8     pseth();
 9     </script>
10 </body>

三、iframe跨域通訊

網絡方法一：這是一種經過第三張頁面來跨域執行函數，一種代理的感受

注意下三個頁面的域名
http://www.iframe1.cn/index_cross.html http://www.iframe1.cn/cross_domain2.html http://www.iframe2.cn/cross_domain1.html
index.html與cross_domain2.html在同一個域名下

iFrame4與iframeD分別爲index_cross.html與cross_domain1.html頁面上面的iframe的id。

這是一種很是優雅的方式，可是是用url的方式在傳遞參數，大小被受到了限制，若是數據量大的話，是會有問題的。

index_cross.html中代碼：

1 <script type="text/javascript">
2             function showQueryString(prompt) {
3                 document.getElementById('testCross1').innerHTML = '跨域'+prompt; 
4             };
5 </script>
6 <iframe id="iFrame4"  name="iFrame4" src="http://www.iframe2.cn/cross_domain1.html">
7 </iframe>
8 <div id="testCross1"></div>

cross_domain1.html中代碼：

<body>
    <iframe id="iframeD" name="iframeD" src="http://www.iframe1.cn/cross_domain2.html?cross=success"></iframe>
</body>

cross_domain2.html中代碼：

 1 <body>
 2     <script type="text/javascript">
 3         function getQueryString(name) {
 4             var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
 5             var r = window.location.search.substr(1).match(reg);
 6             if (r != null) return unescape(r[2]); return null;
 7         }
 8         parent.parent.showQueryString(getQueryString('cross'));
 9     </script>
10 </body>

成功後出現的提示信息

網絡方法二：

1) 支持HTML5的瀏覽器可使用postMessage

　　IE八、IE九、firefox、chrome和safrai可用postMessage函數

　　index_cross.html中代碼：

 1 <script type="text/javascript">
 2             window.onload = function () {
 3                 if(window.postMessage) {
 4                     var ifr = document.getElementById('iFrame5');
 5                     var targetOrigin = 'http://www.iframe2.cn/';
 6                     //postMessage的第一個參數不只僅能夠是字符串，結構對象、數據對象(如：File和ArrayBuffer)或是數組都是能夠
 7                     //但IE8/IE9/FireFox3.6及其如下版本只支持字符串數據
 8                     ifr.contentWindow.postMessage('I am parent!', targetOrigin);
 9                 }
10             };
11 </script>

　　post_message.html中代碼：

 1 <body>
 2     <div id="postmessage"></div>
 3     <script type="text/javascript">
 4         window.onmessage = function(event){
 5             var event = event || window.event;
 6             if (event.origin == 'http://www.iframe1.cn') {
 7                 document.getElementById('postmessage').innerHTML = event.data;
 8             }
 9         }
10     </script>
11 </body>

2) IE六、IE7能夠用navigator對象的跨大域漏洞

　　index_cross.html中代碼：

 1 <iframe id="iFrame6"  name="iFrame6" src="http://www.iframe2.cn/navigator.html" width="100%" height="100"></iframe>
 2         <div id="testCross2"></div>
 3         <script type="text/javascript">
 4             window.onload = function () {
 5                 navigator.a = function(prompt) {
 6                     document.getElementById('testCross2').innerHTML = '這是父頁面的方法：'+prompt; 
 7                 };
 8                 var iframe = document.getElementById('iFrame6');
 9                 if(typeof navigator.b === 'function') {
10                     navigator.b('children');
11                 }
12             };
13 </script>

　　navigator.html中代碼：

 1 <body>
 2     <div id="navigator"></div>
 3     <script type="text/javascript">
 4         navigator.b = function(prompt) {
 5             document.getElementById('navigator').innerHTML = '這是子頁面的方法：'+prompt; 
 6         }
 7         setInterval(function(){
 8             if(typeof navigator.a === 'function') {
 9                 navigator.a('parent');
10             }
11         }, 3000);
12     </script>
13 </body>