如何让iframe框架和主页面共用一个滚动条(也称为:iframe高度自适应问题)
最近在前端页面遇到了一个问题,我在一个页面中利用iframe框架引入了一个页面进来,但是这个页面的高度是不叫高的,高出电脑屏幕很多,
所以就引发了iframe框架一个滚动条,然后主页面一个滚动条,这样页面就出现了两个滚动条。在网上查了好久,一直没有好的方法,直到我在
网上看到了iframe高度自适应,才解决了这个问题。
自适应的意思是,iframe框架的高度自动适应引入的HTML文件的内容高度,显在页面上的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('external-frame'));
};
html代码:
<iframe src="backtop.html" frameborder="0" scrolling="no" id="external-frame" onload="setIframeHeight(this)"></iframe>
参考网址:http://caibaojian.com/iframe-adjust-content-height.html(iframe高度自适应的6个方法)
如何让iframe框架和主页面共用一个滚动条(也称为:iframe高度自适应问题)的更多相关文章
- iframe框架的应用
同学接私活,我写几个页面. 后台系统,点击侧栏菜单后,右边div的要显示对应的内容.就是说,没选一下左边的菜单,右边的内容都要变化. 这次首先尝试了一下Oldfasional办法--iframe框架. ...
- Javscript调用iframe框架页面中函数的方法
Javscript调用iframe框架页面中函数的方法,可以实现iframe之间传值或修改值了, 访问iframe里面的函数: window.frames['CallCenter_iframe'].h ...
- 取代iframe框架
一.frameset1. 属性①border设置框架的边框粗细.②bordercolor设置框架的边框颜色.③frameborder设置是否显示框架边框.设定值只有0.1:0 表示不要边框,1 表示要 ...
- bootstrap在iframe框架中实现由子页面在顶级页面打开模态框(modal)
我需要完成的效果: 1.在顶级页面打开模态框,并且遮罩层也要再顶级页面 2.单击遮罩层部分,模态框不关闭 问题描述: 不知为什么,可能是bootstrap前端框架添加遮罩层的一些问题.通过子页面在顶级 ...
- iframe框架及优缺点
iframe框架及优缺点 HTML5不再支持使用frame,关于frame与iframe的区别,可以参阅 iframe与frame的区别 基本使用 src:规定在iframe中显示的文档的URL. f ...
- ASP.NET 页面禁止被 iframe 框架引用
两个站点: a.sample.com b.sample.com a.sample.com 站点中的一段示例 JS 代码: var iframe = document.createElement(&qu ...
- 当session过期后自动跳转到登陆页而且会跳出iframe框架
写项目时在重定向后一直存在一个问题就是重定向后登陆页面会出现在跳出的子框架里.
- session失效后,登录页面嵌入iframe框架
在登录页面的onload方法中加入以下代码解决: //防止登录页面嵌入iframe框架 if (top.location != self.location){ top.location=self.lo ...
- javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,
javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...
随机推荐
- ajax提交文件,django测试脚本环境书写,froms组件,钩子函数
1.在新版本中,添加app是直接在settings设置中,将INSTALLED_APPS里添加app名字, 但是他的完整写法是 'app01.apps.App01Config' 因为新版本做了优 ...
- 终端复用器tmux基础使用
简介对于经常操作Linux系统的同学来说,远程连接Linux服务器使用最多的工具是SecureCRT或者Xshell,而将此时的环境称为终端环境.Tmux是两个单词的缩写,即“Terminal Mul ...
- Redis安装与配置问题
Redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted set ...
- Linux ps 查看进程
[root@wang /]# ps aux ps -elf ^C [root@wang /]# ps aux USER PID %CPU %MEM VSZ RSS TTY STAT START TIM ...
- 最新 央视网java校招面经 (含整理过的面试题大全)
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.央视网等10家互联网公司的校招Offer,因为某些自身原因最终选择了央视网.6.7月主要是做系统复习.项目复盘.LeetCo ...
- 洛谷 题解 P4158 【[SCOI2009]粉刷匠】
状态: dp[i][j][k][0/1]: 到达第i行时, 到达第j列时, 刷到第k次时, 这一格有没有刷对 转移 换一块木板时肯定要多刷一次 dp[i][j][k][0]=max(dp[i-1][m ...
- Orderly Class
题目链接: https://nanti.jisuanke.com/t/40449 题目大意:给出两个长度相同的不同字符串A, B.可以对A的任意长度区间进行一次翻转,问有多少种方法可以使得翻转后两字符 ...
- SpreadJS:一款高度类似Excel的开发工具,功能涵盖Excel的 95% 以上
Excel 作为一款深受用户喜爱的电子表格工具,借助其直观的界面.出色的计算性能.数据分析和图表,已经成为数据统计领域不可或缺的软件之一. 基于Excel对数据处理与分析的卓越表现,把Excel的功能 ...
- Linux命令中dd的作用
Linux命令中用vi编辑文本时dd的作用是删除整行文本的信息.
- 你除了在客户端上会使用Cookie,还能使用哪些可以作为数据缓存呢?
问题如标题,直奔主题.介绍下另两种缓存. 1.sessionStorage.localStorage localStorage: 是一种你不主动清除它,它会一直将存储数据存储在客户端的存储方式,即使你 ...