Méthode DOM d'opération inter-domaines jQuery dans iframe-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-04-26 15:19:16

original

6155 Les gens l'ont consulté

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">

Copier après la connexion

$(&#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;); 
});

Copier après la connexion

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>

Copier après la connexion

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">

Copier après la connexion

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>

Copier après la connexion

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!