jQueryでiframeのコンテンツにアクセスする方法は？

116

jQueryでiframeのコンテンツにアクセスするにはどうすればよいですか？私はこれをやってみましたが、うまくいきません：

iframeコンテンツ： <div id="myContent"></div>

jQuery： $("#myiframe").find("#myContent")

どうすればアクセスできますmyContentか？

jquery / javascriptに似ています：iframeのコンテンツにアクセスしますが、受け入れられた答えは私が探していたものではありません。

jquery iframe

— mbillard
ソース

私は、Firefoxコンソールの組み込み$変数が完全なjQueryのようには見えないことを発見しました。（jQuery変数もないことに気づき、jQueryのソースコードをロードしなかったことを理解した後で、これを理解しました）。

— eel ghEEz

回答:

214

contents()メソッドを使用する必要があります：

$("#myiframe").contents().find("#myContent")

ソース：http : //simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/

APIドキュメント：https : //api.jquery.com/contents/

— mbillard
ソース

エラー：：私にエラーを与える許可は、アクセスプロパティ「のownerDocument」に拒否された

— イムラン・カーン

ime：次の理由により、おそらくエラーが発生します：1）iframeが同じドメインに属していません。2）iframeの読み込みイベントの前にそれを読み取ろうとしています。

— iMatoria 2013

iframeのコンテンツが同じドメインのものであるかどうかを確認してからアクセスしようとすると、エラーが発生しますか？

— カマフェザー

ソースURLが壊れています。

— karthzDIGI 2017年

@jperezmartin：メインページとiframeの間で情報を転送するJavaScriptライブラリを使用する必要があります。基本的に、クロスブラウザー機能のため、ブラウザーによって拒否されます。申し訳ありませんが、そのようなライブラリは必要なかったため、そのようなライブラリについては知りません。

— iMatoria 2017年

<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">

$(function() {

    //here you have the control over the body of the iframe document
    var iBody = $("#iView").contents().find("body");

    //here you have the control over any element (#myContent)
    var myContent = iBody.find("#myContent");

});

</script>
</head>
<body>
  <iframe src="mifile.html" id="iView" style="width:200px;height:70px;border:dotted 1px red" frameborder="0"></iframe>
</body>
</html>

— アンドレスデスカルソ
ソース

iframeのソースが外部ドメインの場合、ブラウザーはiframeコンテンツ（同じオリジンポリシー）を非表示にします。回避策は、外部コンテンツをファイルに保存することです（たとえば、PHPで）。

<?php
    $contents = file_get_contents($external_url);
    $res = file_put_contents($filename, $contents);
?>

次に、新しいファイルのコンテンツ（文字列）を取得して、たとえば（jqueryで）htmlに解析します。

$.get(file_url, function(string){
    var html = $.parseHTML(string);
    var contents = $(html).contents();
},'html');

— fireb86
ソース