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)文章
JavaScript實現(xiàn)字符串轉(zhuǎn)數(shù)組的6種方法總結(jié)
數(shù)組是?JavaScript?中最強大的數(shù)據(jù)結(jié)構(gòu),我們常常通過將字符串轉(zhuǎn)換為數(shù)組來解決許多算法。本文為大家總結(jié)了6個JS字符串轉(zhuǎn)數(shù)組的方法,希望對你有所幫助2022-09-09Javascript 類型轉(zhuǎn)換、封閉函數(shù)及常見內(nèi)置對象操作示例
這篇文章主要介紹了Javascript 類型轉(zhuǎn)換、封閉函數(shù)及常見內(nèi)置對象操作,結(jié)合實例形式分析了JavaScript類型顯示轉(zhuǎn)換、隱式轉(zhuǎn)換、變量作用域、封閉函數(shù)及常用內(nèi)置對象相關(guān)操作技巧,需要的朋友可以參考下2019-11-11JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL錯誤的解決方法
這篇文章主要介紹了JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL錯誤的解決方法,涉及針對字符串參數(shù)的處理方法,需要的朋友可以參考下2016-08-08微信小程序授權(quán)登錄實現(xiàn)方案wx.getUserProfile(2022年最新版)
微信在最近開始要求使用wx.getUserProfile()來獲取用戶的昵稱,頭像等信息,所以下面這篇文章主要給大家介紹了關(guān)于2022年最新版微信小程序授權(quán)登錄實現(xiàn)方案wx.getUserProfile的相關(guān)資料,需要的朋友可以參考下2022-11-11獲取當前網(wǎng)頁document.url location.href區(qū)別總結(jié)
請教:document.URL和window.location.href區(qū)別2008-05-05