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" >
<%-- 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>

时间: 2024-08-28 16:46:49

iframe中有ajax,设置iframe自适应高度的相关文章

iframe自适应高度的多种方法方法小结

对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的. 不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,现在,让我来告诉大 家一种iframe动态调整高度的方法,主要是以下JS函数: 第一种方法:代码简单,兼容性还可以,大家可以先测试下. function SetWinHeight(ob

iframe自适应高度

对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的,不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,现在,让我来告诉大 家一种iframe动态调整高度的方法,主要是以下JS函数: function SetWinHeight(obj) { var win=obj; if (documen

iframe自适应高度的多种方法

对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的 不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,现在,让我来告诉大 家一种iframe动态调整高度的方法,主要是以下JS函数: 第一种方法:代码简单,兼容性还可以,大家可以先测试下. function SetWinHeight(obj

js实现iframe自适应高度

转自:http://www.jb51.net/article/15780.htm 对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的! 不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,现在,让我来告诉大 家一种iframe动态调整高度的方法,主要是以下JS函数: 1 2 functio

关于HTML前端设置自适应高度的DIV问题

如果要设置DIV自适应高度,我们可以采用height:auto;这个属性:不过这个属性IE6又不支持了.是不是很头痛?其实解决这个问题不难,而且方法也不少,这里推荐一种:(假设我们需要控制的这个DIV最小高度是100px,超过时就让里面的信息自动撑开): .div{ height:auto!important; height:100px; min-height:100px; } 注释:因为!important在IE7和Firefox都可以读到,而且权重高于后面的height:100px:所以当在

Html-Css-iframe的自适应高度方案

先看一个示例,有两个页面,1.html通过iframe嵌入2.html,两个页面都是同域的 a.html <!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title>1.html</title> </head> <body> <iframe id="ifr" src="b.html" framebord

div有最小高度且自适应高度

DIV最小高度且自适应高度 在IE6中,如果子容器的高度超过父容器的时候,父容器会被子容器撑开,所以我们可以直接设置一个height的高度值即可.但是在IE7和firefox就不行了,它不会自动撑开. 如果要设置DIV自适应高度,我们可以采用height:auto;这个属性:不过这个属性IE6又不支持了.是不是很头痛?其实解决这个问题不难,而且方法也不少,这里推荐一种:(假设我们需要控制的这个DIV最小高度是100px,超过时就让里面的信息自动撑开): 1 2 3 4 5 .div{     h

DIV默认高度且自适应高度

转: 本文和大家重点讨论一下如何控制DIV最小高度又DIV自适高度问题,如果我们需要设置一个div高度,当里面的东西超过这个高度时,让这个容器自动被撑开,也就是DIV自适应高度.当里面的信息很少时候,我们就设置它一个最小的固定高度. 如何控制DIV最小高度又DIV自适高度 我们在用div布局的时候经常会遇到这样的一种情况:我们需要设置一个DIV高度,当里面的东西超过这个高度时,让这个容器自动被撑开,也就是DIV自适应高度.当里面的信息很少时候,我们就设置它一个最小的固定高度. 我们知道,在IE6

iframe 高度设置、iframe 自适应高度方法总结

谓iframe自适应高度,就是,基于界面美观和交互的考虑,隐藏了iframe的border和scrollbar,让人看不出它是个iframe.如果iframe始终调用同一个固定高度的页面,我们直接写死iframe高度就可以了.而如果iframe要切换页面,或者被包含页面要做DOM动态操作,这时候,就需要程序去同步iframe高度和被包含页的实际高度了. 如果iframe的高度没有确定,那将是初始的高度.iframe是网页中的一部分,其大小还要受到网页的限制,设置最高可以使用height="100