对于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. 【2017-03-30】JS-document对象

    一.获取标记对象 1.document.getElementById("id");         根据id找,最多找到一个. 2.document.getElementsByNa ...

  2. Unity 3D Framework Designing(8)——使用ServiceLocator实现对象的注入

    对象的 『注入』 是企业级软件开发经常听到的术语.如果你是一个 Java 程序员,一定对注入有着深刻的映像.不管是SSH框架还是SSM框架,Spring 全家桶永远是绕不过去的弯.通过依赖注入,可以有 ...

  3. 关于commonjs,AMD,CMD之间的异同

    1.简介 随着前端业务复杂度的增加,模块化成为一个大的趋势.而在ES6还未被浏览器所支持的情况下,commonjs作为ES6中标准模块加载方案,在客服端中的支持情况并不好,现在在客服端中有2中模块化的 ...

  4. freemarker导出word文档——WordXML格式解析

    前不久,公司一个项目需要实现导出文档的功能,之前是一个同事在做,做了3个星期,终于完成了,但是在项目上线之后却发现导出的文档有问题,此时,这个同事已经离职,我自然成为接班者,要把导出功能实现,但是我看 ...

  5. JAVA 发送邮件代码---发送文本内容: 内容使用\n 进行换行

    依赖包:mail.jar JAR链接地址: http://pan.baidu.com/s/1o8LNl0Y 密码: ja52 package mail; import java.util.Proper ...

  6. WPF 截屏软件开发

    最近由于工程需要开始研发基于Windows的自动录屏软件,很多细节很多功能需要处理,毕竟一个完美的录屏软件不是你随随便便就可以写出来的.首先参考了大部分的录屏软件,在研发的过程中遇到了很多的问题:比如 ...

  7. Ubuntu16.04部署python2和python3共存的Jupyter Notebook

    一.安装python和python-pip sudo apt-get install python python3 python-pip python3-pip sudo pip install -- ...

  8. php 启动过程 - sapi MINIT 过程

    php 启动过程 - sapi MINIT 过程 sapi 概念 sapi 是 php 的应用编程接口, server 端接收请求通过 sapi 接口层交给 php 处理 不同的 server 端底层 ...

  9. 设计模式(1)单例模式(Singleton)

    设计模式(0)简单工厂模式 源码地址 0 单例模式简介 0.0 单例模式定义 单例模式是GOF二十三中经典设计模式的简单常用的一种设计模式,单例模式的基本结构需满足以下要求. 单例模式的核心结构只有一 ...

  10. APP品牌具体有哪几个要素?又是如何操作的?

    对于品牌的一些认识 首先我们要知道,品牌是由用户与公司及其产品&服务互动后所产生的,失去了与用户互动并且承认的是伪品牌,对于开发者来说,APP的品牌要先从标志与颜色考虑起,但实话实说,标志与颜 ...