iframe应用

1.项目任务:将导航提取为公共页面,节省代码量,可维护!

2.新建一个main.jsp页面,将页面分为两部分,嵌入iframe标签

        <!-- 导航iframe top.jsp -->
	<iframe src="top" frameborder="0" scrolling="no" height="300px;" width="100%" allowTransparency="true" style="position:fixed;z-index:1001;right: 0; top: 0">
	</iframe> 
	<!-- 内容iframe cleanzone.jsp -->
	<iframe src="home" id="iframepage"  name="iframepage" frameborder="0" scrolling="no" width="100%" height="100%"  onLoad="iFrameHeight()">
	</iframe>
3.内容部分不能自适应高度,解决代码如下

<script type="text/javascript" language="javascript">
//iframe自适应高度
 function iFrameHeight() 
 {
     var ifm= document.getElementById("iframepage");
     var subWeb = document.frames ? document.frames["iframepage"].document :ifm.contentDocument;
     if(ifm != null && subWeb != null) 
     {
    	 ifm.height = subWeb.body.scrollHeight;
     }

 }
</script>
<iframe src="home" id="iframepage"  name="iframepage" frameborder="0" scrolling="no" width="100%" height="100%"  onLoad="iFrameHeight()">
引用javaScript后,将 id name onLoad 加入到你要自适应的iframe标签下即可

4.top导航页面想实现浮动到另一个iframe上,不随着滚动条滚动,解决如下

在要实现的iframe上加上

style="position:fixed;z-index:1001;right: 0; top: 0"  

即可!

5.由于我的导航高度的设定,菜单的下拉选框没有全部显示,解决如下

遇到这种情况,要进行iframe的背景透明即可。

在要背景透明的iframe标签中加入

 allowTransparency="true" 

然后在引用的页面 body标签中加入

background-color:transparent;

即可!


6.关于在iframe嵌套子页,子页面页面过期后,一些链接的登录框在子页面显示的问题

我想许多朋友肯定也会遇到相同的问题:当使用iframe后,框架是:上左右结构的。上是一排菜单呀logo呀。左边是详细的菜单选项。右边是内容的显示。都是通过菜单链接进入右边内容显示区。这种在信息系统里面比较普遍。问题在于,由于session过期,再次操作需要重新登录进入系统。也就是说整个页面需要跳到login的登录界面。但是。由于在详细菜单中设置了target=“***”,诸如类似的东西。就导致,session过期后,login的登录页面就在整个框架的右边的内容区显示。相当的不爽。这个问题是个小问题。如果突然遇到。网上找答案,很是费力。下面是一段小代码。也许可以解决你的问题:


在login的登录页面中嵌入下面的js代码

<scriptlanguage="JavaScript">            
    if (window != top)                      
          top.location.href =location.href;
</script>


7. iframe透明挡住了另一个iframe的 效果。
 未解决



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值