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.
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
pelement 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 !== inframeWindowcheck this one too. – Jai Commented Jan 9, 2017 at 9:30
4 Answers
Reset to default 5You 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);
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745339516a4623260.html
评论列表（0条）