méthode jquery de fonctionnement iframe_jquery

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

Copier le code Le code est le suivant :

Bonjour Johnhttp://ejohn.org/">John>, comment vont
ça va ?

jQuery

Copier le code Le code est le suivant :

$("p").contents().not("[nodeType=1]").wrap("");Résultat :

Bonjour JohnJohn>, comment vas-tu faire ?

Description :

Ajoutez du contenu dans un cadre vide

HTML

Copier le code Le code est le suivant :

jQuery

Copier le code Le code est le suivant :

$("iframe").contents().find("body")
.append("Je suis dans une iframe !");

Supprimez la bordure iframe frameborder="0"

1 Il y a deux ifames dans le contenu

Copier le code Le code est le suivant :

jQuery dans leftiframe modifie le code src du mainiframe :

Copier le code Le code est le suivant :

$("#mainframe",parent.document.body).attr("src","

http://www.baidu.com
")

2 S'il y a une ifame avec l'ID du mainiframe dans le contenu

Copier le code Le code est le suivant :

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 : .

Copier le code Le code est le suivant :

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 :

Copier le code Le code est le suivant :

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 :

Copier le code Le code est le 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 :

Copier le code Le code 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

Copier le code Le code est le suivant :

parent.window.heightSet();