一般情况下我们很少用到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. Bzoj3531: [Sdoi2014]旅行

    Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 1698  Solved: 758 Description S国有N个城市,编号从1到N.城市间用N-1 ...

  2. Allegro使用技巧

    1.可以把outline及螺丝孔位置做成单独的mechanical symbol.因为板子外形和螺丝孔位置,多是从机构工程师手里拿来的DXF,新建mechanical symbol后,导入DXF到bo ...

  3. PL/0编译器(java version) – SymbolTable.java

    1: package compiler; 2: //竟然没有对符号表检查大小,会溢出的. 3:   4: import java.io.IOException; 5:   6: public clas ...

  4. 王高利:Linux__apache，安装，报错解决

    今日编译apache时出错:#./configure --prefix--检查编辑环境时出现:checking for APR... noconfigure: error: APR not found ...

  5. Apache Tomcat目录下各个文件夹的作用

    1.bin:存放各种不同平台开启与关闭Tomcat的脚本文件. 2.lib:存tomcat与web应用的Jar包. 3.conf:存放tomcat的配置文件. 4.webapps:web应用的发布目录 ...

  6. XML学习笔记

    XML学习笔记 第一部分:XML简介 我们经常可以听到XML.HTML.XHTML这些语言,后两者比较清楚,一直不是很明白XML是什么,这里做一个总结. XML(eXtensible Markup L ...

  7. 《Java疯狂讲义》（第3版）学习笔记 2 - Java语言的运行机制

    内容 1.高级语言的运行机制 2.Java 语言的运行机制 1.高级语言的运行机制 高级语言主要分为编译型语言和解释型语言两类. 编译型语言是指使用专门的编译器.针对特定平台(操作系统)将高级语言源代 ...

  8. 怎样用命令行编译C#程序

    1. 把程序拷贝至记事本 2.另存为*cs格式 3.找到VS2015提供的命令提示 4.要把命令行指向程序所在的目录(可以有个小软件) 如果在其他的盘符,先敲D:,然后再cd 5.输入csc hell ...

  9. warning C4005: “AF_IPX”: 宏重定义的解决办法

    warning C4005: “AF_IPX”: 宏重定义warning C4005: “AF_IPX”: 宏重定义 解决方法: 由以上代码可以看出如果在没有定义WIN32_LEAN_AND_MEAN ...

  10. 自然语言15.1_Part of Speech Tagging 词性标注

    QQ:231469242 欢迎喜欢nltk朋友交流 https://en.wikipedia.org/wiki/Part-of-speech_tagging In corpus linguistics ...