网上收集的关于iframe的自适应高度代码js的
生活随笔
收集整理的這篇文章主要介紹了
网上收集的关于iframe的自适应高度代码js的
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<一>這個是我第一個用的不是很靈驗，也沒去研究：代碼-->
1<iframe?name="ifrName"?src="targetName.htm"?frameborder=false?scrolling="auto"?width="100%"?height="100%"?frameborder=no?onload="document.all['ifrName'].style.height=ifrName.document.body.scrollHeight"?></iframe> <二>這個現在正在用，感覺很管用，perfect!:code--><iframe?name="main"?src="Welcome.aspx"?frameborder="0"?width="100%"?onload="this.height=this.contentWindow.document.body.scrollHeight"
????????????????allowtransparency="true"?scrolling="no"></iframe> <三>還有個比較狠的，聽說在FF也管用，暫時不考慮那個只貼出來 code -->
第一步 js部分
function getSize() {
?????? var xScroll, yScroll;???????
?????? if (window.innerHeight && window.scrollMaxY) {???????
????????????? xScroll = document.body.scrollWidth;
????????????? yScroll = window.innerHeight + window.scrollMaxY;
?????? } else if (document.body.scrollHeight > document.body.offsetHeight){?????? // all but Explorer Mac
????????????? xScroll = document.body.scrollWidth;
????????????? yScroll = document.body.scrollHeight;
?????? } else {?????? // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
????????????? xScroll = document.body.offsetWidth;
????????????? yScroll = document.body.offsetHeight;
?????? }
?????? var windowWidth, windowHeight;
?????? if (self.innerHeight) {?????? // all except Explorer
????????????? windowWidth = self.innerWidth;
????????????? windowHeight = self.innerHeight;
?????? } else if (document.documentElement && document.documentElement.clientHeight) {?????? // Explorer 6 Strict Mode
????????????? windowWidth = document.documentElement.clientWidth;
????????????? windowHeight = document.documentElement.clientHeight;
?????? } else if (document.body) {?????? // other Explorers
????????????? windowWidth = document.body.clientWidth;
????????????? windowHeight = document.body.clientHeight;
?????? }???????
?????? // for small pages with total height less then height of the viewport
?????? if(yScroll < windowHeight){
????????????? pageHeight = windowHeight;
????????????? y = pageHeight;
?????? } else {?
????????????? pageHeight = yScroll;
????????????? y = pageHeight;
?????? }
?????? if(xScroll < windowWidth){???????
????????????? pageWidth = windowWidth;
?????? } else {
????????????? pageWidth = xScroll;
?????? }
?????? arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)?
?????? return arrayPageSize;
}
這段代碼用來獲取目標頁的參數，包括頁面高、寬，屏幕高、寬
function autoHeight(pid) {
?????? var x = new getSize();
?????? parent.document.getElementById(pid).height=x[1];
}
這段代碼用來實現父頁面中iframe的高度自適應
\\\\\\\\\\
第二步 頁面部分
<div class="onright" style="width:480px;"><iframe id="infrm" name="infrm" marginwidth="0" marginheight="0" width="100%" src="park.htm" frameborder="0" scrolling="auto"></iframe>
這是父頁面的iframe，沒什么特別的，和普通的iframe一樣，不過要設置好id值，以便子頁面的參數調用。
<body οnlοad="autoHeight('infrm')"></body>
在body中利用onload事件，將自身的高度傳給父頁面的iframe。
本文來自: 腳本之家(www.jb51.net) 詳細出處參考：http://www.jb51.net/article/10616.htm
<四>這個是個比較劣質的東西，說是在根目錄下管用，嘿嘿? this is code: <script?type="text/javascript">
function?SetWinHeight(obj)
{
????var?win=obj;
????if?(document.getElementById)
????{
????????if?(win?&&?!window.opera)
????????????{
????????????????if?(win.contentDocument?&&?win.contentDocument.body.offsetHeight)?win.height?=?win.contentDocument.body.offsetHeight;
????????????????else?if(win.Document?&&?win.Document.body.scrollHeight)
????????????????win.height?=?win.Document.body.scrollHeight;
????????????}
????}
}
</script>?
<iframe?frameborder="0"?name="win"?id="win"?src="index.html"?onload="Javascript:SetWinHeight(this)"?align="top"?width="100%"?scrolling="no"></iframe>
轉載于:https://www.cnblogs.com/Longkin/archive/2008/05/17/1201375.html
總結
以上是生活随笔為你收集整理的网上收集的关于iframe的自适应高度代码js的的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 致歉
- 下一篇： Windows XP SP2疑难速解50