让iframe自适应大小 解决方案

 
第一种:
<iframe name="src" width="100%" frameborder=0 scrolling=no src='admin.htm?catId=<c:out value="${model.l}" />'
        onload="this.height =   document.frames['src'].document.body.scrollHeight" />

例子:
1,创建页面 test.html 。 页面中含有一个 iframe,name为 ifrname ,id为 ifrid, src 为 iframe.html页面。
<iframe src="ifarme.html" name="ifrname" height="" style="" onload="" id="ifrid"   scrolling=""> </iframe>

2,创建 iframe.html 页面,里面含有一些内容。
<p>
这是iframe页面,通过在父窗口页面或子页面添加JS来自动更改宽高,以适应内容的多少。
</p>
要想使iframe自动适应宽和高,可以在 test.html 页面iframe onload处增加一些JS代码。如:
   <iframe src="ifarme.html" name="ifrname" height="" style="" onload="this.height =   document.frames["ifrname"].document.body.scrollHeight" id="ifrid"   scrolling=""></iframe>

这样iframe即可以自动适应高度了。如果不在onload处增加js,那也可以放到页面上来调用。比如写个函数。
<script>
function setAutoHeight(iframeElement,   iframeWindow) {
iframeElement.style.height = iframeWindow.document.body.scrollHeight;
iframeElement.style.width   =   iframeWindow.document.body.scrollWidth   ;
// 或者
// iframeElement.height = iframeWindow.document.body.offsetHeight ;
// iframeElement.width   =   iframeWindow.document.body.offsetWidth;

}
//调用函数setAutoHeight();
setAutoHeight( document.getElementById("iframeid"), window.frames[0]   );
</script>
这样也可以达到自适应高宽的目的,在这里要注意的是,iframeElement参数必须是 document.getElementById("iframeid"), iframeWindow参数是 window.frames[0] 或document.frames["ifrname"]。这是因为通过name得到的对象是窗口(window)对象,非窗口里的iframe对象。同时document.getElementById("iframeid)不能像window对象可以得到window.document。
所以这里最好给iframe分别加上name和id,id用来更改宽高样式属性,name用来执行window相关事件如location.href,document.write。bgColor例外,元素对象和窗口对象都可以得到,这是因为他们都有这个属性。
如果要隐藏iframe滚动条,可以设置iframeWindow.scrolling = "no";但这不能兼容多个浏览器,用iframeElement.document.body.style.overflow = "hidden";这种或直接在iframe处增加scrolling="no" html代码就可以很好地兼容了。
3,如果不能修改父页面,而只能把代码增加在iframe页面里呢?
可以写个类似函数,放在iframe页面里:
<script>
function setAutoHeight( parentIframeElement, slefDocument ){
slefDocument.style.overflow = "hidden";           // 隐藏全部滚动条
// document.body.style.overflowY = "hidden";   // 没有竖滚动条
parentIframeElement.style.height = slefDocument.scrollHeight;
parentIframeElement.style.width   =   slefDocument.scrollWidth;
}
// 在页面最后执行
setAutoHeight(parent.document.getElementById("ifrid"), document.body);
// 或onload时执行
//window.onload = function() {
//    setAutoHeight(parent.document.getElementById("ifrid"), document.body);
//}
// 或者超时执行
// setTimeout(
//    function() {
//      setAutoHeight(parent.document.getElementById("ifrid"), document.body);
//   },
// 200 );
</script>

4,在线通过iframe更改父窗口里iframe的宽高,因为安全原因会有跨域的问题,若是不在同一域名,那是被禁止的。如果同在一个域名下,但2级域名不同,比如a.yourcompany.com 和b.yourcompany.com。
这时可以通过重新设置document.domain 来跨越2级域名。
var domain = "yourcompany.com";
try {
    if( document.domain.indexOf(domain)   != -1 ) {
      document.domain = domain;                   // set new document.domain;
    }
} catch (ex) {
    alert("error: " + ex.toString() );
}
如果域名含有yourcompany.com,则改将document.domain改为yourcompany.com。

第二种:

<script language="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 width="200" src="/1.html" id="JKPlus_win" name="JKPlus_win" scrolling="no" frameborder="0" onload="Javascript:SetWinHeight(this)"></iframe>
第三种:
<iframe width="190" id="test" src="gsw.php" frameborder="0" scrolling="no"></iframe></marquee><script type="text/javascript">
var iframeids=["test"]
var iframehide="yes"
function dyniframesize()
{
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++)
{
if (document.getElementById)
{
dyniframe[dyniframe.length] = document.getElementById(iframeids[i]);
if (dyniframe[i] && !window.opera)
{
dyniframe[i].style.display="block"
if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight)
dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight;
else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight)
dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;
}
}
if ((document.all || document.getElementById) && iframehide=="no")
{
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display="block"
}
}
}

if (window.addEventListener)
window.addEventListener("load", dyniframesize, false)
else if (window.attachEvent)
window.attachEvent("onload", dyniframesize)
else
window.onload=dyniframesize
</script>
 第四种:
<script language="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 width="200" src="/1.html" id="JKPlus_win" name="JKPlus_win" scrolling="no" frameborder="0" onload="Javascript:SetWinHeight(this)"></iframe>
阅读更多
个人分类: JavaScript
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭