Home > Web Front-end > JS Tutorial > body text

jquery+ajax makes iframe adaptive in height when applying it

php中世界最好的语言
Release: 2018-04-26 15:32:14
Original
1842 people have browsed 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) { }
    }
}
Copy after login

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 () {
});
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template