欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

兼容多瀏覽器的iframe自適應高度(ie8 、谷歌瀏覽器4.0和 firefox3.5.3)

 更新時間：2009年11月04日 23:54:46   作者：  
iframe在ie8 、谷歌瀏覽器4.0和 firefox3.5.3均成功自適應高度.
小項目龍里中學多媒體教室管理系統(tǒng)中后臺管理用到了iframe.由于要動態(tài)載入內容,所以需要iframe自適應內容頁的高度.用谷歌搜索到很多答案,其中成功的是這段代碼
復制代碼 代碼如下:

<script type="text/javascript">
function SetCwinHeight() {
var iframeid = document.getElementById("maincontent1"); //iframe id
if (document.getElementById) {
if (iframeid && !window.opera) {
if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight) {
iframeid.height = iframeid.contentDocument.body.offsetHeight;
} else if (iframeid.Document && iframeid.Document.body.scrollHeight) {
iframeid.height = iframeid.Document.body.scrollHeight;
}
}
}
}
</script>

iframe代碼:
復制代碼 代碼如下:

<iframe style="z-index: 1; visibility: inherit; width: 100%;" name="maincontent1"
onload="Javascript:SetCwinHeight()" height="1" id="maincontent1" src="<%=ResolveClientUrl("~/message")%>"
marginwidth="0" marginheight="0" frameborder="0" scrolling="no"></iframe>

在IE8下成功實現自適應高度,但在谷歌瀏覽器高度只會增加,不會減少,也就是說,長高后就縮不回來.
那么各個瀏覽器的表現不太相同，單取哪個值都不對。但可以找到了一條規(guī)律，那就是取兩個值得最大值可以兼容各瀏覽器。所以我們的主頁面代碼就要改造成這樣了：
復制代碼 代碼如下:

function reinitIframe(){var iframe = document.getElementById("frame_content");
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
}catch (ex){}
}
window.setInterval("reinitIframe()", 200);

這樣子，基本解決了兼容性問題。順便說下，不光絕對定位的層會影響到值，float也會導致兩個值的差異。
如果你演示Demo后，會發(fā)現，除了IE，其他瀏覽器中，當層展開后再隱藏，取到的高度值還是維持在展開的高度303，而非隱藏回去的真正值184，就是說長高了之后縮不回去了。這個現象在不同被包含頁面之間做切換也會發(fā)生，當從高的頁面切換到矮頁面的時候，取到的高度還是那個高的值。
可以歸納為，當iframe窗體高度高于文檔實際高度的時候，高度取的是窗體高度，而當窗體高度低于實際文檔高度時，取的是文檔實際高度。因此，要想辦法在同步高度之前把高度設置到一個比實際文檔低的值。所以，在iframe的添加 onload=”this.height=100″，讓頁面加載的時候先縮到足夠矮，然后再同步到一樣的高度。
這個值，在實際應用中決定，足夠矮但又不能太矮，否則在FF等瀏覽器里會有很明顯的閃爍。DOM操作的時候主頁面無法監(jiān)聽到，只能DOM操作完了之后把高度變小了。
在我的一個實際項目中，在成本和收益之間權衡，我并沒有做這個事情，因為每個DOM函數中都要插入這個代碼，代價太高，其實層縮回去不縮掉也不是那么致命。包括Demo里，也沒有去做這個事情。如果讀者有更好的方法，請告訴我。
/**********************************原文引用結束***************************** /
請注意紅色的這句.讀到這里,我想在改變iframe.height之前可否先給 iframe.height賦一個夠小的初始值,如iframe.height="10px",然后再改變如iframe.height.這樣就解決了原文紅色部分的問題。
最終代碼如下:
復制代碼 代碼如下:

<script type="text/javascript">
function SetCwinHeight() {
var iframeid = document.getElementById("maincontent1"); //iframe id
iframeid.height = "10px";//先給一個夠小的初值,然后再長高.
if (document.getElementById) {
if (iframeid && !window.opera) {
if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight) {
iframeid.height = iframeid.contentDocument.body.offsetHeight;
} else if (iframeid.Document && iframeid.Document.body.scrollHeight) {
iframeid.height = iframeid.Document.body.scrollHeight;
}
}
}
}
</script>

iframe代碼仍然不變:
復制代碼 代碼如下:

<iframe style="z-index: 1; visibility: inherit; width: 100%;" name="maincontent1"
onload="Javascript:SetCwinHeight()" height="1" id="maincontent1" src="<%=ResolveClientUrl("~/message")%>"
marginwidth="0" marginheight="0" frameborder="0" scrolling="no"></iframe>

經測試,iframe在ie8 、谷歌瀏覽器4.0和 firefox3.5.3均成功自適應高度.

相關文章

最新評論