Méthode d'implémentation adaptative de la hauteur de la fenêtre iframe

Auteur：Eve Cole Date de mise à jour：2025-02-22 14:16:01

Il y a une page dans Domaina index.html, imbriqué avec un autre.html dans une page dans DomainB via iframe

Parce que la page autre.html s'affiche dans iframe, et le contenu de la page augmentera ou diminuera dynamiquement, maintenant la barre de roulement iframe doit être supprimée

En raison des limites des stratégies homologues JavaScript, les opérations croisées ne peuvent pas être effectuées, ce qui rend le problème plus difficile

Reportez-vous à l'approche Internet, introduisez une page d'agence, ou l'agent.html, qui appartient à Domaina

Ensuite, dans l'autre.html dans DomainB, puis utilisez iframe à l'agent imbriqué.html pour imbriqué

D'accord, c'est le cas maintenant:

Index.html utilise iframe nited autre.html

Autre.html utilise Iframe Nesting Agent.html

La raison de l'introduction de l'agent de la 3e page.

Notre objectif ultime est de retirer la barre de roulement et de s'assurer que tout le contenu de la page intégrée est affiché

1. La hauteur réelle de l'altitude réelle de la page autre.html

2. Régler la hauteur sur la propriété SRC de l'Iframe dans son intégration

3. Interacer la valeur de hauteur dans l'attribut SRC de l'Iframe dans Agent.html

Dans l'exemple suivant, une technique est utilisée pour éviter d'utiliser SetInterval () pour définir constamment la hauteur d'Iframe

La méthode consiste à ajouter un horodatage sur le SRC d'Iframe, permettant au navigateur de recharger l'agent.html à chaque fois

Ensuite, laissez la fonction JS dans agent.hml invokemethodIntOpwindow () être exécuté

2 HTML dans Domaina

index.html

Copier le code du code comme suit:

# {Étend 'main.html' /}

# {Set title: 'home' /}

<hr>

<div style = "Color: Red; Font-Weight: Bold"> 窗口自适应 --- 绕开同源策略的限制，同时又利用同源策略，去掉 iframe 的滚动条，动态调整窗口的高度，让Il peut afficher tous les contenus de la page imbriquée </div>

<! - Vous devez ajuster dynamiquement la hauteur de iframe->

</div>

Fonction remensit (hauteur) {

// alert ("redimensit");

document.getElementsByName ("DomainB") [0] .Height = hauteur;

}

</cript>

agent.html

Copier le code du code comme suit:

<html>

<adal>

<Title> Insérer le titre ici </TITME>

</ head>

<body>

Je suis une page proxy!

Window.onLoad = invokeMEMETHODIntOPWindow;

fonction invokeMetoDIntOpwindow () {) {

// alert ("Appelez la fonction dans le même domaine, réinitialisez la hauteur d'Iframe");

var domain = document.parentWindow;

var realheight = domaina.location.hash.split ("#") [1];

// Dernière étape: appelez la fonction de la fenêtre de la couche supérieure et réinitialisez la hauteur de iframe

Parent.parent.resize (RealHeight);

// alert ("RealHeight:" + RealHeight);

// alert (document.parentwindow.name); // Obtenez le nom de la fenêtre où le conteneur est situé Domaina

// erreur: // alerte (document.parentwindow.parent.name);

// alert (document.parentwindow.parent.parent.name); // La couche supérieure de la fenêtre appartient à Domaina, afin que vous puissiez le visiter

}

// Après avoir réglé l'attribut SRC d'Iframe avec différents horodatages, n'avez pas besoin d'utiliser setInterval ()

// setInterval ("invokeMetHoDIntOpwindow ()", 100);

</cript>

</docy>

</html>

Autre.html dans le domaineb

Copier le code du code comme suit:

<html>

<adal>

<Title> Insérer le titre ici </TITME>

</ head>

<! - Page intégrée dans un domaine->

<Button Type = "Button" onClick = "btnClick ()"> Affichage de l'interrupteur </ bouton>

Dans JavaScript, il existe une limite de sécurité très importante, appelée "politique d'origine homosexuelle".

Cette stratégie a fait des restrictions importantes sur le contenu de la page auquel le code JavaScript peut accéder, c'est-à-dire que JavaScript ne peut accéder qu'au contenu du document contenant ses documents dans le même domaine.