Maison >interface Web >js tutoriel >Une autre idée ingénieuse d'implémentation pour les compétences d'adaptation_javascript de la hauteur de la fenêtre iframe

Une autre idée ingénieuse d'implémentation pour les compétences d'adaptation_javascript de la hauteur de la fenêtre iframe

WBOY
WBOYoriginal
2016-05-16 16:53:251529parcourir

Il y a une page index.html dans le domaineA, et une page autre.html dans le domaineB est imbriquée via une iframe
Puisque la page autre.html est affichée dans une iframe et que le contenu de sa page augmentera ou diminuera dynamiquement, maintenant vous besoin de supprimer l'iframe La barre de défilement
En raison des restrictions de la politique JavaScript de même origine, les opérations inter-domaines ne peuvent pas être effectuées, ce qui rend le problème plus difficile
En se référant à la pratique en ligne, une page d'agent, ou appelé agent intermédiaire.html, est introduit, qui appartient au domaineA
Ensuite, dans autre.html dans le domaineB, utilisez iframe pour imbriquer agent.html

D'accord, maintenant la situation est comme ceci :

index.html Utilisez iframe pour intégrer Nest other.html
other.html Utilisez iframe pour imbriquer agent.html
La raison pour laquelle la troisième page agent.html est introduite est de se conformer aux règles du "même politique d'origine" et finalisez le transfert des paramètres sous différents domaines !

Notre objectif ultime est de supprimer la barre de défilement et de garantir que tout le contenu de la page intégrée est affiché
1 Obtenez la hauteur réelle de l'autre page.html
2. Attribut src de l'iframe intégré
3. Intercepter la valeur de hauteur dans l'attribut src de l'iframe dans agent.html

Dans l'exemple suivant, une astuce est utilisée pour éviter d'utiliser setInterval() Définir constamment le hauteur de l'iframe
La méthode consiste à attacher un horodatage au src de l'iframe, afin que le navigateur recharge agent.html à chaque fois
Laissez ensuite la fonction js invoquéeMethodInTopWindow() dans agent.hml obtenir Execute 2 html dans
domainA

index.html

Copier le code Le code est le suivant :

#{extends 'main.html' /}
#{set title:'Home' /}




Adaptatif à la fenêtre --- en contournant les restrictions de la politique de même origine et en utilisant en même temps la politique de même origine pour supprimer la barre de défilement de l'iframe et ajuster dynamiquement la hauteur de la fenêtre afin qu'elle puisse afficher tout le contenu de la page imbriquée

align:center;">



🎜>

Déclaration:
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