在数飞OA的开发过程中,遇到问题:一个jsp页面嵌套一个html页面。
〈iframe id="docDetail" width="100%" height="200"
frameborder="0"
src="a.htm"〉
〈/iframe〉
而a.html不是固定大小的,这个时候嵌套的iframe就会出现滚动条。
通过js获取iframe的高度,然后动态的改变,这样就不会出现滚动条。
方式一:在jsp的body里增加onload方法
〈body onload="javascript:ResizeFrame();"〉
function ResizeFrame() {
var oFrame = document.getElementById("docDetail");
var vHeight= document.frames("docDetail").document.body.scrollHeight;
oFrame.height = vHeight;
}
通过document.frames("docDetail")可以获得确实的高度
通过document.getElementById("docDetail")可以改变frame的高度。
方式二:在html的body里增加onload方法:
〈body onLoad="javascript:ReSize();"〉
function ReSize() {
//自动调节窗口的大小
var vHeight = document.body.scrollHeight + 30;
window.resizeTo(650, vHeight);
}
******************************************************
获取父页面iframe的高度时需要注意的:
var _head = window.parent.parent.document.getElementById("mainIframe").height;
var _head = window.parent.parent.document.frames("mainIframe").height;
使用上面方式可以获取到准确的高度;
******************************************************
var _head = window.parent.parent.frames("mainIframe").height;
使用上面的方式无法获取到高度;
分享到:
相关推荐
javascript动态调整iframe高度
主要介绍了JS动态修改iframe高度和宽度的方法,实例分析了javascript操作iframe属性的技巧,非常具有实用价值,需要的朋友可以参考下
当你在页面上使用了iframe之后...这里我提供一个兼容IE/NS/Firefox的javascript脚本实现动态调整iframe的高度。如果需要调整宽度的话,原理是一样的,本文不加详述。 首先,在你的主页面上必须包含以下这段javascript代
iframe自适应高度:根据屏幕的高度,自动增减。包括适应浏览器高度的改变。
不得不用到iframe,且被强烈要求不能让它出现滚动条!嵌入的页面肯定是高度不一的,页面中也不能出现大片空白,所以也不能写死高度!真是麻鬼烦啊!
动态的改变IFrame的高度,实现IFrame自动伸展,父页面也自动神缩 原理: 在IFrame子页面一加载的时候,调用父IFrame对象,改变其高度 具体实现一: 1、在IFrame的具体页面(就是子页面),添加JavaScript 代码如下: ...
动态的改变IFrame的高度,实现IFrame自动伸展,父页面也自动神缩 原理: 在IFrame子页面一加载的时候,调用父IFrame对象,改变其高度 具体实现一: 1、在IFrame的具体页面(就是子页面),添加JavaScript 代码如下: ...
iframe 高度 iframe 高度是一个允许跨域消息传递的简单工具,特别是针对响应式设计调整 iframe 高度的大小。 用法 将 parent.js 文件添加到包含页面,将 child.js 添加到包含页面。 在父页面中调用: IframeResize...
本文实例讲述了JS实现iframe自适应高度的方法。分享给大家供大家参考,具体如下: 之前一直被iframe自适应高度的问题困扰,很多JS代码在FF里面似乎就变成哑巴了。后来下面这段代码终于被我从万千号称兼容FF的代码堆...
由于项目上的需要,要用一个iframe高度自适应的功能,在google上搜了很久,找了一些修改了下。大家可以测试下。
iframe尺寸调整器React 该库是用于的官方React接口,该接口可自动调整相同和跨域iFrame的高度和宽度,以适应其包含的内容。 它提供了一系列功能来解决使用iFrame时最常见的问题,其中包括: 将iFrame的高度和宽度...
iFrame Resizer V4 通过该库,可以自动调整相同和跨域iFrame的高度和宽度的大小,以适合其包含的内容。 它提供了一系列功能来解决使用iFrame时最常见的问题,其中包括: 将iFrame调整为内容大小的高度和宽度。 适用...
本文实例讲述了javascript实现框架高度随内容改变的方法。分享给大家供大家参考。具体如下: 有两种方法: 一、就是通过父页面改变 这里要理解框架的两个属性 contentWindow 和contentDocument 两个属性的意思和...
5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select的同步 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉...
5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select的同步 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉...
lazysizes是一种快速(无垃圾),对SEO友好且可自动初始化的lazyloader,用于图像(包括响应图像picture / srcset ),iframe,脚本/小部件等。 它还通过区分关键视图元素和近视图元素来优先分配资源,以使感知性能...
iframe改变高度.html jQuery-aniview jQuery仿天猫完美加入购物车 jQuery圆形统计插件 README.md roundabout slider1.2 word 仪表盘.html 仿淘宝轮播(无缝做不出来) 仿苹果导航菜单 切换(给未来元素添加事件) 列表项...
如:<script type="text/javascript" src="ymPrompt.js"></script> 2、在页面中引入对应的皮肤文件的CSS,如: 3、自定义组件的默认配置信息(此步骤可选,该方法可以在任意时间调用) 页面的js中通过ymPrompt....