Une autre idée intelligente de réaliser l'adaptabilité en hauteur des fenêtres iframe

Auteur：Eve Cole Date de mise à jour：2025-02-23 11:32:01

Il y a une page index.html dans Domaina, qui niche une page autre.html dans DomainB via un iframe

Étant donné que la page autre.html s'affiche dans l'IFRAME et que le contenu de sa page augmentera ou diminuera dynamiquement, la barre de défilement de l'IFRAME doit être supprimée maintenant

En raison des limites de la politique JavaScript d'origine homosexuelle, l'opération croisée ne peut pas être effectuée, ce qui rend le problème

J'ai fait référence à la pratique en ligne et présenté une page d'agent, ou un agent.html, qui appartient à Domaina

Ensuite, dans autre.html dans DomainB, utilisez iframe vers Nest Agent.html

Ok, maintenant la situation est:

index.html nichage autre.html en utilisant iframe

autre.htmlnest agent.html en utilisant iframe

La raison pour laquelle l'agent de la troisième page.html est de respecter les règles de "politique d'origine homosexuelle" et de terminer le passage des paramètres dans différents domaines!

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

1. Obtenez la hauteur réelle de l'autre.html Page

2. Régler la hauteur à la propriété SRC de l'Iframe qu'il a intégré

3. Dans Agent.html, découpez la valeur de hauteur dans l'attribut SRC de l'IFRAME.

Dans l'exemple suivant, une astuce est utilisée pour éviter d'utiliser SetInterval () pour définir en continu la hauteur de l'IFRAME.

La méthode consiste à attacher un horodatage au SRC de l'Iframe, de sorte que le navigateur recharge l'agent.html à chaque fois

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

2 HTML dans Domaina

index.html

La copie de code est la suivante:

# {étend 'main.html' /}

# {set title: 'home' /}

<hr>

<div style = "Color: Red; Font-Weight: Bold"> Adaptation des fenêtres - Bypass les limites des politiques homologues, et en même temps, utilisez des politiques homologues pour éliminer la barre de défilement de l'IFRAME, ajustez dynamiquement la hauteur de la fenêtre , de sorte qu'il peut afficher tous les contenus de la page imbriquée </div>

<! - iframe qui nécessite un réglage dynamique de la hauteur ->

</div>

fonction remensit (hauteur) {

// alert ("redimensit");

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

}

</cript>

agent.html

La copie de code est la suivante:

<! Doctype html>

<html>

<adal>

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

</ head>

<body>

Je suis la page proxy!

window.onLoad = invokeMEMETHODIntOPWindow;

Fonction invokeMetoDIntOpwindow () {

// alert ("Appelez la fonction sous le même domaine et réinitialisez la hauteur de l'Iframe");

var domaina = document.parentWindow;

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

// Dernière étape: appelez la fonction de la fenêtre supérieure pour réinitialiser la hauteur de l'Iframe

parent.parent.resize (RealHeight);

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

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

//error://alert(Document.parentWindow.parent.name);

//alert(Document.parentwindow.parent.parent.name) ;// La fenêtre de niveau supérieur appartient à Domaina, donc il peut être accessible

}

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

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

</cript>

</docy>

</html>

autre.html dans le domaineb

La copie de code est la suivante:

<! Doctype html>

<html>

<adal>

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

</ head>

<! - Page intégrée dans le domaine A ->

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

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

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