iframe 跨域高度自適應

admin發表於2018-12-23
原文網址 : https://www.softwhy.com/article-9777-1.html
跨域

在實際應用中，很多時候通過<iframe>引入頁面，如果同域情況，可以使用以下程式碼。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script type="text/javascript">  
window.onload=function(){ 
  var ifm= document.getElementById("iframepage");  
  var subWeb = document.frames ? document.frames["iframepage"].document:ifm.contentDocument;  
  if(ifm != null && subWeb != null){  
    ifm.height = subWeb.body.scrollHeight;  
  }  
} 
</script>  
</head> 
<body> 
<iframe src="iframe.html" id="iframepage" name="iframepage" width="100%"></iframe> 
</body> 
</html>

以上程式碼可以實現我們的要求，但是很多時候通過iframe引入的頁面是跨域的，上面的程式碼就不起作用，這是因為在引入外部頁面的過程中，由於跨域安全問題會導致報錯，如下:

aid[2783]

因而會導致設定高度的程式碼無法得到執行，也就無從談起高度自適應了，可以改變一下思路實現此功能。

我們可以通過一個“中介”來完成此任務。

比如在域A中有一個頁面a.html，我們要引入域C中的頁面c.html，這樣我們可以在域A中再建立一個“中介”頁面b.html,作為c.html的子頁面，然後獲取一些相關資訊，最後通過b.html來實現設定a.html中iframe高度的效果，因為b和a是在同域下的，所以不存在安全障礙。

c.html中的程式碼如下:

[HTML] 純文字檢視 複製程式碼
<iframe id="b_id" width="100%" src="http://域A/b.html" style="display:none"> </iframe>   
<script type="text/javascript">     
var c_height=Math.max(document.body.scrollHeight,document.body.clientHeight);     
var b_iframe = document.getElementById("b_id");     
b_iframe.src =  b_frame.src+"#"+b_height;  
</script>

通過url，為"中介"頁面b.html傳遞了c.html的高度資訊，這個高度就是a.html中iframe的自適應高度。

b.html中的程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
//得到a.html中的a_iframe  
var a_iframe=parent.parent.document.getElementById("a_iframe");   
var hash_url = window.location.hash;   
//得到傳遞過來的height屬性  
var hash_height = hash_url.split("#")[1]+"px";  
//調整a_iframe的height，達到自適應   
a_iframe.height = hash_height;

綜上所述，就可以實現跨域iframe高度自適應效果了。

相關文章