JavaScript 處理Iframe自適應高度(同或不同域名下)
更新時間：2013年03月29日 17:29:12 作者：
Iframe自適應高度一直都備受關(guān)注，接下來為大家介紹下同域名下Iframe自適應高度的處理以及跨域時Iframe高度自適應，感興趣的朋友可以參考下哈
1.同域名下Iframe自適應高度的處理
<iframe onload="Javascript:SetIFrameHeight(this)" src="../Home/b" id="win" name="win" width="100%" height="1"> </iframe>
當然此處我用的是Asp.Net MVC 此處src設(shè)置為路由結(jié)構(gòu)
<script type="text/javascript">
function SetIFrameHeight(obj) {
var win = obj;
if (document.getElementById) {
if (win && !window.opera) {
if (win.contentDocument && win.contentDocument.body.offsetHeight)
win.height = win.contentDocument.body.offsetHeight;
else if (win.Document && win.Document.body.scrollHeight)
win.height = win.Document.body.scrollHeight;
}
}
}
</script>
用到的就是iframe嵌套的頁面加載完畢的時候，運用onload事件來獲取嵌套在iframe中網(wǎng)頁的高度，然后賦值給Iframe的高度即可。
2.跨域時Iframe高度自適應
在主頁面和被嵌套的iframe為不同域名的時候，就稍微麻煩一些，需要避開JavaScript的跨域限制。
原理：現(xiàn)有iframe主頁面main.html、被iframe嵌套頁面iframe.html、iframe中介頁面agent.html三個，通過main.html（域名為http://www.ccvita.com）嵌套iframe.html（域名為：http://www.phpq.net），當用戶瀏覽時執(zhí)行iframe.html中的JavaScript代碼設(shè)置iframeC的scr地址中加入iframe頁面的高度，agent.html（域名為：http://www.ccvita.com）取得傳遞的高度，通過JavaScript設(shè)置main.html中iframe的高度。最終實現(xiàn)預期的目標。
iframe主頁面main.html
[code]
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>iframe主頁面</title></head>
<body>
<div style="border:1px solid #ccc;padding:10px;">
<iframe id="frame_content" name="frame_content" src="iframe.html" width="100%" height="0" scrolling="no" frameborder="0"></iframe>
</div>
<br />尾部<br />
</body>
</html>
iframe嵌套頁面iframe.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>被iframe嵌套頁面</title></head>
<body>
文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<iframe id="iframeC" name="iframeC" src="" width="0" height="0" style="display:none;" ></iframe>
<script type="text/javascript">
function sethash(){
hashH = document.documentElement.scrollHeight;
urlC = "agent.html";
document.getElementByIdx("iframeC").src=urlC+"#"+hashH;
}
window.onload=sethash;
</script>
</body>
</html>
iframe中介頁面agent.html
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>iframe中介頁面</title></head>
<body>
<script>
function pseth() {
var iObj = parent.parent.document.getElementByIdx('frame_content');
iObjH = parent.parent.frames["frame_content"].frames["iframeC"].location.hash;
iObj.style.height = iObjH.split("#")[1]+"px";
}
pseth();
</script>
</body>
</html>
代碼里，kimi可能路徑表示不全
main.html 與 agent.html 是必須同一個域里
而iframe.html在另一個域
復制代碼 代碼如下:
<iframe onload="Javascript:SetIFrameHeight(this)" src="../Home/b" id="win" name="win" width="100%" height="1"> </iframe>
當然此處我用的是Asp.Net MVC 此處src設(shè)置為路由結(jié)構(gòu)
復制代碼 代碼如下:
<script type="text/javascript">
function SetIFrameHeight(obj) {
var win = obj;
if (document.getElementById) {
if (win && !window.opera) {
if (win.contentDocument && win.contentDocument.body.offsetHeight)
win.height = win.contentDocument.body.offsetHeight;
else if (win.Document && win.Document.body.scrollHeight)
win.height = win.Document.body.scrollHeight;
}
}
}
</script>
用到的就是iframe嵌套的頁面加載完畢的時候，運用onload事件來獲取嵌套在iframe中網(wǎng)頁的高度，然后賦值給Iframe的高度即可。
2.跨域時Iframe高度自適應
復制代碼 代碼如下:
在主頁面和被嵌套的iframe為不同域名的時候，就稍微麻煩一些，需要避開JavaScript的跨域限制。
原理：現(xiàn)有iframe主頁面main.html、被iframe嵌套頁面iframe.html、iframe中介頁面agent.html三個，通過main.html（域名為http://www.ccvita.com）嵌套iframe.html（域名為：http://www.phpq.net），當用戶瀏覽時執(zhí)行iframe.html中的JavaScript代碼設(shè)置iframeC的scr地址中加入iframe頁面的高度，agent.html（域名為：http://www.ccvita.com）取得傳遞的高度，通過JavaScript設(shè)置main.html中iframe的高度。最終實現(xiàn)預期的目標。
iframe主頁面main.html
[code]
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>iframe主頁面</title></head>
<body>
<div style="border:1px solid #ccc;padding:10px;">
<iframe id="frame_content" name="frame_content" src="iframe.html" width="100%" height="0" scrolling="no" frameborder="0"></iframe>
</div>
<br />尾部<br />
</body>
</html>
iframe嵌套頁面iframe.html
復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>被iframe嵌套頁面</title></head>
<body>
文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<iframe id="iframeC" name="iframeC" src="" width="0" height="0" style="display:none;" ></iframe>
<script type="text/javascript">
function sethash(){
hashH = document.documentElement.scrollHeight;
urlC = "agent.html";
document.getElementByIdx("iframeC").src=urlC+"#"+hashH;
}
window.onload=sethash;
</script>
</body>
</html>
iframe中介頁面agent.html
復制代碼 代碼如下:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>iframe中介頁面</title></head>
<body>
<script>
function pseth() {
var iObj = parent.parent.document.getElementByIdx('frame_content');
iObjH = parent.parent.frames["frame_content"].frames["iframeC"].location.hash;
iObj.style.height = iObjH.split("#")[1]+"px";
}
pseth();
</script>
</body>
</html>
代碼里，kimi可能路徑表示不全
main.html 與 agent.html 是必須同一個域里
而iframe.html在另一個域
您可能感興趣的文章:
- 關(guān)于div自適應高度/左右高度自適應一致的js代碼
- JS實現(xiàn)iframe自適應高度的方法示例
- JS實現(xiàn)很實用的對聯(lián)廣告代碼（可自適應高度）
- JS實現(xiàn)自適應高度表單文本框的方法
- js實現(xiàn)iframe自動自適應高度的方法
- 使用javascript實現(xiàn)Iframe自適應高度
- js控制iframe的高度/寬度讓其自適應內(nèi)容
- 兼容主流瀏覽器的iframe自適應高度js腳本
- Javascript 文本框textarea高度隨內(nèi)容自適應增長收縮
- js實現(xiàn)的真正的iframe高度自適應(兼容IE,FF,Opera)
- JS實現(xiàn)DIV高度自適應窗口示例
相關(guān)文章
這篇文章主要為大家詳細介紹了Bootstrap表單布局樣式源代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07
本文主要介紹了JavaScript模仿塊級作用域的方法，具有一定的參考價值。下面跟著小編一起來看下吧2016-12-12
我們都知道只有正確引用路徑,Typescript才不會提示報錯,這篇文章主要給大家介紹了關(guān)于typescript路徑別名問題詳解與前世今生的故事,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
這篇文章主要為大家詳細介紹了bootstrap laydate日期組件使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章介紹了javascript強大的日期函數(shù)代碼，有需要的朋友可以參考一下2013-09-09
這篇文章主要介紹了js Calender控件使用詳解,需要的朋友可以參考下2015-01-01
JavaScript常用數(shù)組操作方法,包含ES6方法
這篇文章主要介紹了JavaScript常用數(shù)組操作方法，包含ES6方法,本文分步驟給大家介紹的非常詳細，具有一定的參考借鑒借鑒價值，需要的朋友可以參考下2018-09-09
本文主要介紹了JavaScript制作年歷的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2012-05-05
這篇文章主要為大家詳細介紹了js實現(xiàn)簡單翻牌小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
uni-app使用uploadFile上傳多張圖片的具體實現(xiàn)
在微信小程序中不支持多張圖片上傳,需要做循環(huán)實現(xiàn)多張圖片上傳,下面這篇文章主要給大家介紹了關(guān)于uni-app使用uploadFile上傳多張圖片的具體實現(xiàn),需要的朋友可以參考下2023-04-04