web-dev-qa-db-ja.com

jQueryを使用してiframeのコンテンツにアクセスする方法は？

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

iframe content：<div id="myContent"></div>

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

myContentにアクセスするにはどうすればよいですか？

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

jqueryiframe
105
mbillard

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

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

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

190
mbillard
<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>
19
andres descalzo

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

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

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

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