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

2019-11-21 00:21:09

字體：大中小

來源：轉載

供稿：網友

 
<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跨域操作問題也可以按這個思路去解決

上一篇：一個可綁定數據源的jQuery數據表格插件

下一篇：javascript下對于事件、事件流、事件觸發的順序隨便說說