iframe高度自适应及隐藏滚动条的实例详解


Posted in Javascript onSeptember 29, 2017

iframe高度自适应及隐藏滚动条的实例详解

在工作中,我们可能会遇到自己公司和其他的公司达成合作关系,从而共同开发某个项目。而这时候,我们可能就需要在自己的网站上嵌入别人做好的页面。而这种情况下,我们一般都会选择去使用iframe达到我们的目的。但是iframe用起来,真的是让人头痛,高度无法控制,难看的滚动条等等,下面我分享一下自己在处理iframe时的一些心得。

高度自适应

<iframe src="http://huichang.qunar.com/huiQunar" id="myiframe" frameborder=no scrolling="yes" style=" overflow-x:scroll; overflow-y:hidden; " width="100%" ></iframe>

<script type="text/javascript" language="javascript">
  var ifm= document.getElementById("myiframe");
  ifm.height=document.documentElement.clientHeight;
</script>

高度自适应并且隐藏滚动条

<html>
<head>
  <script type="text/javascript">
    function showS()
    {
      document.getElementById("test").scrolling="yes";
      document.getElementById("test").style.overflow="scroll";
      //alert(document.getElementById("test").scrolling);

    }
    function hideS()
    {
      document.getElementById("test").scrolling="no";
      document.getElementById("test").style.overflow="hidden";
      //alert(document.getElementById("test").style.overflow);
    }
  </script>

  <style>
    <!-- .ifr{width:600px;height:600px;background:#fff;overflow:hidden;display:block;position:absolute;top: 0;left: 0;right: 0;} -->
  </style>
</head>
<body>
<div class="ifr" onMouseOut="hideS()" onMouseOver="showS()" style="  width: 100%;  height: 100%;">
  <iframe id="test" width="100%" height="100%" frameborder="0" src="" style="margin:0px;" ></iframe>
  <script language="JavaScript">
    var iframe = document.getElementById("test");
    iframe.src = "http://huichang.qunar.com/huiQunar";
    //以下判断iframe是否加载完,并且隐藏滚动条
    if (iframe.attachEvent){
      iframe.attachEvent("onload", function(){
        //hideS();
        //document.getElementById("loading").style.display="none";
      });
    } else {
      iframe.onload = function(){
        //  hideS();
        //document.getElementById("loading").style.display="none";
      };
    }
  </script>
</div>
</body>
</html>

取巧的方式隐藏滚动条

取巧的方式就是,我们给iframe的宽度设置成101%,这样就可以把滚动条隐藏到屏幕外面,在将其overflow-x设置成hiden就行。这种方法在移动端 就没必要了。

 如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
document.all与WEB标准
May 13 Javascript
取得一定长度的内容,处理中文
Dec 20 Javascript
基于jquery实现点击左右按钮图片横向滚动
Apr 11 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
Feb 28 Javascript
简洁实用的BootStrap jQuery手风琴插件
Aug 31 Javascript
jQuery查找节点方法完整实例
Sep 13 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
JS实现json对象数组按对象属性排序操作示例
May 18 Javascript
axios 封装上传文件的请求方法
Sep 26 Javascript
Vue项目利用axios请求接口下载excel
Nov 17 Vue.js
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
JavaScript数组 几个常用方法总结
Nov 11 Javascript
H5实现仿flash效果的实现代码
Sep 29 #Javascript
Angular表格神器ui-grid应用详解
Sep 29 #Javascript
javascript 缓冲运动框架的实现
Sep 29 #Javascript
使用cropper.js裁剪头像的实例代码
Sep 29 #Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 #Javascript
微信小程序之页面跳转和参数传递的实现
Sep 29 #Javascript
微信小程序之选项卡的实现方法
Sep 29 #Javascript
You might like
常见php数据文件缓存类汇总
2014/12/05 PHP
Codeigniter发送邮件的方法
2015/03/19 PHP
PHP嵌套输出缓冲代码实例
2015/05/12 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
2013/04/21 Javascript
jquery分页对象使用示例
2014/04/01 Javascript
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
Javascript刷新窗口方法小结
2015/10/21 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
2016/05/25 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
如何通过setTimeout理解JS运行机制详解
2019/03/23 Javascript
pageGroup.js实现分页功能
2019/07/27 Javascript
vue-resource:jsonp请求百度搜索的接口示例
2019/11/09 Javascript
[56:35]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第二局
2016/02/27 DOTA
[57:53]Secret vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python异常处理总结
2014/08/15 Python
Python中的引用和拷贝浅析
2014/11/22 Python
Python实现对PPT文件进行截图操作的方法
2015/04/28 Python
python类和函数中使用静态变量的方法
2015/05/09 Python
Python如何为图片添加水印
2016/11/25 Python
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
Selenium控制浏览器常见操作示例
2018/08/13 Python
在unittest中使用 logging 模块记录测试数据的方法
2018/11/30 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
python统计mysql数据量变化并调用接口告警的示例代码
2020/09/21 Python
Python爬虫新手入门之初学lxml库
2020/12/20 Python
犹他州最古老的体育用品公司:Al’s
2020/12/18 全球购物
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
采购部部门职责
2013/12/15 职场文书
管理学院毕业生自荐信范文
2014/03/10 职场文书
公安学专业求职信
2014/07/27 职场文书
中学综治宣传月活动总结
2015/05/07 职场文书
年终奖金发放管理制度,中小企业适用,拿去救急吧!
2019/07/12 职场文书
详解分布式系统中如何用python实现Paxos
2021/05/18 Python