Pointer events none to pass through click

Question

I am trying to get the code below working on a cross domain iframe however it catches the click and doesn't pass it through. Can someone tell me what is wrong with it.

<!DOCTYPE html>
            <html>
            <head>
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
            <meta charset=utf-8 />
            <title>JS Bin</title>
            </head>

           <body>    
            <div class="iframeholder">
             <iframe src="https://somesite.com"></iframe>
           </div>
            </body>

            </html>
             <style>
              iframe{pointer-events:none;}
               </style>

        <script>
        $(document).ready(function () {

           $('.iframeholder').on('click', function(e) {
             e.preventDefault();
             alert('test');

       });
    });
    </script>

Also, if I want to bind another click with it to trigger a click on another link automatically is this possible (ie there will be two links within the iframe) using the below code and replace the part it with of alert('test'); from the above code or would i hit a xss error:

$( "iframeholder" )
  .mousedown(function() {
    $( this ).trigger('click');
  })

All help would be appreciated, I am a newbie :)

Since the site in the iframe is cross domain, you will most likely run into CORS exceptions which will prevent you from being able to access the iframes website with your javascript. — Taplar, Jan 31 '17 at 23:53

score 0 · Answer 1 · answered Jan 31 '17 at 23:48

0

You won't be able to interact with iframe's DOM using javascript.

answered Jan 31 '17 at 23:48

JohanP

5,252
2
24
34

Its an overlay so I will be able to eventually see how many clicks have gone through, however from seeing this code I notice the click doesn't feed down to the iframe – Manpreet Dongrai Jan 31 '17 at 23:51
Your _overlay_ is blocking the elements underneath it. Have a look at [this solution](http://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements) – JohanP Feb 01 '17 at 00:00
pointer events is already set to none in the above code, but this still blocks the click. has this got something to z-index? if so how would I put this in the code – Manpreet Dongrai Feb 01 '17 at 00:09
Could you paste iframeholder css please. – JohanP Feb 01 '17 at 00:16
ive used code from http://jsbin.com/ifozul/81/edit?html,css,js,output: – Manpreet Dongrai Feb 01 '17 at 13:59
[This](http://stackoverflow.com/questions/2381336/detect-click-into-iframe-using-javascript/32138108#32138108) is exactly what you need. I have tested it and it works – JohanP Feb 01 '17 at 21:03

Pointer events none to pass through click

1 Answers1