对于iframe,相信大家都是知道存在很多弊端,比如说不利于搜索引擎的抓取;产生冗余结构体系不易管理等。不过在漫长的开发路上有时候使用是不可避免的。

  前两天在做一个退弹的功能的时候使用了iframe,由于我设置的滚动条属性是:scrolling="auto",首先出现的问题是右侧有两个滚动条,不难想到一个是父级页面的,另一个就是iframe自带的。好在iframe去掉自身滚动条还比较方便,设置了scrolling="no"后就消失了,我以为问题就解决了,然而,我发现滚动不了了,没办法滚动浏览页面靠后的信息。为此,查了相关资料,便用JS的办法解决了这个问题: 

//iframe:

<iframe src="backtop.html" frameborder="0" scrolling="no" id="defaultID" onload="setIframeHeight(this)"></iframe>

//js解决办法:

function setIframeHeight(iframe) {
  if (iframe) {
    var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
    if (iframeWin.document.body) {
      iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
    }
  }
};

window.onload = function () {
  setIframeHeight(document.getElementById('defaultID'));
};

在这里,只需将对应ID换成自己提供的ID即可;希望对大家有所帮助。

去掉iframe默认滚动条后影响正常滚动以及js解决高度自适应。的更多相关文章

  1. ajax 载入html后不能执行其中的js解决方法

    事件背景 有一个公用页面需要在多个页面调用,其中涉及到部分js已经写在了公用页面中,通过ajax加载该页面后无法执行其中的js. 解决思路 1. 采用附加一个iframe的方法去执行js,为我等代码洁 ...

  2. ajax 动态载入html后不能执行其中的js解决方法

    事件背景 有一个公用页面需要在多个页面调用,其中涉及到部分js已经写在了公用页面中,通过ajax加载该页面后无法执行其中的js. 解决思路 1. 采用附加一个iframe的方法去执行js,为我等代码洁 ...

  3. 怎么去掉iframe的滚动条?

    <iframe name="123" src="YNJD/ynjd.htm" frameborder="0" width=" ...

  4. css中textarea去掉边框和选中后的蓝色边框问题的解决方法

    我们在设计网页的输入框时,有时会遇到需要把textarea的边框去掉的问题,经过测试,下面的代码是可以的. textarea{ border: solid 0px; outline:none; }

  5. 实现iframe窗口高度自适应的又一个巧妙思路

    domainA 中有一个页面index.html,通过iframe嵌套了domainB中的一个页面other.html由于other.html页面在iframe中显示,而且其页面内容会动态的增加或减少 ...

  6. 关于iframe的滚动条,如何去掉水平滚动条或垂直滚动条

    关于iframe的滚动条,如何去掉水平滚动条或垂直滚动条 关于<iframe>可以通过设置属性scrolling="no" 去掉iframe的两个滚动条. 如何只去掉水 ...

  7. iframe关于滚动条的去除和保留

    iframe嵌入页面后,我们有时需要调整滚动条,例如,去掉全部的滚动条,去掉右边的滚动条且保留底下的滚动条,去掉底下的滚动条且保留右边的滚动条.那么我们应该怎么做呢? 一:去掉全部的滚动条 第一个方法 ...

  8. 纯css,div隐藏滚动条,保留鼠标滚动效果。

    示例1: html,body { height: 100%; } body { overflow: hidden; } .full-screen { position: relative; width ...

  9. overflow妙用--去除默认滚动条,内容仍可滚动

    在开发中我们往往要去除默认滚动条,但是其在竖直方向的滚动效果仍然需要. <div id="parent"> <div id="child"&g ...

随机推荐

  1. vue-router2.0简单路由嵌套

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. MongoDB基础教程系列--第一篇 进入MongoDB世界

    1.什么是MongoDB MongoDB是跨平台的.一个基于分布式文件存储的数据库.由C++语言编写.用它创建的数据库具备性能高.可用性强.易于扩展等特点.MongoDB将数据存储为一个文档,数据结构 ...

  3. Python Selenium设计模式-POM

    前言 本文就python selenium自动化测试实践中所需要的POM设计模式进行分享,以便大家在实践中对POM的特点.应用场景和核心思想有一定的理解和掌握. 为什么要用POM 基于python s ...

  4. JavaWeb总结(一)—Servlet

    一.Servlet生命周期 1.Servlet生命周期 Serlet加载---->实例化---->服务---->销毁 2.init() Servlet容器启动时:读取web.xml配 ...

  5. 【Scala】Scala之Packaging and Imports

    一.前言 前面介绍了Scala的Object,由于中间论文的时间耽误了些时间,接着继续学习Scala的Packaging和Imports 二.Packaging and Imports Scala的包 ...

  6. 设计模式的征途—3.工厂方法(Factory Method)模式

    上一篇的简单工厂模式虽然简单,但是存在一个很严重的问题:当系统中需要引入新产品时,由于静态工厂方法通过所传入参数的不同来创建不同的产品,这必定要修改工厂类的源代码,将违背开闭原则.如何实现新增新产品而 ...

  7. 微信小程序,前端大梦想(四)

    微信小程序图片轮播及滚动视图 移动端常用效果图片轮播及数据列表已被小程序封装成了组件,这里和大家分享一下如何使用. Scroll-view   可滚动视图区域 Swiper       图片轮播容器 ...

  8. vim工具

    今天和同事讨论使用什么看代码,使用什么写代码的问题.我觉得source insight用来看代码真的还是蛮舒服的,但是他觉得他习惯了VS,用着顺手. 但是我的想法是,有好的工具,得先花点时间去学习使用 ...

  9. Azure IoT 技术研究系列4-Azure IoT Hub的配额及缩放级别

    上两篇博文中,我们介绍了将设备注册到Azure IoT Hub,设备到云.云到设备之间的通信: Azure IoT 技术研究系列2-设备注册到Azure IoT Hub Azure IoT 技术研究系 ...

  10. 【BFS + Hash】拼图——携程2017春招编程题2

    写在前面 前天参加了携程的网测--还是感觉自己太!渣!了!    _(:з」∠)_ 时光匆匆啊,已经到了开始思考人生的时候了(算了不矫情了)--总之写个博客来督促一下自己.之前太懒了,很多时候都是输在 ...