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 相关文章推荐
jQuery实现页面滚动时层智能浮动定位实例探讨
Mar 29 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
Aug 26 Javascript
js实现幻灯片播放图片示例代码
Nov 07 Javascript
JS实现可关闭的对联广告效果代码
Sep 14 Javascript
jQuery多条件筛选如何实现
Nov 04 Javascript
AngularJS删除路由中的#符号的方法
Sep 20 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
Apr 20 Javascript
微信小程序实现横向增长表格的方法
Jul 24 Javascript
深入理解JavaScript的async/await
Aug 05 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
Oct 09 Javascript
element-ui 时间选择器限制范围的实现(随动)
Jan 09 Javascript
解决echarts数据二次渲染不成功的问题
Jul 20 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/01 PHP
PHP微信开发之文本自动回复
2016/06/23 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
PHP htmlentities()函数用法讲解
2019/02/25 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
Alliance vs Liquid BO3 第一场2.13
2021/03/10 DOTA
解析John Resig Simple JavaScript Inheritance代码
2012/12/03 Javascript
JavaScript 判断浏览器是否支持SVG的代码
2013/03/21 Javascript
jquery实现点击文字可编辑并修改保存至数据库
2014/04/15 Javascript
JQuery获取表格数据示例代码
2014/05/26 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
深入理解JavaScript单体内置对象
2016/06/06 Javascript
javaScript知识点总结(必看篇)
2016/06/10 Javascript
javascript中的后退和刷新实现方法
2016/11/10 Javascript
简述jQuery Easyui一些用法
2017/08/01 jQuery
jQuery实现的表格前端排序功能示例
2017/09/18 jQuery
利用Node.js了解与测量HTTP所花费的时间详解
2017/09/22 Javascript
vue 设置路由的登录权限的方法
2018/07/03 Javascript
vue弹出框组件封装实例代码
2019/10/31 Javascript
js正则匹配多个全部数据问题
2019/12/20 Javascript
JS内置对象和Math对象知识点详解
2020/04/03 Javascript
详解Typescript里的This的使用方法
2021/01/08 Javascript
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
python中的reduce内建函数使用方法指南
2014/08/31 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
Python3 实现爬取网站下所有URL方式
2020/01/16 Python
Python新手如何进行闭包时绑定变量操作
2020/05/29 Python
Python astype(np.float)函数使用方法解析
2020/06/08 Python
修复iPhone的safari浏览器上submit按钮圆角bug
2012/12/24 HTML / CSS
Hobbs官方网站:英国奢华女性时尚服装
2020/02/22 全球购物
将一个数的从第5位开始的7个数取出,其余位置0
2016/05/26 面试题
创先争优标语
2014/06/27 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
机关班子查摆问题及整改措施
2014/10/28 职场文书
2019初中学生入团申请书
2019/06/27 职场文书