iframe的使用

转载 2016年08月31日 16:32:52

----可耻地拿来了,原地址:http://blog.csdn.net/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 nameonLoad 加入到你要自适应的iframe标签下即可

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

在要实现的iframe上加上

  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的 效果。
 未解决

使用iframe的优缺点,为什么少用iframe以及iframe和frame的区别。

iframes 提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。但我们需要慎重的使用iframe。iframe的创建比其它包括scripts和css的 DOM 元素的创建慢了 1-2 个数量...

iframe框架使用(完美版)

  • 2016年05月10日 19:53
  • 635B
  • 下载

pdf.js使用和JS实现嵌套Iframe页面F11全屏效果

1      Pdf.js使用 generic/web/viewer.html主要是渲染pdf阅读器的样式,而generic/web/viewer.js则是指定打开的pdf文件(当然还有其他功能,不...

FRAME与IFRAME的使用方法与区别

  • 2011年08月23日 16:03
  • 165KB
  • 下载

Iframe使用帮助

  • 2008年11月19日 10:29
  • 85KB
  • 下载

artDialog简单使用中iframe的穿透

包含iframe的页面,注意需要引用artDialog文件,否则好像不能实现穿透效果 Developing......> err   ...

asp.net 中使用iframe动态加载页面

  • 2009年10月23日 22:51
  • 22KB
  • 下载

使用 iframe 引用优酷和土豆和腾讯视频,支持 HTML5 手机 播放

写博客,只为记录项目中碰到的问题 使用百度视频上传,嵌入远程链接,然后在编辑器中自动转换为支持视频播放的html代码。 例如: 简单了修改了百度编辑器源码 默认的百度编辑器针对视频的处理有2种: 1...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:iframe的使用
举报原因:
原因补充:

(最多只允许输入30个字)