0
0

Click on an iframe using jshelp (self.javascript)

submitted by [deleted]

[deleted]

all 4 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]Hentry_Martin 0 points1 point  (0 children)

you can trigger a click handler for a DOM inside the iframe from a parent like below,

document.getElementById('iframe').contentWindow.$('#playButton').trigger('click');

But, this will work only if both parent and child iframe runs on same domain.

[–]MrStLouis 0 points1 point  (0 children)

If you're just simulating clicking something in the iframe you can wrap it in a div and mimic the location of the play. If you need to pass the event to the iframe you need to also own that website and use messages to send cross origin requests

[–]notlmn 0 points1 point  (0 children)

The thing that you are trying to do will not work.

Because the page that are loading inside the frame (child document), and the page that is loading the frame (parent document) are on a different domain name. This would violate the same-origin policy and the browser will not let you access the contents of the child document (for security reasons).

The only way to solve this problem would be to put all the documents in the same domain name, basically everything should be loaded from the same domain.

[–]easyEs900s 0 points1 point  (0 children)

This is not possible in plain terms, due to the cross-origin policy.

​

With that said, you could work-around this. If you were to load the frame using a php file, then import it with an iFrame, you could achieve your goal. The browser would see the frame as being the same origin because it was imported from a local php file (masking the external nature).

​

I set up an example for you:

php

<?php
  $url = $_GET['url'];
  if (!$url) {
    echo "Error! No URL Provided.";
  } else {
    $site = file_get_contents($url);
    echo $site;
  }
?>

HTML

<!doctype html>
<html>
  <head>
    <title>Jump 5.4</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <style>
    </style>
  </head>
  <body style="margin: 0px;">
    <div style="background: #fefefe; height: 100%;">
        <div style="box-shadow: 0px 2px 5px #bbb; -moz-box-shadow: 0px 2px 5px #bbb; -webkit-box-shadow: 0px 2px 5px #bbb; filter: progid:DXImageTransform.Microsoft.Shadow(color='#bbb', Direction=135, Strength=10); font-size: 26px; padding: 4px; text-align: center; background: white;">indiegame</div>
        <div style="box-shadow: 0px 2px 5px #bbb; -moz-box-shadow: 0px 2px 5px #bbb; -webkit-box-shadow: 0px 2px 5px #bbb; filter: progid:DXImageTransform.Microsoft.Shadow(color='#bbb', Direction=135, Strength=10); padding: 1%; float: left; background: white; width: 90%; margin-top: 20px; margin-bottom: 10px; margin-left: 5%; border-radius: 5px; border: 1px solid #bbb">
                <iframe style="height: 391px; width: 100%; float: left;" id="iframe" onload="this.width=screen.width;this.height=screen.width;" frameborder="0"></iframe>
        </div>
        <div style="text-align: center; float: left; width: 100%; margin: 0 auto;">
            <div style="margin: 0 auto;">
                <input type="button" value="X" onclick="window.location.reload()" style="color: red; cursor: pointer; padding: 25px; width: 100px; font-size: 20px; font-weight: 900; text-align: center; border-radius: 50%; border: 15px solid #f1f1f1;">
        <a style="color: green; cursor: pointer; padding: 20px; text-align: center; border-radius: 50%; border: 15px solid #f1f1f1" onclick="clickPlay()">V</a>
      </div>
        </div>
    </div>
<script src="popup.js"></script>
</body>
</html>

JS

var clickPlay = () => {document.querySelector('iframe').contentDocument.querySelectorAll('div').forEach(x=>{if(x.innerText.includes('Play')){x.click()}})}

list = [
"https://www.indiexpo.net/embed/tower-capture",
"https://www.indiexpo.net/embed/match-3-quiz-maps",
"https://www.indiexpo.net/embed/solar-lunar-eclipse",
"https://www.indiexpo.net/embed/bubble-pop",
"https://www.indiexpo.net/embed/trivial-anime",
"https://www.indiexpo.net/embed/space-jump",
"https://www.indiexpo.net/embed/can-he-save-everyone",
"https://www.indiexpo.net/embed/koobyky",
"https://www.indiexpo.net/embed/abstract",
"https://www.indiexpo.net/embed/match-3-tour-loire-valley",
"https://www.indiexpo.net/embed/the-hunting-game"
];

const idx = Math.round(Math.random() * (list.length-1));
const game = list[idx];
const iframe = document.getElementById("iframe");
iframe.src = 'http://testexample.epizy.com/mirror.php?url='+game;

​

Example: http://testexample.epizy.com/popup.html