前言:最近在編寫html5-handbook時遇到ifarme自適應高度問題,查看了衆多技術大牛的博文,在此總結如下:
iframe通信問題(服務器端訪問)
iframe同域通信
- 實例主頁面調用iframe頁面函數
主頁面
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>frame自適應高度</title>
</head>
<body>
<div id="test">我是主頁面</div>
<iframe src="iframe.html" id="iframe" width="100%" frameborder="0"></iframe>
<script type="text/javascript">
function A(){
alert("A");
}
//iframe加載完畢執行回調函數
function iframeIsLoad(iframe,callback){
if(iframe.attachEvent){
iframe.attachEvent('onload',function(){
callback && callback();
});
}else{
iframe.onload = function(){
callback && callback();
}
}
}
var iframe = document.getElementById('iframe');
iframeIsLoad(iframe,function(){
var object = document.getElementById('iframe').contentWindow;
object.b();
});
</script>
</body>
</html>
iframe頁面
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>frame自適應高度</title>
</head>
<body>
<p>我是iframe<p>
<script type="text/javascript">
function b(){
alert("b");
}
self.parent.A();
alert(self.parent.document.getElementById("test"));
</script>
</body>
</html>
- 通過子頁面操作父頁面
執行函數:self.parent.A()
獲取元素:self.parent.document.getElementById(“id”);
執行順序顯而易見!
iframe跨域通信
本人知識有限,暫不討論
iframe自適應高度
同域自適應高度
方法一思路:在iframe頁面獲取被嵌套iframe元素,通過JavaScript取得被嵌套頁面最終高度;調用主頁面函數進行設置iframe高度
注意
iframe頁面獲取高度,本人在這範二了;不過即使發現。頁面高度參考
主頁面
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>frame自適應高度</title>
</head>
<body>
<div id="test">我是主頁面</div>
<iframe src="iframe1.html" id="iframe" width="100%"></iframe>
<script type="text/javascript">
function iframeAutoHeight(height){
var iframe = document.getElementById("iframe");
iframe.style.height = height + "px";
}
</script>
</body>
</html>
iframe頁面
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>frame自適應高度</title>
</head>
<body>
<p>我是iframe<p>
<p>我是iframe<p>
<p>我是iframe<p>
<p>我是iframe<p>
<p>我是iframe<p>
<p>我是iframe<p>
<p>我是iframe<p>
<p>我是iframe<p>
<p>我是iframe<p>
<p>我是iframe<p>
<p>我是iframe<p>
<p>我是iframe<p>
<p>我是iframe<p>
<p>我是iframe<p>
<p>我是iframe<p>
</body>
<script type="text/javascript">
var iframeBodyHeight = document.body.scrollHeight;
self.parent.iframeAutoHeight(iframeBodyHeight);
</script>
</html>
方法二思路:在iframe頁面獲取自身document.body.scrollHeight函數;回調函數進行設置iframe高度
時間有限,方法二代大家可以自己試試
跨域自適應高度
本人知識有限,暫不討論