iframe中有ajax,设置iframe自适应高度
-------------------------------------------------------------------
http://www.jb51.net/article/15780.htm
http://www.jb51.net/article/48936.htm
http://bestchenwu.iteye.com/blog/1231956
在iframe外添加此js,以下两个都可以
------------1----------------------------
function iFrameHeight() {
var ifm = document.getElementById("cateFrame");
var subWeb = document.frames ? document.frames["cateFrame"].document : ifm.contentDocument;
if (ifm != null && subWeb != null) {
ifm.height = subWeb.body.scrollHeight;
}
}
-----------2-----------------------
function SetWinHeight(obj) {
var win = obj;
if (document.getElementById) {
if (win && !window.opera) {
if (win.contentDocument && win.contentDocument.body.offsetHeight)
win.height = win.contentDocument.body.offsetHeight;
else if (win.Document && win.Document.body.scrollHeight)
win.height = win.Document.body.scrollHeight;
}
}
}
------iframe做些修改--------
onload 方法,可以写iFrameHeight()也可以写Javascript:SetWinHeight(this)
<iframe id="cateFrame" name="cateFrame" width="100%" frameborder="0" scrolling="no"
marginwidth="0" marginheight="0" src="welcome.aspx" onload="iFrameHeight()">
<%-- Javascript:SetWinHeight(this)--%>
</iframe>
----------------以下是有ajax的情况下使用的-------------------
在iframe页面内body后添加此js 再次设置一下iframe高度
<script type="text/javascript">
var iframeLoaded = function (iframe) {
if (iframe.src.length > 0) {
if (!iframe.readyState || iframe.readyState == "complete") {
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
}
}
}
//分页时重新设置 iframe 高度 ; 修改后:iframe.name = iframe.id
var reSetIframeHeight = function () {
//try {
var oIframe = parent.document.getElementById(window.name);
//oIframe.height = 80;
iframeLoaded(oIframe);
// }
// catch (err) {
// try {
// parent.document.getElementById(window.name).height = 500;
// } catch (err2) { }
// }
}
// reSetIframeHeight();
var sendcount = 0;
var completecount = 0;
// 添加ajax全局事件处理。
$(document).ajaxStart(function (a, b, c) {
}).ajaxSend(function (e, xhr, opts) {
sendcount++;
}).ajaxError(function (e, xhr, opts) {
}).ajaxSuccess(function (e, xhr, opts) {
}).ajaxComplete(function (e, xhr, opts) {
completecount++;
reSetIframeHeight();
}).ajaxStop(function () {
});
</script>
iframe中有ajax,设置iframe自适应高度的更多相关文章
- 设置div自适应高度滚动
<body> <div id="divc" style="overflow: auto;"> </div> <a id ...
- 如何设置div自适应高度
1.给div添加overflow属性 .div{ width:760px; overflow:hidden; } 2.其他的设置height:auto 等我测试没有效果
- js实现iframe自适应高度
转自:http://www.jb51.net/article/15780.htm 对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的! 不带边框的iframe因为能 ...
- iframe自适应高度的多种方法方法小结
对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的 不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 ifram ...
- iframe自适应高度的多种方法方法小结(转)
对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的 ...
- Html-Css-iframe的自适应高度方案
先看一个示例,有两个页面,1.html通过iframe嵌入2.html,两个页面都是同域的 a.html <!DOCTYPE html> <html> <head> ...
- div有最小高度且自适应高度
DIV最小高度且自适应高度 在IE6中,如果子容器的高度超过父容器的时候,父容器会被子容器撑开,所以我们可以直接设置一个height的高度值即可.但是在IE7和firefox就不行了,它不会自动撑 ...
- 如何设置iframe高度自适应,在跨域的情况下能做到吗?
在页面上使用iframe来动态加载页面内容是网页开发中比较常见的方法.在父页面中给定一个不带滚动条的iframe,然后对属性src指定一个可加载的页面,这样当父页面被访问的时候,子页面可以被自动加载. ...
- iframe之间通信问题及iframe自适应高度问题
下面本人来谈谈iframe之间通信问题及iframe自适应高度问题. 1. iframe通信 分为:同域通信 和 跨域通信.所谓同域通信是指 http://localhost/demo/iframe/ ...
随机推荐
- Inno Script - How to make “I Accept the Agreement” radio button on EULA page selected by Default
出处: https://stackoverflow.com/questions/11187022/inno-script-how-to-make-i-accept-the-agreement-radi ...
- Apache多处理模块
介绍 Apache HTTP 服务器被设计为一个功能强大,并且灵活的 web 服务器, 可以在很多平台与环境中工作.不同平台和不同的环境往往需要不同 的特性,或可能以不同的方式实现相同的特性最有效率. ...
- 【linux运维】rsync+inotify与sersync+rsync实时数据同步笔记
Rsync(remote sync)远程同步工具,通过rsync可以实现对远程服务器数据的增量备份通过,但rsync自身也有缺陷,同步数据时,rsync采用核心算法对远程服务器的目标文件进行对比,只进 ...
- Android Studio快捷键动态演示
Android Studio出来很久了,大部分已经转过来了,相对于Eclipse又是毋庸置疑,更好的使用快捷键必定达到事半功倍的效果. 友情提示:某些电脑按F1-F12键需要先按住FN,比如我的Mac ...
- React Native中自定义导航条
这是2017年年初开始的公司的项目,对于导航条的要求很高,Android和iOS上必须用一致的UI,按钮位置还有各种颜色都有要求,而且要适应各种奇葩要求. 尝试了一下当时React Native自带的 ...
- Nakamori Akina
听过中森明菜的歌以后,一直想写点什么.恰好前段时间看过她的一个访谈https://b23.tv/av13810011,节目里已经39岁左右的她看着已经有些衰老,但是那份属于她的天真却保持的很好. 节目 ...
- 有向图强连通分量SCC(全网最好理解)
定义: 在有向图中,如果一些顶点中任意两个顶点都能互相到达(间接或直接),那么这些顶点就构成了一个强连通分量,如果一个顶点没有出度,即它不能到达其他任何顶点,那么该顶点自己就是一个强连通分量. 做题的 ...
- 洛谷P1771 方程的解
P1771 方程的解 都知道这个题可以用隔板法做 把这个\(g(x)\)想象为.....\(g(x)\)个苹果? 因为解是正整数,所以给这些"苹果"分组的时候每组最少有一个 然后我 ...
- postman(环境设置)
1.点击小齿轮进入到环境变量添加页面,点击add添加环境变量 2.新增环境输入变量名称和变量值 3.添加成功 4.接口中设置变量,切换环境进行传参 5.调用环境变量断言 调用环境变量中的phone变量 ...
- startUML简单使用教程
最近在startUML上画图搞得我一个头两个大,找了一些比较实用的小方法分享给大家. 类图是可视化地表现类的属性和方法,以及类与类之间的关系. 1.类 a.类 普通实体类,它有对应的属性和方法: 双击 ...