Iframe自適應高度 同域/跨域
最近項目里要用到Iframe自適應高度的問題，當時就隨手百度一搜，真的一大把抓，但是發現代碼到我手里只要訪問下屬網站的dom屬性時就都報“沒有權限 ，拒絕訪問”的錯誤，頭大了，后來發現，原來是http安全因素的考慮，不允許跨域訪問其他網站的屬性，想想也是，不然，誰還不都可以訪問其他的網站后一頓子亂改去。現把網上收集的解決方法整理一下。
1:同域
在同一個域名下，安全因素不是問題，自己訪問自己的dom屬性是允許的。直接貼網上的代碼：
<iframe id="iframepage" name="iframepage" frameborder="0" scrolling="no" width="100%" src="/controller/action" onLoad="SetCwinHeight(this)">
</iframe>
View Code
1 function SetCwinHeight(iframeObj) { 2 if (document.getElementById) { 3 if (iframeObj) { 4 this.height = iframepage.document.body.scrollHeight; 5 if (iframeObj.contentDocument && iframeObj.contentDocument.body.offsetHeight) { 6 iframeObj.height = iframeObj.contentDocument.body.offsetHeight + 20; 7 } else if (document.frames[iframeObj.name].document && document.frames[iframeObj.name].document.body.scrollHeight) { 8 iframeObj.height = document.frames[iframeObj.name].document.body.scrollHeight + 20; 9 } 10 } 11 } 12 }
網上還有很多其他的同域自適應高度的代碼。。。
2：跨域
感謝網上各位大蝦的博文，不然我還在找門。。。下面是自己的學習心得。
實現原理：比如現在有兩個網站域名分別為A.com; B.com; A網站有個Iframe，需要把B網站放到該Iframe中，但是Iframe的高度 得先獲取B網站的頁面高度，然后根據所獲取的高度來修改A網站Iframe的高度值。 1： 是要在B網站（即下屬網站）獲取自己的頁面的高度， 2：B網站沒權限修改A網站的高度，需要一個中間頁面，該中間頁面可以修改A網站的高度，so.這個中間頁面必須與A網站在同一個域下。
A網站的關鍵代碼：
<iframe id="iframepage" name="iframepage" frameborder="0" scrolling="no" width="100%" src="@ViewData["urlstr"]">
</iframe> //src是B網站的頁面地址
B網站的關鍵代碼：
在B網站下也加一個iframe,該iframe是為了導向A網站的中間頁面，從而改掉A網站的Iframe高度。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
$(function () {
hashH = document.documentElement.scrollHeight;
urlC = "http://www.joantest.com:9001/Home/Agent"; //為A域名的中間頁面，此處一定要用域名，不能用Ip
document.getElementById("MiddleIframe").src=urlC+"#"+hashH;
});
</script>
</head>
<body>
<div class="topTitle">
.....
</div>
@RenderBody()
<iframe id="MiddleIframe" name="MiddleIframe" src="http://www.joantest.com:9001/Home/Agent" width="0" height="0" style="display: none;">
</iframe>
</body>
</html>
中間頁面的關鍵代碼：
該頁面是在A域名下的一個文件，由上面的src知道我就是在A網站的HomeController下開了個Agent的方法
<script type="text/javascript">
$(function () {
var iObj = parent.parent.document.getElementById('iframepage'); //找到該域下的iframe然后修改其值
iObjH = parent.parent.frames["iframepage"].frames["MiddleIframe"].location.hash;
iObj.style.height = iObjH.split("#")[1] + "px";
});
</script>
這樣就已經修改好了，但是在“為A域名的中間頁面，此處一定要用域名，不能用Ip”這個地方的src,在一般的局域網的同一個網段內，一般都是IP地址訪問網站的，所以這個地方還需要做一個域名映射，方法如下：
在“C:\Windows\System32\drivers\etc”路徑下，打開 hosts 文件
增加要映射的網址的域名即可： #表示注釋
