一般情况下我们很少用到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. 打通多个帝国CMS系统的会员整合与同步教程

    例子:我们要整合下面三个帝国CMS系统网站名称分别为"A网站"."B网站"."C网站":安装系统的数据库名分别为"adb" ...

  2. UVa 437 The Tower of Babylon（经典动态规划）

    传送门 Description Perhaps you have heard of the legend of the Tower of Babylon. Nowadays many details ...

  3. html内容写入到文件中的时候出现‘TypeError: expected a character buffer object’错误

    代码如下: with open('ryf.md', 'a') as f: f.write(content) # content是html内容 原因是写入文件要求写入内容是str,直接转换成str即可, ...

  4. 多播程序设计（基于UDP协议）

    首先要搞清楚多播IP地址有哪些 D类IP地址就是多播地址,范围是224.0.0.0 ~ 239.255.255.255 其中又划分为以下类别 D类地址的划分 类别 地址范围 描述 局部链接地址(本地网 ...

  5. LABjs(类似于LazyLoad,但它更加方便管理依赖关系)

    动态加载JS函数 一般性的,当我们需要加载js文件的时候都会使用script标签来实现,类似于如下代码: <script type="text/javascript" src ...

  6. HDU1392Surround the Trees（凸包判断 + 求周长）

    http://www.cnblogs.com/hmhard/archive/2013/02/05/2893035.html 这是判断三角区域那块写的不好. 判断凸包的方法: 1.将所有点按照y从小到大 ...

  7. centos忘记root密码，重新设置的方法

    今天重新装了一个centos6.6,好像root密码没有叫我设置吧,然后用虚拟机开始安装之前的密码登录显示失败,所以有了下面的彩蛋.....Helloween... 在虚拟机安装了Centos,今天要 ...

  8. VGA 视频输出

    VGA Video Output by Nathan Ickes Introduction VGA is a high-resolution video standard used mostly fo ...

  9. myeclipse+tomcat内存溢出

  10. js008-BOM

    js008-BOM 本章内容: 1.理解window对象-BOM的核心 2.控制窗口.框架和弹出窗口 3.利用location对象中的页面信息 4.使用navigation对象了解浏览器 ECMASc ...