iframe的使用

----可耻地拿来了，原地址：http://blog.youkuaiyun.com/u011037869/article/details/47126207

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

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

[java]  view plain  copy

 print ?

1.        <!-- 导航iframe top.jsp -->  
2. <iframe src="top" frameborder="0" scrolling="no" height="300px;" width="100%" allowTransparency="true" style="position:fixed;z-index:1001;right: 0; top: 0">  
3. </iframe>   
4. <!-- 内容iframe cleanzone.jsp -->  
5. <iframe src="home" id="iframepage"  name="iframepage" frameborder="0" scrolling="no" width="100%" height="100%"  onLoad="iFrameHeight()">  
6. </iframe>  

3.内容部分不能自适应高度，解决代码如下

[javascript]  view plain  copy

 print ?

1. <script type="text/javascript" language="javascript">  
2. //iframe自适应高度  
3.  function iFrameHeight()   
4.  {  
5.      var ifm= document.getElementById("iframepage");  
6.      var subWeb = document.frames ? document.frames["iframepage"].document :ifm.contentDocument;  
7.      if(ifm != null && subWeb != null)   
8.      {  
9.          ifm.height = subWeb.body.scrollHeight;  
10.      }  
11.   
12.  }  
13. </script>  
14. <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上加上

[css]  view plain  copy

 print ?

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

即可！

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

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

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

[html]  view plain  copy

 print ?

1. allowTransparency="true"   

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

[html]  view plain  copy

 print ?

1. background-color:transparent;  

即可！

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

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

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

[javascript]  view plain  copy

 print ?

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

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