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 相关文章推荐
Javascript 网页黑白效果实现代码(兼容IE/FF等)
Apr 23 Javascript
JS获取农历日期具体实例
Nov 14 Javascript
JS倒计时代码汇总
Nov 25 Javascript
基于javascript的COOkie的操作实现只能点一次
Dec 26 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
May 05 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
Oct 11 Javascript
微信小程序使用modal组件弹出对话框功能示例
Nov 29 Javascript
JavaScript实现简单音乐播放器
Apr 17 Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 03 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
Oct 29 Javascript
工作中常用js功能汇总
Nov 07 Javascript
详解CocosCreator消息分发机制
Apr 16 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
业余方法DIY电子管FM收音机
2021/03/02 无线电
PHP采集相关教程之一 CURL函数库
2010/02/15 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
使用Node.js实现HTTP 206内容分片的教程
2015/06/23 Javascript
js实现拉幕效果的广告代码
2015/09/02 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
2015/12/29 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
2016/04/13 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
jquery根据name取得select选中的值实例(超简单)
2018/01/25 jQuery
JS中offset和匀速动画详解
2018/02/06 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
js实现坦克移动小游戏
2019/10/28 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
深度剖析使用python抓取网页正文的源码
2014/06/11 Python
Python psutil模块简单使用实例
2015/04/28 Python
Python操作Excel之xlsx文件
2017/03/24 Python
Python 将RGB图像转换为Pytho灰度图像的实例
2017/11/14 Python
python读文件保存到字典,修改字典并写入新文件的实例
2018/04/23 Python
flask 使用 flask_apscheduler 做定时循环任务的实现
2019/12/10 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
简单的命令查看安装的python版本号
2020/08/28 Python
Joe Fresh官网:加拿大时尚品牌和零售连锁店
2016/11/30 全球购物
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
The North Face北面德国官网:美国著名户外品牌
2018/12/12 全球购物
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
授权委托书样本
2014/04/03 职场文书
推广普通话演讲稿
2014/05/23 职场文书
财务会计专业自荐书
2014/06/30 职场文书
新闻专业毕业生求职信
2014/08/08 职场文书
2016高考寄语或鼓励的话语
2015/12/04 职场文书
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫