Tutoriel des compétences de production de pages Web: Iframe Adaptive Height

Auteur：Eve Cole Date de mise à jour：2025-04-21 07:48:02

Introduction de l'article de wulin.com (www.vevb.com): Quelqu'un n'a peut-être pas encore rencontré ce problème. Expliquons d'abord quelle est la hauteur adaptative. La hauteur adaptative dite iframe signifie que sur la base de la beauté de l'interface et de l'interaction, la bordure et la barre de défilement de l'iframe sont cachées, ce qui rend impossible de voir qu'il s'agit d'un iframe. Si l'Iframe appelle toujours la même page de hauteur fixe, nous avons juste besoin d'écrire la hauteur de l'Iframe à mort. Et

Recherchez la hauteur adaptative IFRAME via Google, avec plus de 5W de résultats, recherchez la hauteur de hauteur IFRAME de la hauteur adaptative, avec plus de 2W de résultats.

J'ai lu les dizaines d'articles dans les articles précédents et j'ai creusé un grand nombre de réimpressions. Il y a trois ou cinq articles originaux. Dans ces articles originaux, ils ne parlent essentiellement que de la façon de s'adapter aux choses statiques, mais ils ne considèrent pas comment faire une synchronisation dynamique après que JS ait opéré DOM. De plus, en termes de compatibilité, la recherche a également été incomplète.

J'espère faire des recherches approfondies dans ces deux aspects.

Peut-être que quelqu'un n'est pas encore entré en contact avec ce problème. Expliquons d'abord quelle est la hauteur adaptative. La hauteur adaptative dite iframe signifie que sur la base de la beauté de l'interface et de l'interaction, la bordure et la barre de défilement de l'iframe sont cachées, ce qui rend impossible de voir qu'il s'agit d'un iframe. Si l'Iframe appelle toujours la même page de hauteur fixe, nous avons juste besoin d'écrire la hauteur de l'Iframe à mort. Si l'IFRAME veut changer de pages ou si la page incluse doit effectuer des opérations dynamiques DOM, le programme doit synchroniser la hauteur de l'IFRAME et la hauteur réelle de la page incluse.

Soit dit en passant, si vous devez utiliser l'IFRAME, cela causera trop de problèmes au développement frontal.

Il existe environ deux pratiques traditionnelles:

Méthode 1: Une fois que chaque page incluse a été chargée en chargeant son propre contenu, exécutez JS pour obtenir la hauteur de cette page, puis synchroniser la hauteur d'Iframe de la page parent.

Méthode 2: Exécutez JS dans l'événement Onload de la page principale iframe, obtenez le contenu de hauteur de la page inclus, puis synchronisez la hauteur.

Du point de vue de la maintenance du code, la méthode deux est meilleure que la méthode un, car la méthode un, chaque page incluse doit introduire un morceau du même code pour ce faire, et de nombreuses copies ont été créées.

Les deux méthodes ne traitent que des choses calmes, c'est-à-dire qu'elles ne sont exécutées que lorsque le contenu est chargé. Si JS exploite les changements de hauteur causés par le DOM, il n'est pas très pratique.

Si vous effectuez un intervalle dans la fenêtre principale, obtenez constamment la hauteur de la page incluse, puis la synchronisation est-elle pratique et résout le problème de JS en fonction du DOM? La réponse est oui.

Page de démonstration: page principale iframe_a.html, contenant des pages iframe_b.htm et iframe_c.html

Exemple de code de page principale:

function reinitiframe () {

var iframe = document.getElementById (frame_content);

essayer{

iframe.height = iframe.contentwindow.Document.DocumentElement.ScrollHeight;

} catch (ex) {}

}

Window.SetInterval (ReinIFrame (), 200);

</cript> y aura-t-il un problème avec l'efficacité?

J'ai fait le test et ouvert 5 fenêtres (IE6, IE7, FF, Opera, Safari) pour exécuter ce code, qui n'aura aucun impact sur le CPU, et il sera même ajusté à 2 ms, sans aucun impact (essentiellement maintenu à 0% d'occupation).

Parlons des problèmes de compatibilité de chaque navigateur. Comment atteindre la bonne hauteur. Il vaut principalement la peine de comparer les deux corps. Notez que cet article utilise ce doctype. Différents doctypes ne devraient pas affecter le résultat, mais si votre page ne déclare pas Doctype, en ajoutez-en un d'abord.

<! Doctype HTML Public - // W3C // DTD HTML 4.01 // en> Ajouter le code de test suivant à la page principale pour publier ces deux valeurs, Code Exemple:

<div> <Fut-Button> Vérifier la hauteur </fonticieuse> </div> <Script Type = Text / JavaScript>

fonction checkHeight () {

var iframe = document.getElementById (frame_content);

var bheight = iframe.contentwindow.document.body.scrollHeight;

var dheight = iframe.contentwindow.Document.DocumentElement.ScrollHeight;

alerte (bheight: + bheight +, dheight: + dheight);

}

</cript> est chargé et un calque absolument positionné peut être commuté pour modifier la hauteur de la page dynamiquement. Si le calque est élargi, la hauteur de la page sera prise en charge. Exemple de code:

<div> <Fut-Button> Togue de la superposition </button>

</div>

</div>

fonction toggleOverlay () {

var superlay = document.getElementById ('superposition');

overlay.style.display = (superlay.style.display == 'Aucun')? «Block»: «Aucun»;

}

</cript> Le suivant répertorie les valeurs de test du code ci-dessus dans chaque navigateur:

(bheight = body.scrollheight, dheight = documentElement.scrollHeight, rouge = valeur d'erreur, vert = valeur correcte)

/ La couche est cachée lorsque la couche est étendue

bheight dheight bheight dheight

IE6 184 184 184 303

IE7 184 184 184 303

Ff 184 184 184 303

Opéra 181 181 300 300

Safari 184 184 303 184

Ignorons le problème selon lequel l'opéra est de 3 pixels de moins que les autres… On peut voir que s'il n'y a pas de positionnement absolu, les deux valeurs sont égales et peu importe laquelle vous prenez.

Mais s'il y en a, alors les performances de chaque navigateur sont différentes, et il est mal de prendre une valeur seule. Mais une règle peut être trouvée, c'est-à-dire prendre deux valeurs maximales et être compatibles avec chaque navigateur. Notre code de page principal doit donc être transformé en ceci:

function religiframe () {var iframe = document.getElementById (frame_content);

essayer{

var bheight = iframe.contentwindow.document.body.scrollHeight;

var dheight = iframe.contentwindow.Document.DocumentElement.ScrollHeight;

var height = math.max (bheight, dheight);

iframe.height = hauteur;

} catch (ex) {}

}

Window.SetInterval (ReinIFrame (), 200); De cette façon, le problème de compatibilité est essentiellement résolu. Soit dit en passant, non seulement la couche absolument positionnée affecte la valeur, mais le flotteur entraînera également la différence entre les deux valeurs.

Si vous démontrez la démo, vous constaterez que dans d'autres navigateurs, à l'exception de c'est-à-dire lorsque la couche est élargie puis cachée, la valeur de hauteur obtenue est toujours maintenue à la hauteur élargie de 303, plutôt que la vraie valeur cachée 184, ce qui signifie qu'il ne peut pas rétrécir après avoir grandi. Ce phénomène peut également se produire lors de la commutation entre différentes pages incluses. Lors du passage d'une page haute à une page basse, la hauteur obtenue est toujours de la même valeur élevée.

Il peut être résumé comme: Lorsque la hauteur du formulaire IFRAME est supérieure à la hauteur réelle du document, la hauteur est prise comme la hauteur de la forme, et lorsque la hauteur du formulaire est inférieure à la hauteur réelle du document, la hauteur réelle du document est considérée comme la hauteur réelle du document. Par conséquent, il est nécessaire de trouver un moyen de régler la hauteur à une valeur inférieure que le document réel avant de le synchroniser. Par conséquent, ajoutez onload = this.height = 100 ″ à l'Iframe, afin que la page soit suffisamment courte lors du chargement, puis synchronisez à la même hauteur.

Cette valeur est déterminée dans les applications réelles et est suffisamment courte mais pas trop courte, sinon il y aura un scintillement évident dans les navigateurs tels que FF. Lorsque le DOM est opéré, la page principale ne peut pas être surveillée, de sorte que la hauteur peut être réduite après le fonctionnement du DOM.

Dans l'un de mes projets réels, je n'ai pas fait cette chose en termes de coûts et d'avantages de pesée, car je dois insérer ce code dans chaque fonction DOM, ce qui est trop cher, et en fait, il n'est pas si fatal de rétrécir la couche ou de ne pas le réduire. Y compris dans la démo, cette chose n'a pas été faite. Si le lecteur a une meilleure façon, faites-le moi savoir.

Voici le code de la page principale finale:

function reinitiframe () {

var iframe = document.getElementById (frame_content);

essayer{

var bheight = iframe.contentwindow.document.body.scrollHeight;

var dheight = iframe.contentwindow.Document.DocumentElement.ScrollHeight;

var height = math.max (bheight, dheight);

iframe.height = hauteur;

} catch (ex) {}

}

Window.SetInterval (ReinIFrame (), 200);

</cript>