快捷導(dǎo)航

如何設(shè)置iframe高度自適應(yīng)在跨域情況下的可用方法

更新時(shí)間：2013年09月06日 18:26:50 作者：

iframe的高度需要根據(jù)子頁(yè)面的實(shí)際高度來(lái)進(jìn)行調(diào)整，但是如果子頁(yè)面不在同一域中怎么辦？這時(shí)候腳本沒(méi)有辦法獲取到子頁(yè)面的高度，存在JavaScript跨域的問(wèn)題

在頁(yè)面上使用iframe來(lái)動(dòng)態(tài)加載頁(yè)面內(nèi)容是網(wǎng)頁(yè)開(kāi)發(fā)中比較常見(jiàn)的方法。在父頁(yè)面中給定一個(gè)不帶滾動(dòng)條的iframe，然后對(duì)屬性src指定一個(gè)可加載的頁(yè)面，這樣當(dāng)父頁(yè)面被訪問(wèn)的時(shí)候，子頁(yè)面可以被自動(dòng)加載。iframe的高度需要根據(jù)子頁(yè)面的實(shí)際高度來(lái)進(jìn)行調(diào)整。如果iframe的高度小于子頁(yè)面的實(shí)際高度，超出的部分無(wú)法顯示；相反，如果iframe的高度過(guò)高，則頁(yè)面上會(huì)出現(xiàn)大量的空白區(qū)域。我們可以通過(guò)屬性或者CSS來(lái)設(shè)置iframe的高度，當(dāng)不確定子頁(yè)面內(nèi)容的高度時(shí)，也可以通過(guò)腳本來(lái)進(jìn)行動(dòng)態(tài)指定。但是如果子頁(yè)面不在同一域中怎么辦？這時(shí)候腳本沒(méi)有辦法獲取到子頁(yè)面的高度，存在JavaScript跨域的問(wèn)題！

如題所述，本文在介紹可用方法的同時(shí)，也向大家詢(xún)問(wèn)除下文列出來(lái)的方法之外是否還有其它方法可尋？

通過(guò)屬性或CSS來(lái)設(shè)置iframe的高度這里就不再具體介紹了。首先來(lái)看看如何通過(guò)腳本進(jìn)行設(shè)置。

復(fù)制代碼代碼如下:

 
function ChangeFrameHeight(id) { 
var count = 1; 

(function() { 
var frm = document.getElementById(id); 
var subWeb = document.frames ? document.frames[id].document : frm.contentDocument; 

if (subWeb != null) { 
var height = Math.max(subWeb.body.scrollHeight, subWeb.documentElement.scrollHeight); 
frm.height = height; 
} 
if (count < 3) { 
count = count + 1; 
window.setTimeout(arguments.callee, 2000); 
} 
})(); 
} 

假設(shè)iframe子頁(yè)面和父頁(yè)面都在同一域內(nèi)，通過(guò)該腳本可以對(duì)給定id的iframe高度進(jìn)行動(dòng)態(tài)調(diào)整。為了防止父頁(yè)面在子頁(yè)面之前加載完成，該函數(shù)會(huì)每隔2秒重新執(zhí)行一次，一共執(zhí)行3次。極端情況下子頁(yè)面的加載速度會(huì)慢于父頁(yè)面，可適當(dāng)對(duì)執(zhí)行次數(shù)和時(shí)間做調(diào)整。

復(fù)制代碼代碼如下:

 
<iframe frameborder="0" width="450" marginheight="0" marginwidth="0" scrolling="no" id="frm1" name="frm1" src="abc.html" onload="ChangeFrameHeight('frm1')"></iframe> 

如果遇到子頁(yè)面跨域的問(wèn)題，可通過(guò)HTML5的postMessage來(lái)實(shí)現(xiàn)，但前提是子頁(yè)面需要主動(dòng)向父頁(yè)面發(fā)送信息。下面是子頁(yè)面部分：

復(fù)制代碼代碼如下:

 
<!DOCTYPE html> 
<head> 
</head> 
<body onload="parent.postMessage(document.body.scrollHeight, 'http://target.domain.com');"> 
<h3>Got post?</h3> 
<p>Lots of stuff here which will be inside the iframe.</p> 
</body> 
</html> 

在父頁(yè)面中獲取到子頁(yè)面?zhèn)鬟f過(guò)來(lái)的信息，然后對(duì)iframe的高度進(jìn)行調(diào)整。

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
function resizeCrossDomainIframe(id, other_domain) { 
var iframe = document.getElementById(id); 
window.addEventListener('message', function(event) { 
if (event.origin !== other_domain) return; // only accept messages from the specified domain 
if (isNaN(event.data)) return; // only accept something which can be parsed as a number 
var height = parseInt(event.data) + 32; // add some extra height to avoid scrollbar 
iframe.height = height + "px"; 
}, false); 
} 
</script> 

<iframe src='abc.html' id="frm1" onload="resizeCrossDomainIframe('frm1', 'http://example.com');"> 
</iframe> 

有關(guān)如何使用HTML5的postMessage()方法可以查看這篇文章http://dev.w3.org/html5/postmsg/#web-messaging

但是在大多數(shù)情況下，iframe中所引用的子頁(yè)面除了和父頁(yè)面不在同一域之外，我們可能根本無(wú)法對(duì)子頁(yè)面進(jìn)行任何操作，或者說(shuō)子頁(yè)面根本沒(méi)有提供Corss-document messaging功能。在這種情況下，通過(guò)postMessage()方法也無(wú)法獲取到子頁(yè)面的任何信息。由于無(wú)法和子頁(yè)面進(jìn)行任何交互，也就沒(méi)有辦法得知子頁(yè)面的document對(duì)象，從未無(wú)法根據(jù)子頁(yè)面的實(shí)際高度來(lái)調(diào)整父頁(yè)面iframe的height屬性了。

目前沒(méi)有其它實(shí)際有效的方法來(lái)處理上面遇到的問(wèn)題。默認(rèn)情況下可以給iframe指定一個(gè)比較大的高度，這樣假設(shè)所引用的子頁(yè)面內(nèi)容不會(huì)超出范圍，除了在頁(yè)面上會(huì)留下部分空白區(qū)域外，內(nèi)容顯示基本不會(huì)有問(wèn)題。

那是否還存在其它比較有效的解決方法呢？期待！

您可能感興趣的文章: