在頁面上使用iframe來動態加載頁面內容是網頁開發中比較常見的方法。在父頁面中給定一個不帶滾動條的iframe，然后對屬性src指定一個可加載的頁面，這樣當父頁面被訪問的時候，子頁面可以被自動加載。iframe的高度需要根據子頁面的實際高度來進行調整。如果iframe的高度小于子頁面的實際高度，超出的部分無法顯示；相反，如果iframe的高度過高，則頁面上會出現大量的空白區域。我們可以通過屬性或者CSS來設置iframe的高度，當不確定子頁面內容的高度時，也可以通過腳本來進行動態指定。但是如果子頁面不在同一域中怎么辦？這時候腳本沒有辦法獲取到子頁面的高度，存在JavaScript跨域的問題！
如題所述，本文在介紹可用方法的同時，也向大家詢問除下文列出來的方法之外是否還有其它方法可尋？
通過屬性或CSS來設置iframe的高度這里就不再具體介紹了。首先來看看如何通過腳本進行設置。
復制代碼 代碼如下:
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);
}
})();
}
復制代碼 代碼如下:
<iframe frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src="abc.html"></iframe>
復制代碼 代碼如下:
<!DOCTYPE html>
<head>
</head>
<body>
<h3>Got post?</h3>
<p>Lots of stuff here which will be inside the iframe.</p>
</body>
</html>
復制代碼 代碼如下:
<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'>
</iframe>
新聞熱點
疑難解答
圖片精選
