Maison > interface Web > js tutoriel > le corps du texte

Solution au problème de hauteur adaptative iframe dans les compétences application_javascript jquery ajax

WBOY
Libérer: 2016-05-16 16:52:35
original
967 Les gens l'ont consulté

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.

Le code est le suivant :

Copier le codeLe code est le suivant :

//Méthode publique : Définition de la hauteur de l'iframe pour garantir que toutes les données sont affichées
//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.content Window.document.documentElement .scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
}
}
}
//Réinitialiser la hauteur de l'iframe lors de la pagination ; Après modification : iframe.name = iframe.id
var reSetIframeHeight = function()
{
try {
var oIframe = parent.document. getElementById(window.name);
oIframe .height = 100;
           } catch (err2) {                                                                                                                                                                        ;

Mais il existe une autre situation dans laquelle jquery ajax est utilisé pour demander des données. Une fois le chargement du corps terminé, les données effectuent toujours une requête http. À ce stade, aucune donnée n'occupe la hauteur de la fenêtre et la méthode reSetIframeHeight. Je ne peux 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 :

Copier le code

Le code est le suivant :

var sendcount = 0;
var completecount = 0;

//Ajouter le traitement des événements globaux 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 une fois chaque ajax terminé, appelez reSetIframeHeight.

Testé et valide.
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal