一般情况下我们很少用到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. C# winform窗体设计-查询单个值

    查询单个值主要用于对成绩最低分,最高分,学生总数,学生性别等信息的统计 在查询单个值的时候用到了ExecuteScalar方法,连接以及语句方面,以及思路和对数据的增删改差不多 下面请看一段代码: s ...

  2. bzoj1801[AHOI2009]CHESS中国象棋

    题意:在棋盘上放一些炮使得它们不互相攻击.其实就是一行/一列最多放两个. 50分的数据中n,m至少有一个不超过8,比较直接的想法是对n/m中较小的一维做状态压缩,状态f[i][S1][S2]表示在前i ...

  3. Linux File System Change Monitoring Technology、Notifier Technology

    catalog . 为什么要监控文件系统 : hotplug . udev . fanotify(fscking all notification system) . inotify . code e ...

  4. js事件委托的方式绑定详解

    js事件绑定 事件绑定,这里使用了冒泡的原理,从点击的元素开始,递归方式的向父元素传播事件,这样做的好处是对于大量要处理的元素,不必为每个元素都绑定事件,只需要在他们的父元素上绑定一次即可,提高性能. ...

  5. GridView控件RowDataBound事件的一个实例

    实现点击两个按钮,跳转到同一个界面,HyperLink显示不同的东西,主要代码段如下 前台代码: <asp:TemplateField HeaderText="操作"> ...

  6. 大一上学期C语言学习心得总结

    经过一个学期的C语言学习,大体算是在这个编程语言上入了门,能够通过一些代码解决特定的问题.当然,每次成功将问题转换成代码都小有激动,虽然只是在黑框上输出了一些数字或是字符串. 编程,虽然还不是很懂,但 ...

  7. 获取jsp页面的宽和高

    var winWidth; var winHeight; function getResult() { if(window.innerWidth) { winWidth=window.innerWid ...

  8. WinForm------TreeList属性介绍

    转载: http://blog.csdn.net/fwj380891124/article/details/6888077 treeList1.LookAndFeel.UseWindowsXPThem ...

  9. 自然语言20.1 WordNet介绍和使用 _

    http://blog.csdn.net/ictextr9/article/details/4008703 Wordnet是一个词典.每个词语(word)可能有多个不同的语义,对应不同的sense.而 ...

  10. 改造rm命令为mv

    :刚在群里面看到小伙伴误操作把服务器上重要的文件给删掉了,于是google了下,找到一篇文章把rm命令改造成mv命令,源博客如下:http://blog.csdn.net/dataspark/arti ...