I want to traverse the content of inframe, which is a separate HTML document api.php.
For example, I want the INNER MOST paragraph with class c2. How would I traverse it?
You may think of a way of using any jQuery
method which would find that element by finding the Matching Text of that paragraph, but assume that you can't access it. Is there any way to traverse it?
Further, I have used setTimeout
so that the document is loaded first and then the methods would work. But I don't want this delay every time. First time is okay, but then I want it like a normal document which is loaded first time and available until reload.
Here's the code:
radio.php
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
setTimeout(function(){
var elem=$(".c1 iframe").contents().find('html').find('body');
//ABOVE METHOD REACHES ONLY A SPECIFIC ELEMENT, BUT I WANT IT TO TRAVERSE IT LIKE FOLLOWING WAY:
$("elem div p").click();
}, 1000);
});
</script>
</head>
<body>
<div class="c1">
<iframe src="api.php" height="200" width="300">
</iframe>
</div>
</body>
</html>
api.php
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="c1"></div>
<div class="c1">
<p class="c2"></p>
</div>
<div class="c1">
<p class="c2"></p>
<p class="c2">
<p class="c2">INNER MOST</p>
</p>
</div>
</body>
</html>
Thank you.