去掉iframe默认滚动条后影响正常滚动以及js解决高度自适应。
对于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解决高度自适应。的更多相关文章
- ajax 载入html后不能执行其中的js解决方法
事件背景 有一个公用页面需要在多个页面调用,其中涉及到部分js已经写在了公用页面中,通过ajax加载该页面后无法执行其中的js. 解决思路 1. 采用附加一个iframe的方法去执行js,为我等代码洁 ...
- ajax 动态载入html后不能执行其中的js解决方法
事件背景 有一个公用页面需要在多个页面调用,其中涉及到部分js已经写在了公用页面中,通过ajax加载该页面后无法执行其中的js. 解决思路 1. 采用附加一个iframe的方法去执行js,为我等代码洁 ...
- 怎么去掉iframe的滚动条?
<iframe name="123" src="YNJD/ynjd.htm" frameborder="0" width=" ...
- css中textarea去掉边框和选中后的蓝色边框问题的解决方法
我们在设计网页的输入框时,有时会遇到需要把textarea的边框去掉的问题,经过测试,下面的代码是可以的. textarea{ border: solid 0px; outline:none; }
- 实现iframe窗口高度自适应的又一个巧妙思路
domainA 中有一个页面index.html,通过iframe嵌套了domainB中的一个页面other.html由于other.html页面在iframe中显示,而且其页面内容会动态的增加或减少 ...
- 关于iframe的滚动条,如何去掉水平滚动条或垂直滚动条
关于iframe的滚动条,如何去掉水平滚动条或垂直滚动条 关于<iframe>可以通过设置属性scrolling="no" 去掉iframe的两个滚动条. 如何只去掉水 ...
- iframe关于滚动条的去除和保留
iframe嵌入页面后,我们有时需要调整滚动条,例如,去掉全部的滚动条,去掉右边的滚动条且保留底下的滚动条,去掉底下的滚动条且保留右边的滚动条.那么我们应该怎么做呢? 一:去掉全部的滚动条 第一个方法 ...
- 纯css,div隐藏滚动条,保留鼠标滚动效果。
示例1: html,body { height: 100%; } body { overflow: hidden; } .full-screen { position: relative; width ...
- overflow妙用--去除默认滚动条,内容仍可滚动
在开发中我们往往要去除默认滚动条,但是其在竖直方向的滚动效果仍然需要. <div id="parent"> <div id="child"&g ...
随机推荐
- React文档翻译系列(一)安装
原文地址:原文 本系列是针对React文档进行的翻译,因为自己在学习react的时候,最开始通过看博客或者论坛等中文资料,有些内容是零零散散的接收,并没有给自己带来很好的效果,所以后来决定把文档的原文 ...
- Vue服务端渲染和Vue浏览器端渲染的性能对比
Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...
- unity3d屏蔽Windows10输入法
在win10上,如果安装了某些输入法(比如QQ输入法),会造成unity的键盘事件被输入法捕获而不能触发的情况.只有将输入法切换到英文状态下才能响应键盘事件. 解决办法有, 1:用户主动切换输入法,甚 ...
- java设计模式之职责链模式
责任链模式 设计模式很多时候都是看见名字都知道意思,责任链,见名知义为请求创建一系列处理对象. 此模式基于请求的类型将请求的发送方和接收方分离.通常每个接收器包含对另一个接收器的引用.如果一个对象不能 ...
- Linux 上做免密码登陆
基于密钥验证1.生成一对密钥ssh-keygen -t {rsa|dsa} -f /path/to/keyfile -N 'password'2.将公钥传输至服务器某用户的家目录的.ssh/autho ...
- 编写你的第一个程序(HelloWorld)
1)安装. 2)打开我们的编译工具Xcode,会出现一些选项,我们只需要选中第2项(因为版本不同可能有些不同)“Create a new Xcode project ”如下图(其他的选项目前我们还没有 ...
- 老李分享: JSON
老李分享: JSON poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:908821478, ...
- 老李推荐:第4章3节《MonkeyRunner源码剖析》ADB协议及服务: ADB协议概览
老李推荐:第4章3节<MonkeyRunner源码剖析>ADB协议及服务: ADB协议概览 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试, ...
- 关于Form表单一些基础知识
1.两个重要属性: action:表单需要提交的服务器地址 method:表单提交数据使用的方法,get/post >>>get和post的区别 ①get传参使用URL传递,所有参数 ...
- java 基础知识六 字符串1
java 基础知识六 字符串1 String 不是java的基本数据类型 String 不是java的基本数据类型 String 不是java的基本数据类型 字符串是是一个字符序列 1.创建 创建 ...