iframe の jQuery クロスドメイン操作 DOM メソッド-jsチュートリアル-php.cn

iframe の jQuery クロスドメイン操作 DOM メソッド

php中世界最好的语言

リリース： 2018-04-26 15:19:16

オリジナル

6093 人が閲覧しました

今回は iframe での jQuery クロスドメイン DOM メソッドについてお届けします。iframe での DOM メソッドの jQuery クロスドメイン操作の注意点は何ですか、実際のケースを見てみましょう。

フレームは現在でも非常に人気があり、特別な状況を実装するために多くの場所で使用されています。たとえば、従来のアップロード、IE6 での選択、プロキシ、クロスドメインなどです。今日は主に jQuery を使用して DOM 構造を操作する、iframe をまたがる関連する操作について簡単に説明します。

<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;); 
});

ログイン後にコピー

メインメソッドは、iframeを読み取るcontents()です。

2. iframe の親フレーム間の操作 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>

ログイン後にコピー

これは 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>

ログイン後にコピー

の内容です。この記事の事例を読んだ後は、この方法を習得したと思います。情報については、php 中国語 Web サイトその他関連記事にご注意ください。

推奨読書:

JSONPはAjaxクロスドメイン問題を解決する(コード付き)

JSONデータを渡すphp+jquery実装方法

以上がiframe の jQuery クロスドメイン操作 DOM メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。