Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Jul 2011
    Posts
    272
    Thanks
    63
    Thanked 1 Time in 1 Post

    Click iframe element on href click

    Hi,

    how do I make it so when a user clicks a link on my page, it clicks an element inside of an iFrame?

    Code:
    document.getElementById("pic<?=$img?>").click();
    the iFrame is on the same domain. Thanks!

  • #2
    0x3
    0x3 is offline
    New Coder
    Join Date
    Sep 2013
    Posts
    37
    Thanks
    0
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by markman641 View Post
    Hi,

    how do I make it so when a user clicks a link on my page, it clicks an element inside of an iFrame?

    Code:
    document.getElementById("pic<?=$img?>").click();
    the iFrame is on the same domain. Thanks!
    PHP Code:
    var element document.getElementByID('<element>');
    element.addEventListener('click',linkA,false); // make sure to make IE compatible.
    function linkA() {
      return 
    document.location 'x';

    This is one possible solution.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    No, that's not at all a complete answer, 0x3.

    The element he wants to click is located inside an <iframe> of the page.

    So he has to first find the <iframe>, then get to the document of the <iframe>, *then* find the link, then click on it.

    markman: Are you aware this WILL NOT WORK unless the contents of the <iframe> are served up from the same site that served up the main page??

    If they are indeed served from the same site (same base URL) then post again if you can't figure it out.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Oh, doh on ME! I just noticed you said the <iframe> is in the same domain. Sorry, old blind eyes!

    Okay:

    Demo version of the main page:
    Code:
    <html>
    <body>
    <a href="#" id="demo">Click here to demo</a>
    <hr/>
    <iframe id="myiframe" src="iframedemo.html"></iframe>
    
    <script type="text/javascript">
    document.getElementById("demo").onclick = function( )
    {
        var fr = document.getElementById("myiframe");
        var fdoc = fr.contentDocument;
        fdoc.getElementById("silly").click();
    }
    </script>
    </body>
    </html>
    Demo version of "iframedemo.html", the iframe contents:
    Code:
    <html>
    <body>
    <input type="button" id="silly" onclick="alert('you clicked on the silly button');" value="A simple silly button"/>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    markman641 (09-09-2013)

  • #5
    Regular Coder
    Join Date
    Jul 2011
    Posts
    272
    Thanks
    63
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Old Pedant View Post
    Oh, doh on ME! I just noticed you said the <iframe> is in the same domain. Sorry, old blind eyes!

    Okay:

    Demo version of the main page:
    Code:
    <html>
    <body>
    <a href="#" id="demo">Click here to demo</a>
    <hr/>
    <iframe id="myiframe" src="iframedemo.html"></iframe>
    
    <script type="text/javascript">
    document.getElementById("demo").onclick = function( )
    {
        var fr = document.getElementById("myiframe");
        var fdoc = fr.contentDocument;
        fdoc.getElementById("silly").click();
    }
    </script>
    </body>
    </html>
    Demo version of "iframedemo.html", the iframe contents:
    Code:
    <html>
    <body>
    <input type="button" id="silly" onclick="alert('you clicked on the silly button');" value="A simple silly button"/>
    </body>
    </html>
    With a little handiwork, here's my working code:

    Code:
    <a href="#" onclick="clickImg(<?=$i?>);return false;">picture 1</a>
    
    <script type="text/javascript">
    function clickImg(id){
        var fr = document.getElementById("iframe1");
        var fdoc = fr.contentDocument;
        fdoc.getElementById("pic" + id).click();
    }
    </script>
    Last edited by markman641; 09-09-2013 at 10:38 PM.

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by markman641 View Post
    With a little handiwork, here's my working code:

    Code:
    <a href="#" onclick="clickImg(<?=$i?>);return false;">picture 1</a>
    Unless you're linking to something or relying on default link styles, you can remove the href attribute. Then you can remove return false; since then there will be no default action (navigation to the link) to cancel.

    Better though: you would replace the href attribute value with a link to the image as fallback for environments without script.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #7
    Regular Coder
    Join Date
    Jul 2011
    Posts
    272
    Thanks
    63
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Arbitrator View Post
    Unless you're linking to something or relying on default link styles, you can remove the href attribute. Then you can remove return false; since then there will be no default action (navigation to the link) to cancel.

    Better though: you would replace the href attribute value with a link to the image as fallback for environments without script.
    yeah, in my updated code i'm linking to the gallery element on the page, #gallery.

  • #8
    Regular Coder
    Join Date
    Jul 2011
    Posts
    272
    Thanks
    63
    Thanked 1 Time in 1 Post
    Old Pendant, it seems like Safari has a problem with .click() events... any compatible solution?

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Here's the solution that works in Safari.

    PHP Code:
    function clickImg(id) {
        var 
    fr document.getElementById("iframe1");
        var 
    fdoc fr.contentDocument;
        var 
    pic fdoc.getElementById("pic" id);
        if (
    pic.click) {
            
    pic.click();
        } 
        else if (
    document.createEvent) { //for Safari
            
    var evObj document.createEvent('MouseEvents');
            
    evObj.initMouseEvent('click'truetruewindow);
            
    pic.dispatchEvent(evObj);
        }

    If that doesn't work, try changing:
    PHP Code:
    var evObj document.createEvent('MouseEvents'); 
    with:
    PHP Code:
    var evObj fdoc.createEvent('MouseEvents'); 
    If that still doesn't work, try changing:
    PHP Code:
    evObj.initMouseEvent('click'truetruewindow); 
    with:
    PHP Code:
    evObj.initMouseEvent('click'truetruefr.contentWindow); 
    I have used this code in my work project but it was on the same window not in an iframe. That's why I'm not sure if creating and dispatching events will work in the iframe if the context is window and not the iframe window object.

  • #10
    Regular Coder
    Join Date
    Jul 2011
    Posts
    272
    Thanks
    63
    Thanked 1 Time in 1 Post
    Actually I found this solution online that works. See any problems with this?

    PHP Code:
    <script type="text/javascript">
    function clickImg(id){
        var fr = document.getElementById("iframe1");
        var fdoc = fr.contentDocument;
        //fdoc.getElementById("pic" + id).click();
    fireEvent(fdoc.getElementById("pic" + id),'click');
        window.history.replaceState('Object', 'Red Roll - <?=$event?>', '?event=<?echo urlencode($event); ?>&img=' + id + '#overview1');
    }
    </script>

    <script type="text/javascript">
    function fireEvent(obj,evt){
        
        var fireOnThis = obj;
        if( document.createEvent ) {
          var evObj = document.createEvent('MouseEvents');
          evObj.initEvent( evt, true, false );
          fireOnThis.dispatchEvent(evObj);
        } else if( document.createEventObject ) {
          fireOnThis.fireEvent('on'+evt);
        }
    }
    </script>

  • #11
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    That's essentially the same as my suggestion. But mine is simpler as it will directly execute click() if supported (which is ~99.99% of the time), otherwise, it manually creates and dispatches the click event.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •