jquery+ajax makes iframe adaptive in height when applying it

This time I will bring you jquery ajax to make it adapt to the height when applying iframe, and jquery ajax to make it adapt to the height when applying iframe. What are the precautions?The following is a practical case, let's take a look one time.

iframe adaptive height itself is a very simple method, which is to recalculate the height after the page is loaded.

//公共方法：设置iframe的高度以保证全部显示数据
//function SetPageHeight() {
//    var iframe = getUrlParam('ifname');
//    var myiframe = window.parent.
document
.getElementById(iframe);
//     iframeLoaded(myiframe);
//}
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 = 100;
        iframeLoaded(oIframe);
    }
    catch (err)
    {
        try {
         parent.document.getElementById(window.name).height = 1000;
          } catch (err2) { }
    }
}

Call the reSetIframeHeight(); method.

But there is another situation where jquery ajax is used to request data. After the body load is completed, the data is still making an http request. At this time, there is no data occupying the window height, and the reSetIframeHeight method cannot calculate the height.

At this time, we think of a method: when can ajax be completed? Of course, the Complete event is when the execution is completed.

But we cannot add processing to the ajax Complete event in each page. The global variables of jquery ajax are used here.

Code for processing ajax and iframe adaptation:

var sendcount = 0;
var completecount = 0;
// 添加ajax全局
事件处理
。
reSetIframeHeight();
$(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 () {
});

First execute reSetIframeHeight, and then call reSetIframeHeight after each ajax is completed.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How does jquery make iframe adaptive to the front-end height

Jquery gets the Dom element in the iframe page (attached Code)

jQuery cross-domain operation DOM method in iframe

The above is the detailed content of jquery+ajax makes iframe adaptive in height when applying it. For more information, please follow other related articles on the PHP Chinese website!