Handle user clicks inside an html5 iframe using jQuery

Question

I am trying to present a new feature on a website already in production. Therefore, I am loading this website using an iframe into my development server as follows:

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
 <iframe id="myframe" src="https://production_website.com" style="border:none;" width="100%" height="600" seamless></iframe>
</body>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
     <script>
        console.log($("#myframe").contents());
        $("#myframe").contents().find(".importantContent").click(function(){
         console.log($(this));
        });
     </script>
</html>

I am trying to intercept user clicks on a specific DOM element in the iframe zone, based on that I'll be injecting a specific HTML content to demonstrate a feature. But listening with jquery click() is not working.

Any suggestions on what to do?

I am aware of the same origin policy restriction, but for a web designer/developer who doesn't have control over the server, aren't there workarounds like disabling the restriction using a pluging?

example: https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/

not going to happen with same origin policy. I am sure the console has error messages to back it up. — epascarello, Oct 06 '16 at 21:26
@epascarello Thanks for the note! I am aware of the restriction. I am wondering if I can disable the security feature in javascript for the reason of the demo and activate it later, would that work? — Mohamed Ali JAMAOUI, Oct 07 '16 at 07:31
You can disable it for your browser by changing its configuration, but not magically for everyone else. — epascarello, Oct 07 '16 at 11:31
@epascarello yeah, I am only interested about having it working on my browser to showcase a feature. — Mohamed Ali JAMAOUI, Oct 07 '16 at 13:44
http://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome — epascarello, Oct 07 '16 at 13:54

score 1 · Answer 1 · answered Oct 06 '16 at 17:26

I found this answer in another thread, and it looks like it may work on your end. Try:

$('#myframe').load(function(){

    var iframe = $('#myframe').contents();

    iframe.find(".importantContent").click(function(){
           alert("test");
    });
});

Also, you have $("#reco").contents() instead of $("#myframe").contents(), were you meaning to not use the iframe you have in this example?

Handle user clicks inside an html5 iframe using jQuery

1 Answers1