recherche

Maison >interface Web >js tutoriel >Méthode DOM d'opération inter-domaines jQuery dans iframe

Méthode DOM d'opération inter-domaines jQuery dans iframe

php中世界最好的语言
php中世界最好的语言original
2018-04-26 15:19:166202parcourir

Cette fois, je vais vous présenter le fonctionnement inter-domaine jQuery de la méthode DOM dans une iframe. Quelles sont les précautions pour le fonctionnement inter-domaine jQuery de la méthode DOM dans une iframe. ? Ce qui suit est un cas pratique. Levez-vous et jetez un œil.

le cadre est encore très populaire à l'heure actuelle et il est utilisé dans de nombreux endroits pour mettre en œuvre des situations spéciales. Par exemple,

téléchargement traditionnel, sélectionnez sous ie6, proxy, cross-domain, etc. Aujourd'hui, je vais décrire brièvement les opérations associées sur les iframes, en utilisant principalement jQuery pour faire fonctionner la structure DOM. 

<iframe src="a.php" id="aa"></iframe> 
<iframe src="b.php" id="bb"></iframe> 
<input type="button" id="read-aa" value="读取iframe #aa"> 
<input type="button" id="write-aa" value="写入iframe #aa">
$(&#39;#read-aa&#39;).click(function() 
{ 
    var v=$(&#39;#aa&#39;).contents().find(&#39;body&#39;).html(); 
    alert(v); 
}); 
$(&#39;#write-aa&#39;).click(function() 
{ 
    $(&#39;#aa&#39;).contents().find(&#39;p&#39;).append(&#39;<hr>这是index.php操作aa.php写入的内容&#39;); 
});
La méthode principale est contents(), qui lit l'iframe.

2. iframe opération de cadre parent croisé iframe

<!DOCTYPE html> 
<meta charset="utf-8"> 
<title>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</title> 
<script src="public/jQuery.js"></script> 
<script> 
$(function() 
{ 
    $(&#39;#read-parent-aa&#39;).click(function() 
    { 
        var v=$(&#39;body&#39;,parent.document).find(&#39;#aa&#39;).contents().find(&#39;body&#39;).html(); 
        alert(v); 
    }); 
    $(&#39;#write-parent-aa&#39;).click(function() 
    { 
        $(&#39;body&#39;,parent.document).find(&#39;#aa&#39;).contents().find(&#39;p&#39;).append(&#39;<hr>这是bb.php操作aa.php写入的内容&#39;); 
    }); 
}); 
</script> 
<p>
Voici le contenu de l'iframe #bb


</p> 
<input type="button" id="read-parent-aa" value="跨父读取iframe #aa"> 
<input type="button" id="write-parent-aa" value="跨父写入iframe #aa">
HTML : Code

<!DOCTYPE html>
<meta charset="utf-8">
<title>jQuery操作iframe</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<iframe src="a.php" id="aa"></iframe>
<iframe src="b.php" id="bb"></iframe>
<input type="button" id="read-aa" value="读取iframe #aa">
<input type="button" id="write-aa" value="写入iframe #aa">
<script> 
$(function()
{
 $(&#39;#read-aa&#39;).click(function()
 {
  var v=$(&#39;#aa&#39;).contents().find(&#39;body&#39;).html();
  alert(v);
 });
 $(&#39;#write-aa&#39;).click(function()
 {
  $(&#39;#aa&#39;).contents().find(&#39;p&#39;).append(&#39;<hr>这是index.php操作aa.php写入的内容&#39;);
 });
});
</script>
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention au site Web chinois php

autres articles liés !

Lecture recommandée :

JSONP résout le problème inter-domaines ajax (avec du code)

implémentation php+jquery du passage Méthode de données json

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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
Article précédent：Comment gérer le json chinois tronqué renvoyé par jquery+ajaxArticle suivant：Comment gérer le json chinois tronqué renvoyé par jquery+ajax

Articles Liés

Voir plus