web-dev-qa-db-ja.com

iFrame jQueryで要素を選択する

このアプリケーションでは、Webページを解析し、iFrameの別のページにロードします。ロードされたページのすべての要素には、トークンIDがあります。これらのtokenid-sで要素を選択する必要があります。手段-メインページの要素をクリックし、iFrameのページで対応する要素を選択します。 jQueryの助けを借りて、私は次のようにしています:

function selectElement(token) {
     $('[tokenid=' + token + ']').addClass('border'); 
}

ただし、この機能を使用すると、iFrameではなく、現在のページの要素のみを選択できます。ロードされたiFrame内の要素を選択する方法を教えてください。

ありがとう。

108
cycero
var iframe = $('iframe'); // or some other selector to get the iframe
$('[tokenid=' + token + ']', iframe.contents()).addClass('border');

また、セキュリティ上の理由により、このiframeのsrcが別のドメインを指している場合、javascriptでこのiframeのコンテンツにアクセスすることはできません。

139
Darin Dimitrov

この投稿をご覧ください: http://praveenbattula.blogspot.com/2009/09/access-iframe-content-using-jquery.html

$("#iframeID").contents().find("[tokenid=" + token + "]").html();

セレクターをfindメソッドに配置します。

ただし、iframeがサーバーから来ていない場合、これは不可能な場合があります。他の投稿では、許可拒否エラーについて説明しています。

jQuery/JavaScript:iframeのコンテンツにアクセスする

45
Kevin Bowersox

ドキュメントの準備ができていても、iframeの準備が整っているわけではありません。
したがって、iframeロードイベントをリッスンしてからコンテンツにアクセスする必要があります。

$(function() {
    $("#my-iframe").bind("load",function(){
        $(this).contents().find("[tokenid=" + token + "]").html();
    });
});
17

ケースがコンソール経由でIFrameにアクセスしている場合、e。 g。 Chrome Dev Toolsを使用すると、ドロップダウンからDOMリクエストのコンテキストを選択できます(図を参照)。

Chrome Dev Tools - Selecting the iFrame

0
tibersky