I don't know whether this is even possible !
But I want to automatically clic on an element on an external site.
The requirement is to complete an online training by clicking on to next page to complete all chapters. The training only requires visiting the huge number of chapters. Since I do not have access to the code of that site,
So I put the site into an iframe and put a transparent div over the clickable element area with
pointer-events:none
I also am able to achieve the auto click on my div element with
var time=5;
interval = setInterval(function() {
time--;
document.getElementById('Label1').innerHTML = "" + time + " seconds"
if (time == 0) {
// stop timer
clearInterval(interval);
// click
document.getElementById('clickdiv').click();
}
}, 1000)
But the challenge is clicking though to an underlying element. I can do that with the mouse or keyboard. But the click() function only seems to work on the overlying div. Question is, why not the underlying like the Mouse or keyboard can do
HTML
<div>
<input type='submit' id='clickdiv' value='Autoclick' onclick="document.getElementById('Label2').innerHTML = 'Clicked!'">
<p id='Label1'> Time </p>
<p id='Label2'> </p>
<div style='position:relative;z-index:0'><iframe src='http://www.the-xtsernal-site.com' style='width:100%;height:100%;z-index:0'></iframe></div>
</div>
css
#clickdiv{width:50px;height:20px;border:1px solid green;position:absolute;top:57%;left:10%;z-index:100;pointer-events:none;background-color:red;color:white}
#Label1{width:50px;height:20px;border:1px solid green;position:absolute;top:77%;left:10%;z-index:100;}
#Label2{color:red;width:50px;height:20px;position:absolute;top:87%;left:10%;z-index:100;}