jquery+ajax rend l'iframe adaptatif en hauteur lors de son application

Cette fois, je vais vous apporter les précautions sur la façon de faire en sorte que jquery+ajax s'adapte à la hauteur lors de l'application de l'iframe, et jquery+ajax pour le faire s'adapter à la hauteur lors de l'application de l'iframe. un étui pratique, un Levez-vous et jetez un œil.

la hauteur adaptative iframe elle-même est une méthode très simple, qui consiste à recalculer la hauteur après le chargement de la page.

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

Appelez la méthode reSetIframeHeight();

Mais il existe une autre situation dans laquelle jquery ajax est utilisé pour demander des données. Les données se trouvent une fois le chargement du corps terminé et la requête http est toujours en cours. À l'heure actuelle, aucune donnée n'occupe la hauteur de la fenêtre. , et la méthode reSetIframeHeight ne peut pas calculer la hauteur.

En ce moment, nous réfléchissons à une méthode : quand ajax peut-il être exécuté ? Bien sûr, l'événement Complete correspond au moment où l'exécution est terminée.

Mais nous ne pouvons pas ajouter de traitement à l'événement ajax Complete dans chaque page. Les variables globales de jquery ajax sont utilisées ici.

Code pour gérer l'adaptation ajax et iframe :

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

Exécutez d'abord reSetIframeHeight, puis appelez reSetIframeHeight une fois chaque ajax terminé.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment jquery rend l'iframe adaptatif à la hauteur du front-end

Jquery obtient l'élément Dom dans la page iframe (code ci-joint)

méthode DOM d'opération inter-domaines jQuery dans iframe

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!