`
mayijun000
  • 浏览: 66987 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

iframe页面布局、菜单、自定义高度

 
阅读更多

  最近用到iframe页面布局,解决了页面加载慢的问题,分成了上中下三层,结果遇到网上很多人遇到的问题。

 

  1、下拉菜单因为高度问题向上显示了,

于是我把它放在了外面,其余用iframe,就不会出现问题了。

  2、可是又遇到了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 

 

 

它会自动添加默认样式,覆盖原有的样式。因为我写的iframe的自适应高度的方法用到了。方法如下

 

function reinitIframe(iframe){
 var bHeight = iframe.contentWindow.document.body.scrollHeight; var dHeight = iframe.contentWindow.document.documentElement.scrollHeight; 
//var blankHeight = iframe.contentDocument.body.scrollHeight; 
var height = Math.max(bHeight, dHeight);
 try{ 
iframe.height = bHeight; 
//iframe.height = blankHeight; //适应内部页面的大小 
}catch (ex){ 
alert(ex+">>>>>>>>>>>>>>error0000"); 
} 
} 

 

后来发现可以用另外的方式实现:

function reinitIframe(iframe){
		var win=iframe;
		var minheight = 200;
		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)
				   
							if(minheight<win.Document.body.scrollHeight){
								win.height = win.Document.body.scrollHeight;
							}else{
								win.height =minheight;
							}
	}

}
}

 

这样问题就解决了。

 

3、用了iframe之后,每次刷新页面都会跳转到首页,要是只刷新iframe就好了,于是写了下面的方法:

var check=function(e){ 

    e=e||window.event;  

    if((e.which||e.keyCode)==116){ 

       if(e.preventDefault){ 

           e.preventDefault(); 

           window.frames["mainFrame"].location.reload(); 

           } else{

              event.keyCode = 0; 

              e.returnValue=false; 

              window.frames["mainFrame"].location.reload(); 

              } } } 

if(document.addEventListener){ 

    document.addEventListener("keydown",check,false); 

    } else{ 

       document.attachEvent("onkeydown",check); 

       } ;

  

4、当有弹出框的时候,如果子页面调用父页面的方法,那么就调用

 

 

window.parent.document.mainFrame.user()//mainFrame父页面的iframe名称,user()父页面的方法 

 5、iframe局部跳转

window.frames[i].location.href=url//i表示第几个iframe

 

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics