jquery+ajax macht den Iframe bei der Anwendung höhenadaptiv

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen vorstellen, wie Sie jquery+ajax bei der Anwendung von iframe an die Höhe anpassen und wie Sie jquery+ajax bei der Anwendung von iframe an die Höhe anpassen können Ein praktischer Koffer, einer. Steh auf und schau mal.

Die adaptive iframe-Höhe selbst ist eine sehr einfache Methode, bei der die Höhe nach dem Laden der Seite neu berechnet wird.

//公共方法：设置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) { }
    }
}

Rufen Sie die reSetIframeHeight();-Methode auf.

Aber es gibt eine andere Situation, in der Jquery Ajax zum Anfordern von Daten verwendet wird. Die Daten werden nach Abschluss des Hauptvorgangs geladen und die HTTP-Anfrage wird noch gestellt. Zu diesem Zeitpunkt belegen keine Daten die Fensterhöhe , und die reSetIframeHeight-Methode kann die Höhe nicht berechnen.

Zu diesem Zeitpunkt denken wir über eine Methode nach: Wann kann Ajax ausgeführt werden? Natürlich ist das Complete-Ereignis , wenn die Ausführung abgeschlossen ist.

Aber wir können nicht auf jeder Seite eine Verarbeitung zum Ajax Complete-Ereignis hinzufügen. Hier werden die globalen Variablen von jquery ajax verwendet.

Code zur Handhabung der Ajax- und Iframe-Anpassung:

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

Führen Sie zuerst reSetIframeHeight aus und rufen Sie dann reSetIframeHeight auf, nachdem jedes Ajax abgeschlossen ist.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie JQuery Iframe an die Front-End-Höhe anpasst

JQuery bringt das Dom-Element ein die Iframe-Seite (angehängter Code)

domänenübergreifende jQuery-Operation DOM-Methode im Iframe

Das obige ist der detaillierte Inhalt vonjquery+ajax macht den Iframe bei der Anwendung höhenadaptiv. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!