在首页设置了一个iframe和div,在不同的button中定义了onclick事件(把不同的url赋给src,再把iframe的innerHtml赋给DIV,在首页上显示DIV)。
document.getElementById("abc").src=url;
setTimeout(temp,1000,event,id);//显示DIV的函数
现在的问题是iframe没有完全加载完毕DIV就显示出来了,所以都显示的是上次点击加载的页面内容。我把代码改成
document.getElementById("abc").src=url;
alert('');
setTimeout(temp,1000,event,id);//显示DIV的函数之后就没问题了,能正确显示。网上判断IFRAME加载完毕的方法大概都试了,一旦把ALERT去掉DIV显示的内容顺序就有错。有没有高人指点下。
还有我换成直接在IFRAME里显示不同的内容,但IFRAME出现滚动条,不能自适应大小。
网上的写法也差不多都试了,也不对。有没有高人指点下。
document.getElementById("abc").src=url;
setTimeout(temp,1000,event,id);//显示DIV的函数
现在的问题是iframe没有完全加载完毕DIV就显示出来了,所以都显示的是上次点击加载的页面内容。我把代码改成
document.getElementById("abc").src=url;
alert('');
setTimeout(temp,1000,event,id);//显示DIV的函数之后就没问题了,能正确显示。网上判断IFRAME加载完毕的方法大概都试了,一旦把ALERT去掉DIV显示的内容顺序就有错。有没有高人指点下。
还有我换成直接在IFRAME里显示不同的内容,但IFRAME出现滚动条,不能自适应大小。
网上的写法也差不多都试了,也不对。有没有高人指点下。
在网上曾看见过解决此问题的代码,不过拷贝到本地进入调试时有些不正常,在IE下无法正确获得嵌套页面的高度,通过各种尝试,最终代码如下:<script type="text/javascript">
function SetCwinHeight(iframeObj){
if (document.getElementById){
if (iframeObj && !window.opera){
if (iframeObj.contentDocument && iframeObj.contentDocument.body.offsetHeight){
iframeObj.height = iframeObj.contentDocument.body.offsetHeight;
}else if(document.frames[iframeObj.name].document && document.frames[iframeObj.name].document.body.scrollHeight){
iframeObj.height = document.frames[iframeObj.name].document.body.scrollHeight;
}
}
}
}
</script>
<iframe width="100%" name="frameContent" onload="SetCwinHeight(this)" frameborder="0" src="*"></iframe> 扩展:在一个页面含有某个iframe,其id="myframe" name="myframe",此时使用document.getElementById("myframe")取到的是iframe标签对象,通过该对象可以获取iframe的各个属性,例如src、frameborder、style等等,但是不能获取到iframe所包含的子页面的各个对象。如果使用document.frames("myframe")取到的是iframe组件对象,通过该对象可以获取到iframe所包含的页面的子页面的各个对象,例如子页面的window对象,但是不能获得iframe标签得各个属性,例如上面说到的src等等。
test.htm
<div id="divContent"></div><!---显示内容的div---->
<!---给iframe加上onload事件---->
<iframe style="display:none" id="loadIf" name="loadIf" onload="LoadIf()" src="javascript:void(0)"></iframe><br />
<a href="1.htm" target="loadIf">1.htm</a><br />
<a href="2.htm" target="loadIf">2.htm</a><script>
//注意不能跨域,要不会出现没有权限的错误
var ie=!!document.all;
function LoadIf(){
var doc;
if(ie)doc=frames['loadIf'].document;
else doc=document.getElementById("loadIf").contentWindow.document;
document.getElementById("divContent").innerHTML=doc.body.innerHTML
}</script>1.htm
1.htm的内容2.htm
2.htm的内容