Maison > Article > interface Web > méthode jquery de fonctionnement iframe_jquery
méthode jquery de fonctionnement iframe_jquery
- WBOYoriginal
- 2016-05-16 16:29:231464parcourir
Jetons d'abord un coup d'œil au fichier d'aide pour l'objet content() dans JQUERY
contenu()
Aperçu
Recherchez tous les nœuds enfants (y compris les nœuds de texte) à l'intérieur de l'élément correspondant. Si l'élément est une iframe, recherchez le contenu du document
Exemple
Descriptif :
Trouvez tous les nœuds de texte et les gras
HTML
jQuery
Ajoutez du contenu dans un cadre vide
.append("Je suis dans une iframe !");
Supprimez la bordure iframe frameborder="0"
1 Il y a deux ifames dans le contenu
Dans les sous-fenêtres A et B, j'ai placé un P avec l'ID hello pour faciliter notre démonstration du fonctionnement du DOM. Les principaux codes HTML des sous-fenêtres A et B sont les suivants : .
Bonjour tout le monde !
1. Dans une iframe, la fenêtre parent exploite le DOM de la fenêtre enfant
La fenêtre parent et la fenêtre enfant ont été construites, de sorte que nous puissions utiliser la fonction iframeA() suivante dans la fenêtre parent pour changer la couleur d'arrière-plan de la fenêtre enfant A en rouge :
functioniframeA(){//Changer la couleur de fond de la sous-fenêtre A avec l'ID hello
vara=getIFrameDOM("wIframeA");
a.getElementById('hello').style.background="red";
>
functiongetIFrameDOM(id){//fonction d'acquisition iframeDOM compatible avec IE et Firefox
returndocument.getElementById(id).contentDocument||document.frames[id].document;
>
2. Dans une iframe, la fenêtre enfant exploite le DOM de la fenêtre parent
Dans la fenêtre enfant, nous pouvons facilement utiliser la fenêtre parent DOM. Il suffit d'ajouter la méthode de l'objet parent Yige avant l'opération DOM. Par exemple : dans la fenêtre enfant B ci-dessus, nous pouvons utiliser ce qui suit. le code remplace le contenu par l'ID "pHello" dans la fenêtre parent :
------------------
3. Dans l'iframe, la sous-fenêtre A exploite le DOM de la sous-fenêtre B
Puisque la fenêtre enfant peut faire fonctionner l'objet fenêtre et l'objet document de la fenêtre parent, la fenêtre enfant peut également faire fonctionner le DOM d'une autre fenêtre enfant ~ Broken Bridge Canxue peut utiliser directement le parent dans la fenêtre enfant B pour appeler directement getIFrameDOM dans le fenêtre parent. La fonction obtient l'objet document de la sous-fenêtre A, il est donc très simple de modifier le contenu de la sous-fenêtre A, comme le code suivant :
vara=parent.getIFrameDOM("wIframeA");
=============================================== === ====================================
Un problème avec le changement automatique de la hauteur de l'iframe me dérange depuis longtemps. J'ai cherché des informations sur Internet, mais ce n'était pas très bon, je l'ai combiné avec jquery (version 1.3.2), qui est juste. 4 lignes de code Il est parfaitement compatible avec IE, Firefox, Opera, Safari, Google
Chrome, js est le suivant :
fonction heightSet(thisFrame){
si($.browser.mozilla || $.browser.msie){
bodyHeight =window.frames["thisFrameName"].document.body.scrollHeight;
}autre{
bodyHeight =thisFrame.contentWindow.document.documentElement.scrollHeight;
//Cette ligne peut remplacer la ligne précédente, afin que les paramètres de la fonction heightSet puissent être omis
//bodyHeight = document.getElementById("thisFrameId").contentWindow.document.documentElement.scrollHeight;
>
document.getElementById("thisFrameId").height=bodyHeight
>
Citation
Ce mot-clé semble avoir des significations différentes dans différents navigateurs. FF et IE doivent utiliser le nom de l'iframe pour obtenir la hauteur interne de la page, tandis que d'autres navigateurs peuvent utiliser cet ID
Citation
Ils parlent tous d'un problème asynchrone. Si vous utilisez beaucoup ajax, mais que vous ne souhaitez pas le configurer à chaque fois, la modification dynamique de l'iframe ne répondra certainement pas aux exigences de propreté de votre code. , ou vous pouvez quitter l'iframe. Je ne peux parler que des méthodes générales de traitement. Après tout, les formulaires ajax ou dynamiques ne représentent qu'une faible proportion dans les applications générales. Après une requête asynchrone, il suffit d'ajouter :
à la fin.Code Js
parent.window.heightSet();