一般情况下我们很少用到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. Java多线程实践

    1.实现Runnable接口 import java.util.Random; public class PrintTask implements Runnable{ private final in ...

  2. 本地连接虚拟机上面的redis

    想做一个抓取系统,想到用redis存储临时数据可能会比较好些,就想着装个虚拟机,在虚拟机上面安装redis,通过本地来访问虚拟机上面的redis. 虚拟机和redis安装成功之后,发现本地怎么都连接不 ...

  3. Ubuntu下忘记MySQL密码重设方法

    今天在做Python的实验,要用到MySQL数据库,但是密码是啥捏~~~果断重新设置密码啦啦啦 http://www.cnblogs.com/yuxc/archive/2012/07/25/26075 ...

  4. python 模拟登陆，请求包含cookie信息

    需求: 1.通过GET方法,访问URL地址一,传入cookie参数 2.根据地址一返回的uuid,通过POST方法,传入cooki参数 实现思路: 1.理解http的GET和POST差别 (网上有很多 ...

  5. Objective 多态

    多态的特点 1.没有继承就没有多态 2.代码的体现:父类类型的指针指向子类对象 3.好处:如果函数方法参数中使用的是父类类型,则可以传入父类和子类对象,而不用再去定义多个函数来和相应的类进行匹配了. ...

  6. uC/OS-II全局变量定义

    /*************************************************************************************************** ...

  7. JQuery------动态添加的元素on方法不起作用解决方法

    转载: http://www.jb51.net/article/70342.htm

  8. pyqt2_官网教程

    https://pythonspot.com/en/pyqt4/ Articles You can find a collection of PyQT articles below. Applicat ...

  9. MySQL学习笔记——函数

    常用函数 ALTER TABLE tb_emp ); #插入数据 INSERT INTO tb_dept() VALUE(,'市场部','负责市场工作'); # concat 连接 SELECT CO ...

  10. JS通过getBoundingClientRect获取的height可能与css设置的height不一致

    发现如果DOM元素有padding-top或者padding-bottom值时, $(dom).height() = dom.style.display + padding-top + padding ...