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 相关文章推荐
两个DIV等高的JS的实现代码
Dec 23 Javascript
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
Jan 05 Javascript
jQuery ctrl+Enter shift+Enter实现代码
Feb 07 Javascript
js 自定义的联动下拉框
Feb 07 Javascript
jquery创建表格(自动增加表格)代码分享
Dec 25 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
Javascript中字符串相关常用的使用方法总结
Mar 13 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
Mar 10 Javascript
vue 优化CDN加速的方法示例
Sep 19 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
Apr 10 Javascript
iview实现图片上传功能
Jun 29 Javascript
使用react+redux实现计数器功能及遇到问题
Jun 02 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开发者的10个技巧
2011/02/25 PHP
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
处理单名多值表单的详解
2013/06/08 PHP
解析PHP留言本模块主要功能的函数说明(代码可实现)
2013/06/25 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
CI框架常用方法小结
2016/05/17 PHP
php实现压缩合并js的方法【附demo源码下载】
2016/09/22 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
JavaScript读取中文cookie时的乱码问题的解决方法
2009/10/14 Javascript
jQuery 表单验证扩展代码(一)
2010/10/11 Javascript
js对数字的格式化使用说明
2011/01/12 Javascript
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
javascript修改IMG标签的src问题
2014/03/28 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
2015/01/13 Javascript
vue父组件中获取子组件中的数据(实例讲解)
2017/09/27 Javascript
在 Node.js 中使用 async 函数的方法
2017/11/17 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
2018/02/10 Javascript
原生js生成图片验证码
2020/10/11 Javascript
vue实现前端列表多条件筛选
2020/10/26 Javascript
使用Python对Csv文件操作实例代码
2017/05/12 Python
python先序遍历二叉树问题
2017/11/10 Python
Python 实现「食行生鲜」签到领积分功能
2018/09/26 Python
python opencv将图片转为灰度图的方法示例
2019/07/31 Python
python提取照片坐标信息的实例代码
2019/08/14 Python
PyTorch中的Variable变量详解
2020/01/07 Python
python切割图片的示例
2020/11/12 Python
GANT葡萄牙官方商店:拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
麦当劳印度网上订餐:McDelivery
2020/03/16 全球购物
意大利在线药房:Saninforma
2021/02/11 全球购物
2014年民政局关于保密工作整改措施
2014/09/19 职场文书
离婚协议书格式
2014/11/21 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书
PyTorch 如何设置随机数种子使结果可复现
2021/05/12 Python
详解CSS不定宽溢出文本适配滚动
2021/05/24 HTML / CSS
Mysql中where与on的区别及何时使用详析
2021/08/04 MySQL