admin管理员组

文章数量:1420938

I'm trying to access a particular element (maybe more similar to this) using iframe object and jQuery but it isn't working.

The iframeWindow object is not null but the next statement doesn't seem working. I saw something like this on this answer but it doesn't work. Am I doing something wrong?

Here's my code:

RADIO.PHP

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery.js"></script>
    <script>

        $(document).ready(function(){
            setTimeout(function(){
            var iframe= document.getElementById("iframe");
            var iframeWindow = iframe.contentWindow;
            var text=iframeWindow.$("div:nth-child(3) .c2").html();
            console.log(text);

            //DOESN'T PRINT "INNER MOST"

        }, 1000);

    });
    </script>
</head>
<body>
  <div class="c1">
  <iframe id="iframe" src="api.php" height="200" width="300">
  </iframe>
  </div>
</body>
</html>

API.PHP

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<script type="text/javascript" src="jquery.js"></script>
<body id="abody">
Hey
    <div class="c1"></div>
    <div class="c1">
        <p class="c2"></p>
    </div>
    <div class="c1">
        <p class="c2">
         INNER MOST
        </p>
    </div>
</body>
</html>

EDIT: I've corrected syntax mistakes.

I'm trying to access a particular element (maybe more similar to this) using iframe object and jQuery but it isn't working.

The iframeWindow object is not null but the next statement doesn't seem working. I saw something like this on this answer but it doesn't work. Am I doing something wrong?

Here's my code:

RADIO.PHP

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery.js"></script>
    <script>

        $(document).ready(function(){
            setTimeout(function(){
            var iframe= document.getElementById("iframe");
            var iframeWindow = iframe.contentWindow;
            var text=iframeWindow.$("div:nth-child(3) .c2").html();
            console.log(text);

            //DOESN'T PRINT "INNER MOST"

        }, 1000);

    });
    </script>
</head>
<body>
  <div class="c1">
  <iframe id="iframe" src="api.php" height="200" width="300">
  </iframe>
  </div>
</body>
</html>

API.PHP

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<script type="text/javascript" src="jquery.js"></script>
<body id="abody">
Hey
    <div class="c1"></div>
    <div class="c1">
        <p class="c2"></p>
    </div>
    <div class="c1">
        <p class="c2">
         INNER MOST
        </p>
    </div>
</body>
</html>

EDIT: I've corrected syntax mistakes.

  • javascript
  • php
  • jquery
  • html
  • iframe
Share Improve this question edited May 23, 2017 at 12:33 CommunityBot 11 silver badge asked Jan 9, 2017 at 9:19 ShankyShanky 1497 bronze badges 3
  • Note that your HTML is invalid. You can't nest p element within each other, therefore the DOM structure does not match your selector – Rory McCrossan Commented Jan 9, 2017 at 9:23
  • I've edited please check it – Shanky Commented Jan 9, 2017 at 9:24
  • iframeWindow !== inframeWindow check this one too. – Jai Commented Jan 9, 2017 at 9:30
Add a ment  | 

4 Answers 4

Reset to default 5

You should use iframe.contentWindow.document instead of iframe.contentWindow in bination with find() and text() and it should work. Try this:

$(document).ready(function() {
  setTimeout(function() {
    var iframe = document.getElementById("iframe");
    var iframeWindow = iframe.contentWindow.document;
    var text = $(iframeWindow).find(".c1:nth-child(3) .c2").text();
    console.log(text);

    //PRINTS "INNER MOST"

  }, 1000);

});

As per MDN documentation says:

The contentWindow property returns the Window object of an iframe element. You can use this Window object to access the iframe's document and its internal DOM. This attribute is read-only, but its properties can be manipulated like the global Window object.

You can read more about iframe elements and how they work here.

To specify a scope for a selector in jQuery, pass the scope as a second argument to the jQuery selector.

Replace:

inframeWindow.$("div:nth-child(3) p .c2")

with

$("div:nth-child(3) p .c2", inframeWindow)

(Also, there is no $ member function on DOM or jQuery objects.)

That is something obvious to see the typo which i and all other missed, instead of inframeWindow that should have to be iframeWindow.

Instead try with jquery selector: 

var text=$(iframeWindow).find("div:nth-child(3) .c2").html();

You are attaching a jquery method to a DOM object. which can't be done in that way. You have to make it a jQuery object to assign a jQuery method.

Try this way hope it will help

Updated Answer

var $iframe= $("#iframe");
var $iframeWindow = $iframe.contents();
var text=$iframeWindow.find("div").eq(2).find('p .c2').html();
console.log(text);

本文标签： javascriptWhy can39t I traverse this element using iframe object and jQueryStack Overflow

版权声明：本文标题：javascript - Why can&#39;t I traverse this element using iframe object and jQuery? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745339515a2654195.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。