如何让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 ...
 
随机推荐
- centos(linux)-jdk配置
			
1.清理系统默认自带的jdk 在安装centos时,可能系统会默认安装了例如openjdk等,需要先手动卸载 先执行:rpm -qa | grep jdk (查看已经自带的jdk): 卸载命名:sud ...
 - VUE缓存:keep-alive
			
VUE缓存:动态keep-alive:https://www.jianshu.com/p/11f7dbc07ad3 keep-alive include和exclude无效问题:https://blo ...
 - mdk3洪水攻击教程
			
使得路由器崩溃,直到重启. 1.iwconfig 查看网卡 2.airmon-ng start wlan0 开启网卡监控 3.airodump-ng mon0 查看附近路由信息 4.mdk3 mon0 ...
 - Linux下文件搜索、查找、查看命令
			
Linux下文件搜索.查找.查看命令 1.最强大的搜索命令:find 查找各种文件的命令 2.在文件资料中查找文件:locate 3.搜索命令所在的目录及别名信息:which 4.搜索命令所在的目录及 ...
 - DB2 数据库权限
			
以下内容转载: http://blog.csdn.net/xiyuan1999/article/details/8135263 DB2中的权限 DB2 中有三种主要的安全机制,可以帮助 DBA 实现 ...
 - HttpServletResponse对象(转)
			
Web服务器收到客户端的http请求,会针对每一次请求,分别创建一个用于代表请求的request对象.和代表响应的response对象.request和response对象即然代表请求和响应,那我们要 ...
 - IPv4
			
1.IPv4分类地址 PC0(192.168.0.1) 和PC1(172.168.0.1)如果要ping通的话需要设置各自网关 PC0 设置IP 和 默认网关=路由器设置IP 2.Gigabit ...
 - 虚拟局域网VLAN的Packet tracer实验
			
ICMP的广播请求 Create PDU pc1发向交换机 交换机的其余端口向外发送该广播 ------------------------------------------------------ ...
 - numpy数组常用计算
			
在说numpy库数组的计算之前先来看一下numpy数组形状的知识: 创建一个数组之后,可以用shape来查看其形状,返回一个元组 例如:a = np.array([[1, 2, 3], [4, 5, ...
 - hyper-v虚拟机centos7网络配置
			
原文地址:https://jingyan.baidu.com/article/91f5db1b0279bd1c7e05e377.html hyper-v安装了centos7之后并不能上网,这里简单介绍 ...