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" οnlοad="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>

 

转载于:https://www.cnblogs.com/jcz1206/p/3990934.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
设置iframe高度适应有多种方法。其一种方法是使用JavaScript函数来动态调整iframe高度。在这个方法,你可以使用iframe的onload事件和JavaScript函数来设置iframe高度。具体代码如下: 在iframe标签添加onload事件和id属性: ``` <iframe width="778" align="center" height="200" id="win" name="win" onload="SetWinHeight(this)" frameborder="0" scrolling="no" src="1.htm"></iframe> ``` 然后在JavaScript定义SetWinHeight函数,根据内容的高度设置iframe高度: ``` <script> 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; } } } } </script> ``` 另一种方法是使用iframe的onload事件和JavaScript函数来设置iframe高度。这种方法适用于多种浏览器,包括IE6/IE7/IE8/Firefox/Opera/Chrome/Safari。具体代码如下: 在iframe标签添加onload事件和id属性: ``` <iframe src="http://www.fufuok.com/" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" onLoad="iFrameHeight()"></iframe> ``` 然后在JavaScript定义iFrameHeight函数,根据内容的高度设置iframe高度: ``` <script type="text/javascript" language="javascript"> function iFrameHeight() { var ifm = document.getElementById("iframepage"); var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument; if (ifm != null && subWeb != null) { ifm.height = subWeb.body.scrollHeight; } } </script> ``` 这些方法可以帮助你实现iframe高度适应。通过在iframe标签添加相应的事件和函数,根据内容的高度来自动调整iframe高度,从而实现高度的自适应

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值