js跨域問題之跨域iframe自適應大小實現代碼

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

複製代碼代碼如下:<body onload="javascript: setHeight();">
<script>
function setHeight(){
var dHeight = document.documentElement.scrollHeight;
var t = document.createElement("div");
t.innerHTML = '<iframe id="kxiframeagent" src="http://rest.kaixin001.com/api/agent.html#'+dHeight+'"scrolling="yes" height="0px" width="0px"></iframe>';
document.documentElement.appendChild(t.firstChild);
}
</script>

我想著跨域如何解決啊!後來去網上搜尋了一下子恍然大悟

具體如下我是複製過來了大家重點理解一下子它的實現思路：

問題:

A網域名稱下的頁面a.htm中通過iframe嵌入B網域名稱下的頁面b.html,由於b.html的大小等是不可預知而且會變化的,所以需要 a.htm中的iframe自適應大小.

問題本質 :

js的跨域問題,因為要控制a.htm中iframe的大小就必須首先讀取得到b.html的大小,A、B不屬於同一個域,js的訪問受限,讀取不到b.html的大小.

解決方案:

首先前提是A，B是合作關係,b.html中能引入A提供的js

首先a.html中通過iframe引入了b.html

複製代碼代碼如下:<iframe id="aIframe" height="0" width="0" src="http://www.b.com/html/b.html" frameborder="no" border="0px" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes" ></iframe>
<iframe id="aIframe" height="0" width="0" src="http://www.b.com/html/b.html" frameborder="no" border="0px" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes" ></iframe>

B在b.html中引入了A提供的js檔案

Html代碼複製代碼代碼如下:<script language="javascript" type="text/javascript" src="http://www.a.com/js/a.js"></script>

該js首先讀取b.html的寬和高,然後建立一個iframe,src為和A同一個域的中間代理頁面a_proxy.html,吧讀取到的寬和高設定到src的hash裡面

Html代碼複製代碼代碼如下:<iframe id="iframeProxy" height="0" width="0" src="http://www.a.com/html/a_proxy.html#width|height" style="display:none" ></iframe>

a_proxy.html是A域下提供好的中間代理頁面,它負責讀取location.hash裡面的width和height的值,然後設定與它同域下的a.html中的iframe的寬和高.

Js代碼複製代碼代碼如下:var pParentFrame = parent.parent.document.getElementById("aIframe");
var locationUrlHash = parent.parent.frames["aIframe"].frames["iframeProxy"].location.hash;
pParentFrame.style.width = locationUrlHash.split("#")[1].split("|")[0]+"px";
pParentFrame.style.height = locationUrlHash.split("#")[1].split("|")[1]+"px";
var pParentFrame = parent.parent.document.getElementById("aIframe");
var locationUrlHash = parent.parent.frames["aIframe"].frames["iframeProxy"].location.hash;
pParentFrame.style.width = locationUrlHash.split("#")[1].split("|")[0]+"px";
pParentFrame.style.height = locationUrlHash.split("#")[1].split("|")[1]+"px";

這樣的話a.html中的iframe就自適應為b.html的寬和高了.

其他一些類似js跨網域作業問題也可以按這個思路去解決

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More