一般情况下我们很少用到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框架嵌套技巧（全屏，去双滚动条）的更多相关文章

  1. iframe中video没有全屏按钮

    HTML内联框架元素 <iframe> iframe默认不允许全屏, 如果内嵌了video那么控制条上将不显示全屏按钮, 通过添加allowfullscreen属性可以开启全屏功能. mo ...

  2. js实现网页防止被iframe框架嵌套及几种location.href的区别

    首先我们了解一下几种location.href的区别简单的说:几种location.href的区别js实现网页被iframe框架功能,感兴趣的朋友可以了解下 首先我们了解一下:window.locat ...

  3. jquery.nicescroll.js可全屏可改滚动条颜色的滚动条插件-推荐

    有一款很棒的插件 http://www.ijquery.cn/?p=666

  4. 使用echarts时，鼠标首次移入屏幕会闪动，全屏会出现滚动条

    原因: 在echarts图表中出现tooltip时,画布的父标签(即:echarts.init()的标签)的有时宽高都会发生变化,导致相对布局的div可能大小发生变化(画布大小却不变),导致页面闪动. ...

  5. HTML5全屏浏览器兼容方案

    最近一个项目有页面全屏的的需求,搜索了下有HTML5的全屏API可用,不过各浏览器的支持不一样. 标准 webkit  Firefox  IE Element.requestFullscreen() ...

  6. Chrome浏览器中使用 iframe 嵌入网页导致视频不能全屏的问题解决方法

    今天无意中测试了下在 iframe 中嵌入视频, 发现全屏按钮在 Chrome 浏览器中居然无效, 试了好几个视频网站的视频都不能全屏, 但在其他浏览器中似乎都很正常, 应该是 Chrome 60 新 ...

  7. CKPlayer 只调用HTML5播放器时全屏问题 这只是Chrome浏览器的渲染bug

    如题,在系统中使用CKPlayer播放器,一切顺利,偶然发现没有全屏按钮, 正常的全屏按钮是这样的: 经过一步步调试,发现问题出在iframe, 当视频页面在iframe内时,全屏按钮不显示了,这个和 ...

  8. js控制全屏及退出全屏

    js控制全屏及退出全屏,网上很多代码例子,我这里需求和标准的有点出入: 1.当用户点击某按钮,触发iframe下的页面全屏. 2.不允许用户退出全屏. 解决第一点,触发全屏可以按照网上的例子,代码如下 ...

  9. H5实现全屏与F11全屏

    最近做项目用到全屏,现总结一下全屏: 1.局部全屏:H5全屏和F11有区别,在这种情况下判断全屏只需要通过H5全屏属性,无论全屏后有无滚动条都可判断. /** * [isFullscreen 判断浏览 ...

随机推荐

  1. Bzoj1449 [JSOI2009]球队收益

    Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 741  Solved: 423 Description Input Output 一个整数表示联盟里所有球 ...

  2. 嵌入式环境下通过 UDP 链接来调试 QT 程序

    据说有为嵌入式提供的 QT Debug 手段,但是目前还没发现,所以想到了这个笨办法.有更好思路的可以推荐. 该思路是基于 QDebug() .因为 QT 提供了重写 QT msg 处理方法的接口 q ...

  3. 上班遇到的——关于Web安全

    恩只是流水账,内容写得可能比较随性,权当记录自己的成长:-D 今天经理特地开会跟我们讲了一下关于web安全的东西,SQL注入.文本编辑器.上传.本身程序权限管理漏洞 感觉好高级,做安全的人厉害,黑客也 ...

  4. MVC 路由

    1.ASP.NET MVC框架中提供的URL路由机制能够使URL不必映射到应用程序的特定物理文件. 2.当用户访问基于MVC模式创建的网站时,只需要在浏览器地址栏里输入类似于下面的URL: http: ...

  5. 【Alpha版本】 第七天 11.15

    一.站立式会议照片: 二.项目燃尽图: 三.项目进展: 成 员 昨天完成任务 今天完成任务 明天要做任务 问题困难 心得体会 胡泽善 完成我要招聘的招聘详情显示,完成简历填写及显示功能 完成我要应聘的 ...

  6. java语言：Linux与JVM的内存关系分

    在一些物理内存为8g的服务器上,主要运行一个Java服务,系统内存分配如下:Java服务的JVM堆大小设置为6g,一个监控进程占用大约 600m,Linux自身使用大约800m.从表面上,物理内存应该 ...

  7. ubuntu14.04安装GoldenDict

    1. 软件商店搜索goldendict安装或者$ sudo apt-get install goldendict 2. 配置网页翻译源 编辑-->词典--->网站选项卡,点击添加 以下是有 ...

  8. uC/OS-II应用程序exe

    ECHO OFFECHO *******************************************************************************ECHO *   ...

  9. Android项目结构 以及体系结构

    学习Android平台的人一般对Android的平台的应该有点认识 其它的就不多讲了 Android项目一般由以下几个部分构成 以上是一个简单的Android项目结构目录图 1. src  主要是 源 ...

  10. win7搭建web服务器

    首先找到安装的tomcat软件,打开里面的webapp文件夹,在里面新建一个文件夹用作web应用程序访问端地址,然后再到新建的文件夹test里放入想要被访问的东西,这里我用的是一个测试的页面test. ...