All geek questions in one place

Why can't I pass this element using an iframe and jQuery?

I am trying to access a specific element (perhaps more similar to this) using an iframe and jQuery object , but it does not work.

The iframeWindow object iframeWindow not null , but the following statement does not work. I saw something like this in this answer, but this does not work. Am I doing something wrong?

Here is 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 fixed the syntax errors.

+6
source share
4 answers

You should use iframe.contentWindow.document instead of iframe.contentWindow in combination with find() and text() , and it should work. Try the following:

 $(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); });

According to MDN, the documentation says:

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

You can learn more about iframes and how they work here .

+2
source

Something obvious to see a typo that I and everyone else missed, instead of inframeWindow , which should be iframeWindow .

Instead, try using the jquery selector:

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

You are attaching a jquery method to a DOM object. what is impossible to do in this way. You must make it a jQuery object in order to assign a jQuery method.

0
source

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

Replace:

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

from

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

(There is also no $ member function for DOM or jQuery objects.)

0
source

Try this way, hope this helps

Updated Answer

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

Source: https://habr.com/ru/post/1013902/

More articles:


All Articles