javascript - ネストされた iframe、別名 Iframe Inception

Question

jQuery を使用して、div id="element" にアクセスしようとしています。

<body>
    <iframe id="uploads">
        <iframe>
            <div id="element">...</div>
        </iframe>
    </iframe>
</body>

すべての iframe は同じドメイン上にあり、www や www 以外の問題はありません。

最初の iframe 内の要素を正常に選択できましたが、2 番目のネストされた iframe 内では選択できませんでした。

私はいくつかのことを試しましたが、これは最新のものです (そしてかなり絶望的な試みです)。

var iframe = jQuery('#upload').contents();
var iframeInner = jQuery(iframe).find('iframe').contents();
var iframeContent = jQuery(iframeInner).contents().find('#element');

// iframeContent is null

編集：タイミングの問題を除外するために、クリックイベントを使用してしばらく待ちました。

jQuery().click(function(){
   var iframe = jQuery('#upload').contents().find('iframe');
   console.log(iframe.find('#element')); // [] null
});

何か案は？ありがとう。

更新:2番目のiframeを次のように選択できます...

var iframe = jQuery('#upload').contents().find('iframe');

問題は、iframeがjavascriptで生成されているため、srcが空であることです。したがって、iframe は選択されていますが、コンテンツの長さは 0 です。

score 58 · Accepted Answer

<iframe>つまり、要素には次のような「src」プロパティが必要なため、指定したコードは機能しません。

<iframe id="uploads" src="http://domain/page.html"></iframe>

.contents()コンテンツを取得するために使用しても問題ありません。

$('#uploads).contents()2番目のiframeにアクセスできますが、そのiframeが「内部」にある場合はhttp://domain/page.html、＃uploadsiframeが読み込まれます。

これについて正しいことをテストするために、main.html、iframe.html、noframe.htmlという名前の3つのhtmlファイルを作成し、次のコマンドでdiv＃elementを選択しました。

$('#uploads').contents().find('iframe').contents().find('#element');

iframeがリソースをロードするのを待つ必要があるため、要素が使用できなくなる遅延が発生します。また、すべてのiframeは同じドメイン上にある必要があります。

お役に立てれば ...

これが私が使用した3つのファイルのhtmlです（「src」属性をドメインとURLに置き換えてください）：

main.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>main.html example</title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <script>
        $(function () {
            console.log( $('#uploads').contents().find('iframe').contents().find('#element') ); // nothing at first

            setTimeout( function () {
                console.log( $('#uploads').contents().find('iframe').contents().find('#element') ); // wait and you'll have it
            }, 2000 );

        });
    </script>
</head>
<body>
    <iframe id="uploads" src="http://192.168.1.70/test/iframe.html"></iframe>
</body>

iframe.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>iframe.html example</title>
</head>
<body>
    <iframe src="http://192.168.1.70/test/noframe.html"></iframe>
</body>

noframe.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>noframe.html example</title>
</head>
<body>
    <div id="element">some content</div>
</body>

score 13 · Accepted Answer

var iframeInner = jQuery(iframe).find('iframe').contents();

var iframeContent = jQuery(iframeInner).contents().find('#element');

iframeInner には要素が含まれています

<div id="element">other markup goes here</div>

そして iframeContent は、の中にある要素を見つけます

 <div id="element">other markup goes here</div>

(find は現在の要素を検索しません) そのため、null が返されます。

score 4 · Accepted Answer

ねえ、あなたがやりたいことをやっているように見えるものを手に入れました。いくつかの汚いコピーが含まれますが、機能します。ここで作業コードを見つけることができます

メインのhtmlファイルは次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            Iframe = $('#frame1');

            Iframe.on('load', function(){
                IframeInner = Iframe.contents().find('iframe');

                IframeInnerClone = IframeInner.clone();

                IframeInnerClone.insertAfter($('#insertIframeAfter')).css({display:'none'});

                IframeInnerClone.on('load', function(){
                    IframeContents = IframeInner.contents();

                    YourNestedEl = IframeContents.find('div');

                    $('<div>Yeepi! I can even insert stuff!</div>').insertAfter(YourNestedEl)
                });
            });
        });
    </script>
</head>
<body>
    <div id="insertIframeAfter">Hello!!!!</div>
    <iframe id="frame1" src="Test_Iframe.html">

    </iframe>
</body>
</html>

ご覧のとおり、最初の iframe が読み込まれると、2 番目の iframe を取得して複製します。次に、それを dom に再挿入して、onload イベントにアクセスできるようにします。これが読み込まれると、クローンされていないものからコンテンツを取得します (同じ src を使用するため、コンテンツも読み込まれている必要があります)。その後、コンテンツで好きなことを行うことができます。

Test_Iframe.html ファイルは次のとおりです。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div>Test_Iframe</div>
    <iframe src="Test_Iframe2.html">
    </iframe>
</body>
</html>

および Test_Iframe2.html ファイル:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div>I am the second nested iframe</div>
</body>
</html>

score 1 · Accepted Answer

カラーボックス、非表示フィールド、iframe など、後でレンダリングされる要素にはライブメソッドを使用する必要があります。

$(".inverter-value").live("change",function() {
     elem = this
    $.ajax({
      url: '/main/invertor_attribute/',
      type: 'POST',
      aysnc: false,
      data: {id: $(this).val() },
      success: function(data){
       // code
      },
      dataType: 'html'
    });
  });

score 1 · Accepted Answer

おそらくタイミングの問題があります。document.ready コマンドは、2 番目の iFrame が読み込まれる前に起動している可能性があります。さらに役立つ十分な情報がありませんが、それが問題の可能性があると思われる場合はお知らせください。

score 0 · Accepted Answer

I think the best way to reach your div:

var your_element=$('iframe#uploads').children('iframe').children('div#element');

It should work well.

score 0 · Accepted Answer

ブラウザが iframe をサポートしている場合、iframe 内の DOM はそれぞれのタグの src 属性から取得されます。iframe タグ内のコンテンツは、ブラウザが iframe タグをサポートしていない場合のフォールバックメカニズムとして使用されます。

参照: http://www.w3schools.com/tags/tag_iframe.asp

score 0 · Accepted Answer

あなたの問題は、jQuery が iframe に読み込まれていないことだと思います。

最も安全な方法は、純粋な DOM ベースのメソッドに依存してコンテンツを解析することです。

または、jQuery から始めて、iframe 内で 1 回テストし、typeof window.jQuery == 'undefined'true の場合、jQuery がその内部で有効になっていないかどうかをテストし、DOM ベースのメソッドにフォールバックします。

javascript - ネストされた iframe、別名 Iframe Inception

8 に答える 8

Related

Reference