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/ ...
随机推荐
- JAVA企业级应用TOMCAT实战(一)
一. Tomcat简介 Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta 项目中的一个核心项目,由Apache.Sun和其他一些公司及个人共 ...
- build.gradle 详解(一)
简述: 1) Java 开发中有两个大名鼎鼎的项目构建 ANT.Maven. 2) Google 推荐使用的 Android studio 是采用 Gradle 来构建项目.Gradle 是一个非常先 ...
- 【Linux常见命令】rm命令
rm - remove files or directories rm命令用于删除一个文件或者目录. 语法: rm [OPTION]... FILE... 参数: -f 强制删除文件 -r 递归,用于 ...
- Python3的日期和时间
2019独角兽企业重金招聘Python工程师标准>>> python 中处理日期时间数据通常使用datetime和time库 因为这两个库中的一些功能有些重复,所以,首先我们来比较一 ...
- 现代软件工程讲义 如何提出靠谱的项目建议 NABCD
互联网时代对于创新者来说, 既是一个伟大的时代, 又是一个糟糕的时代. 你有很多机会做出影响世界的产品, 但是, 似乎任何想法都被别人想到过了, 做出来了, 上市了, 移植到各种平台上去了- 那么 ...
- 软件——Jira是什么
JIRA这个工具接触有好几年了,在多个海外项目上都用过这个工具.去年又在项目上深度使用后就有点爱不释手了,回国后也在找机会推荐给其它项目上用.最近正好有新项目需要用,借这个机会把JIRA的配置学习的过 ...
- k-modes聚类算法
为什么要用k-modes算法 k-means算法是一种简单且实用的聚类算法,但是传统的k-means算法只适用于连续属性的数据集(数值型数据),而对于离散属性的数据集,计算簇的均值以及点之间的欧式距离 ...
- 【Scala】利用akka实现Spark启动通信
文章目录 思路分析 步骤 一.创建maven工程,导包 二.master进程代码开发 三.worker进程代码开发 思路分析 1.首先启动master,然后依次启动worker 2.启动worker时 ...
- React Native 架构一览
一.架构设计 整体上分为三大块,Native.JavaScript 与 Bridge: Native 管理 UI 更新及交互,JavaScript 调用 Native 能力实现业务功能,Bridge ...
- 在本地运行Kubernetes的3种主流方式
作者简介 Chris Tozzi,曾担任记者和Linux管理员.对开源技术.敏捷基础架构以及网络问题兴趣浓厚.目前担任高级内容编辑,并且是Fixate IO的DevOps分析师. 原文链接: http ...