4 
<html>
  <head></head>
  <body>
    <iframe id="num1" src="/idk">
      <html>
        <head></head>
        <body>
          <iframe id="num2" src="/idk2">
            <html>
              <head></head>
              <body>
                <div id="div1">
                  <div id="div2">
                    <a href="http://www.blablabla.com"></a>
                  </div>
                </div>
              </body>
            </html>
          </iframe>
        </body>
      </html>
    </body>
    </html>

私の質問は - javascript または jquery を使用して、これらの 2 つの iframe と 2 つの div 内の a タグの href 属性を取得するにはどうすればよいですか。私は JS を好みます。(例:「http://www.blablabla.com」)。

4

4 に答える 4

2

わかりました。最初の iframe を取得するのは簡単です。タグのname属性を平手打ちし、それを使用してそのオブジェクトを取得し、そのオブジェクトを使用してその iFrameを参照できます。同じものを返すはずですが、後者は html 要素を返しますが、前者は目的により役立つ実際のウィンドウ オブジェクトを返します。<iframe>window.frames['<name-of-your-iframe>']windowdocumentdocument.getElementById('num1')

ネストされた iFrame の問題は、src属性を設定しているため、そう簡単にアクセスできるとは思えないことです。これと同じ方法を試すことができますが。

お役に立てれば。

于 2012-10-06T14:38:03.687 に答える
1

これは醜い解決策かもしれませんが、少なくとも機能し、実際には非常に簡単です。

// Create container to store iframes' inner HTML and to be able to work with it
var container = document.createElement("div");
// Add HTML of first iframe to container
container.innerHTML = document.querySelector("#num1").innerHTML;
// Add HTML of nested (second) iframe to container
container.innerHTML = container.querySelector("#num2").innerHTML;
// Finally get href attribute
var href = container.querySelector("#div2 a").getAttribute("href");
console.log(href);

最新のブラウザのほとんどはすでに をサポートquerySelector()しています。古い IE でのみ問題が発生します。http://caniuse.com/queryselectorを参照してください。

編集:このコードは、次のアイデアに基づいています: iframe の HTML コンテンツを取得し、それを要素にコピー/挿入して、クエリを直接実行できるようにします (したがって、iframe のオブジェクトdivをわざわざ取得する必要はありません)。documentこれが最初の iframe で完了したら、2 番目の (ネストされた) iframe に対して繰り返します。次に、目的の要素の属性を簡単に読み取ることができます。querySelector()ほとんど jQuery セレクターのように使用できます (例: $("#id"))。

于 2012-10-06T15:14:55.417 に答える
1 
var iframe1 = document.getElementById('num1');
var innerDoc1 = iframe1.contentDocument || iframe1.contentWindow.document;

var iframe2 = innerDoc1.getElementById('num2');
var innerDoc2 = iframe2.contentDocument || iframe2.contentWindow.document;

そしてついにあなたは得る

console.log(innerDoc2.getElementById('div2').getAttribute('href'));

*この単純なタスクにフレームワークは必要ありません

于 2012-12-14T09:29:30.877 に答える
0

そのようなことを試してください：

​var $iframe1 = jQuery('#num1');
var iframe1Content = $iframe1[0].contentDocument || $iframe1[0].contentWindow.document;
// see also: http://stackoverflow.com/questions/926916/how-to-get-the-bodys-content-of-an-iframe-in-javascript/11107977#11107977

var $iframe2 = jQuery('#num2', iframe1Content);
var iframe2Content = $iframe2[0].contentDocument || $iframe2[0].contentWindow.document;

var $link = jQuery('#div2 a', iframe2Content);
console.log($link);

jQuery-Selector-Method'jQuery（' selector'、context）'を使用すると、'context'を指定できます。これは、jQuery-Elementを意味し、その中の「セレクター」を検索します。最初に最初のiFrameのコンテンツ（contentDocument）を取得し、これを2番目のiFrameの選択のコンテキストとして使用します。

于 2012-12-14T09:21:56.137 に答える