2

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;}
  • You can't do this with a simple web page. You **can** do it with a browser extension. *(From your description, it sounds like you **shouldn't** do it, but...)* – T.J. Crowder Oct 28 '18 at 10:00
  • @T.J.Crowder I have been trying Chromium Browser Automation and Firefox Selenium ...but not able to really achieve what I want. And well I am just trying a harmless project to complete a training syllabus which is vast :) –  Oct 28 '18 at 10:30

1 Answers1

0

If you don't have access to the external site's code you can't do this. So stop here if that's the case :-).

Although you can't click into an iFrame like this, but you can send it a command using postMessage.

Basically you need to call it like so: yourIframe.postMessage("message", payload);

And handle it like this in the iFrame source:

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
    if (event.origin !== "http://example.org:8080")
    return;

 // ...
}
Zach Leighton
  • 1,939
  • 14
  • 24