如何让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" ></iframe>
参考网址:http://caibaojian.com/iframe-adjust-content-height.html(iframe高度自适应的6个方法)

原文地址:https://www.cnblogs.com/BeenTogether/p/11325521.html

时间: 2024-11-08 11:04:15

如何让iframe框架和主页面共用一个滚动条(也称为:iframe高度自适应问题)的相关文章

Javscript调用iframe框架页面中函数的方法

Javscript调用iframe框架页面中函数的方法,可以实现iframe之间传值或修改值了, 访问iframe里面的函数: window.frames['CallCenter_iframe'].hw_CallIn(callerid,sessionid); 说明: CallCenter_iframe为iframe的id hw_CallIn为iframe中页面中的方法名 callerid和sessionid为方法中的参数 例子如下:index.html <a href="#" o

嵌入的iframe框架自适应宽度代码

今天在给客户做一个提取底部,插入了一个从网上下载的头部代码,由于插入的框架底部没有自适应,我这边电脑打开看着没事,发给对方,底部小了,原因是对方的电脑比自己要宽,下面由魅力网络为大家解决这个问题 解决办法是:让插入的iframe框架代码自适应浏览器的宽度 <iframe id="frame_content" src="dibu.html" scrolling="no" frameborder="0"  width=&qu

在Iframe框架下如何跳转到登录界面

在Iframe框架下跳转到登录界面总会跳到子界面中,类似于下图 试用Respon.Redirect()不行, 用Js函数,但我跳转代码都是写在cs文件中的,用Respose.write(),js函数根本没有执行. 最后看到一文章,在后台用Respon.Redirect(),而在登录界面中加入js,如下代码 <script language="JavaScript" type="text/javascript"> if (window != top) to

我的第一篇文章--iframe框架

今天遇到一个问题,遇上一个让我百度都没有找到答案的问题,用iframe框架的时候,我我每次刷新页面都会导致页面回到第一页去,而不是保留在当前页面,让我很无奈,有的同志倒是回复了,但是太抽象,完全不知道在说什么,说可以用cookie,配合什么Session可以做出效果,为什么这么麻烦,没有简单点的么,或者有没有直接js控制刷新,或者有没有直接可以不适用框架做到跳转呢,有哪位大神能够指点一下么,跪求啊

JSP中解决session超时跳转到登陆页面并跳出iframe框架或局部区域的方法

//方法1: 重定向到登录页,但是不支持跳出iframe//response.sendRedirect("/dormitory/toLoginPage"); //方法2:以输出页面并请求到登录页面的形式跳转到登录页面,可以跳出iframe(推荐)PrintWriter out = response.getWriter(); out.println("<html>"); out.println("<script>"); ou

javascript_获取iframe框架中元素节点的属性值

1. DOM:文档对象模型 [window 对象] 它是一个顶层对象,而不是另一个对象的属性即浏览器的窗口. [document 对象] 该对象是window和frames对象的一个属性,是显示于窗口或框架内的一个文档. 2. JS原生方法获得iframe的window对象 document.getElementById("ifr").contentWindow; 3. 获取iframe框架的思路: (1)找到iframe框架 (2)获取iframe框架的window对象 (3)获取w

ExtJs非Iframe框架加载页面实现

在用Ext开发App应用时,一般的框架都是左边为菜单栏,中间为tab页方式的显示区域.而tab页面大多采用的嵌入一个iframe来显示内容.但是采用iframe方式有一个很大的弊端就是每次在加载一个新的iframe时都要将Ext的核心js,css文件重新加载.由于Ext是一个庞大的类库,这些文件的体积都很庞大,仅仅是ext-all.js就有400多k,所以用iframe方式加载就大大降低了效率.为了能解决这个问题,我推荐使用Ext.Panel的autoload模式进行加载页面.用这种模式加载就可

JavaScript跳出iframe框架

一.window.top top属性返回最顶层的先辈窗口. 该属性返回对一个顶级窗口的只读引用.如果窗口本身就是一个顶级窗口,top属性存放对窗口自身的引用.如果窗口是一个框架,那么top属性引用包含框架的顶层窗口. 二.window.self self属性可返回对窗口自身的只读引用.等价于Window属性. 三.window.location window.location(MDN)对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面. 3.1 示例 window.locatio

session过期跳转到登陆页面并跳出iframe框架的两个方法

最近在做拦截器,判断用户登录后操作超时,失去权限然后要重新登录,但是用的iframe,返回的登陆页总是在框架中显示,我百度了下,总是只有其中一个方法,现在分享下两种解决方法,希望对你们有帮助: 方法一: 一般使用filter过滤用户是否登录,如果用户没有登陆则转向登陆页面,这时候可以使用response.sendRedirect().但当在页面上使用了iframe后,发现被重定向的只是父页面中的iframe区域,登陆页面内容显示在该区域中.说明在过滤器中发送重定向请求时,是在iframe页面发送