iframe框架嵌套技巧(全屏,去双滚动条)

前言

一般情况下我们很少用到iframe(框架),但有些特殊的情况下我们不得不使用iframe,那么或许或遇到嵌套内容不全屏,网页周围有边框,双滚动条等等情况,下面来说一下处理技巧。

正文

全屏与边框处理:

<html> 
 <head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Colin-iframe Test</title><
/head><body>  
<iframe src="https://www.baidu.com" height="100%" width="100%" id="frame_full" frameborder="0" scrolling="auto">
</iframe>
</body></html>

基本可以满足需求了吧,或许你细心使用会发觉还是不够完美,因为过高的页面会有双滚动条,怎么办?这样是不是没有了?

<html>
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Colin-iframe Test</title></head><body>
 <iframe src="https://www.baidu.com" height="100%" width="100%" id="frame_full" frameborder="0" scrolling="auto"  onload="this.style.height=document.body.clientHeight-50">
</iframe>
</body></html>

当然,你还可以这样写:

<html> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Colin-iframe Test</title><style type="text/css"> 
html{overflow:hidden;}</style>
</head><body>  
<iframe src="https://www.baidu.com" height="100%" width="100%" id="frame_full" frameborder="0" scrolling="auto" >
</iframe>
</body></html>

使用iframe调用指定网页的特定位置

有些时候我们并不需要显示iframe标签属性src指定的目标网页的所有内容,往往只需要显示某一特定区域。现有两种实现方法提供,但严禁使用此方法用于欺骗、隐瞒目的。

这里用到了Iframe的一些属性

  • marginheight 属性规定框架内容与框架的上方下方之间的高度,以像素计。
  • maiginweidth 属性规定框架内容与框架的左侧右侧之间的高度,以像素计。
  • vspace y方向显示的区域,负值为从目标网页最上面开始截取的部分,正值为y值+从上部开始内容区域
  • hsapce x方向显示的区域,负值为从目标网页左侧开始截图的部分,正值为x值+从左侧开始内如区域
  • src 目标网页的地址,可以为html,asp,文本等内如
  • frameborder 框架边框,0为无边框(画中画效果)
  • scrolling 是否显示滚动,yes显示
  • align:指定浮动窗口内的页面相对于浮动窗口的位置,它的值有left、right、top、middle、bottom
  • marginwidth、marginheight 目标网页被框架覆盖的深度

方法一

以主页https://www.a0yi.com为例,去掉Logo部分,代码与效果如下:

<html>
<head>
</head>
<body>
<div align="center">
<iframe width="800" height="600" src="https://www.a0yi.com" scrolling="no" hspace="-100" vspace="-150">
</div>
</html>

方法二

使用DIV控制,这也是使用iframe框架的好处,因为它不像frame,它可以显示的网页的任意区域代码如下:

<html> 
<head>
</head> 
<body> 
<div align="center" style="margin:0 auto;">
 <div style="width: 800px; height: 600px; overflow: hidden; border: 0px;">
 <div style="width: 500px; height: 800px; margin: -153px 0px 0px -10px;">
 <iframe src="https://www.a0yi.com" width="800" height="600" scrolling="no">
 </iframe></div> </div>< /div> 
</body>

方法三

目前尚未找到按坐标来控制的办法,只有采用按顶、左、右边跑的方法来控制,因此要制作一个文件来完全调用目标网页内容,然后再在需要调用指定内容的地方使用iframe代码调用。
首先建立一个完全调用目标网页的文件,命名为a.html,代码如下:

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
</head>
<body> < /body>
</html>

这个页面用iframe框架引用了目标页面,并且用CSS定位设定了框架浮动位置(top: -120px; left: -680px)当然也可以按右边距控制,如right:680px,距离大小可以根据情况调整,直到调整到合适的位置。

然后在需要调用目标内容的文件中合适的位置放入以下代码:

<iframe src=""这里填写上面保存的html文档的地址"" width="”300″" height=""230″" frameborder="”0″" scrolling=""no""></iframe>

高宽可以根据情况调整,为了使调用的内容正常、正确显示的我们设定的位置,大家可以修改files.html里的边距控制量以达到最佳效果。

遇到问题:JSP中iframe表中加上

vspace=-190 , hspace=0

   这两个属性报  Undefined attribute name (vspace)  错误.而且这两个标签也不管用

 

© 版权声明
THE END
喜欢就支持以下吧
点赞1787赞赏
分享
评论 抢沙发

请登录后发表评论