button click event inside iframe in html page

I have two html pages.

One page is called MainPage.html that contains an iframe.
The other page is called IframeContentPage.html which contains the content that is displayed in the iframe.

This is my code:

MainPage.html

<!DOCTYPE html>
<html>
<head>
	<title>jQuery Button click</title>

    <!-- EXTERNAL REFERENCES -->    
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <!-- EXTERNAL REFERENCES -->  

    <style type="text/css">
        body {
            padding: 30px;
            font-family: Arial;
        }
        .col1 {
            width: 100px;
        }
        .col2 {
            width: 120px;
        }
        .col3 {
            width: 100px;
        }
        .col4 {
            width: 120px;
        }
        .col5 {
            width: 100px;
        }
        .col6 {
            width: 100px;
        }
        
   </style>

    <script type="text/javascript">
        $(document).ready(function () {
            // -------------------

            // *********** On Page Load ***********

            // *********** On Page Load ***********

            // ****** button click event for the bing button outside the window ******
            $('#ButtonOutsideIframeBing').click(function () {

                // on click - fire the click event of the button inside the window
                $('#ButtonInsideIframeBing').click();

            });
            // ****** button click event for the bing button outside the window ******          

            // *********** Refresh Iframe ***********
            $('#ButtonRefreshIframe').click(function () {

                // refresh iframe with id IFrame1 on button click
                $('#Iframe1').attr('src', $('#Iframe1').attr('src'));

            });
            // *********** Refresh Iframe ***********

            // -------------------
        });
    </script>

</head>
<body>

    <!-- refresh iframe using inline javascript-->
    <!--http://stackoverflow.com/questions/11287050/iframe-reload-button-->
    <button id="ButtonJS1" onclick="var ifr=document.getElementsByName('Iframe1')[0]; ifr.src=ifr.src;" style="width:220px;height:30px;">Refresh Iframe using Inline JS</button>
    <br />
    <!-- refresh iframe using javascript function -->
    <button id="ButtonJS2" onclick="refreshIframe();" style="width:220px;height:30px;">Refresh Iframe using JS Function</button>
    <br />
    <!-- refresh iframe using jQuery -->
    <input id="ButtonRefreshIframe" type="button" value="Refresh Iframe using jQuery" style="width:220px;height:30px;" />
    <br /><br />
    <script>
        function refreshIframe() {
            var ifr = document.getElementsByName('Iframe1')[0];
            ifr.src = ifr.src;
        }
    </script>
    <div id="Div1">
    <table>
        <tr>
            <td class="col1"></td>
            <td class="col2"><input id="ButtonOutsideIframeBing" type="button" value="Fire Bing button Inside iframe" style="width:200px;height:35px;" /></td>
            <td class="col3"></td>
            <td class="col4"></td>
            <td class="col5"></td>            
            <td class="col6"></td>
        </tr>
    </table>
    </div>
      <br /><br />
      <iframe style="width: 400px; height: 300px;" src="IframeContentPage.html" id="Iframe1" name="Iframe1">
      </iframe>
    
</body>
</html>

Open in new window



IframeContentPage.html

<!DOCTYPE html>
<html>
<head>
	<title>iframe content page</title>

    <!-- EXTERNAL REFERENCES -->    
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <!-- EXTERNAL REFERENCES -->  

    <style type="text/css">
        body {
            padding: 30px;
            font-family: Arial;
        }
   </style>

    <script type="text/javascript">
        $(document).ready(function () {
            // -------------------

            // *********** On Page Load ***********

            // *********** On Page Load ***********

            // ****** button click event for the bing button inside the iframe ******
            $('#ButtonInsideIframeBing').click(function () {

                // open bing
                window.open('http://www.bing.com', '_self');

            });
            // ****** button click event for the bing button inside the iframe ******

            // -------------------
        });
    </script>

</head>
<body>
    <p> This is the content page inside an iframe. Welcome!</p>
    <br />
    <input id="ButtonInsideIframeBing" type="button" value="Go to Bing" style="width:100px;height:35px;" />
    
</body>
</html>

Open in new window



When I run my page called MainPage.html it looks like this:

when i run MainPage.html
Inside the iframe I have a Bing button. If you press this button, it loads Bing into my iFrame.

Now if you notice, I have a button on this page MainPage.html called id="ButtonOutsideIframeBing" circled in blue in the picture above.
Is there a way to set the click event for this button so when I press it, it fires the click event of the Go To Bing button (circled in green in the pic above) inside the iFrame?
Either with JavaScripr or jQuery.

Anyone know the syntax to do that?
LVL 1
maqskywalkerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Lee SavidgeCommented:
Well, you wouldn't be able to do that as far as I know. The only way around it is to reload the iframe from your "Fire Bing Button inside iFrame" and pass a parameter to the query string for the iFrame and then use javascript or jQuery to pull that off the querystring when the screen loads. Then you can do what you want.

The only way I can see to do it is via some form of parameter passing rather than direct firing of events in an iFrame.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.