3

I have a page that contains a dynamically loaded <iframe>. This iframe contains a <form>. When the user submits the <form>, a new page is loaded within the <iframe> saying Thanks.

Instead of using a second page, i want the parent page to show the Thanks message.

So basically i am in my <iframe>, and i want to call a function on the parent frame.

How can i do that ?

Pierre
  • 18,643
  • 4
  • 41
  • 62
Mike
  • 67
  • 2
  • 7
  • 1
    can you post a link to your page, or something at www.jsfiddle.net – defau1t Dec 11 '11 at 10:35
  • pierre, that's it. thats my issue! thanks for clearing up. – Mike Dec 11 '11 at 11:23
  • In my new answer i don't call another js in the main page but it does the tricks using an input hidden. I've just edited it, please try it. – phemios Dec 11 '11 at 11:31
  • refhat, sorry for replying so late. here the code link jsfiddle.net http://jsfiddle.net/bitinthenet/zaeTC/ – Mike Dec 11 '11 at 13:41

2 Answers2

1

From an iframe, it is possible to call a function declared on the parent window using window.top.functionName(). But for this to work, both pages should be hosted on the same domain. They are subject to Same Origin Policy. That means if you want to test this example, you should use a server (wamp, xampp, etc..).

page.html (updated)

<html>
<head>
    <title>Page 1</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script>
        window.foo = function(){
            alert('page 1 is executing this code');
        }
        $(function(){
            $('body').append('<iframe src="iframeContent.html"></iframe>');
        });
    </script>
</head>
<body></body>
</html>

iframeContent.html

<html>
<head>
    <title>Page 2</title>
</head>
<body>
    i am the iframe. This is my button.
    <button onclick="javascript:window.top.foo()">click me</button>
</body>
</html>
Pierre
  • 18,643
  • 4
  • 41
  • 62
  • pierre, by the way : the iframe within the index.html is created dinamically via external js file. could this be the problem? i mean: maybe it is not recognised as iframe child of index.html. question : how can I check via alert event or similar if the iframe we are talking about is actually iframe child of index.html? or should i try to add the iframe with plain html in the body section, without creating it dinamically via js? thanks – Mike Dec 11 '11 at 12:25
  • they should be on the same domain. the index.html is www.mysite.com and the iframe is in www.index.html/iframe/iframe.php. just to let you know: i am adding js/jquery stuff within a php iframe file. – Mike Dec 11 '11 at 12:28
  • I dont think the problem is related to "adding the iframe dynamically". I have updated my code, and it still works when appending the iframe using jQuery. – Pierre Dec 11 '11 at 12:30
  • Pierre, i have good news. If i click submit the thanks messagge shows up, but not AFTER the index.html has loaded and the messagge has been actually send, but immediately when i click. so i need to say to the button : please activate that function (i.e. window.foo) after the form has been successfully submitted and the index.html has been reloaded. – Mike Dec 11 '11 at 13:05
  • Then make the submit function call window.foo (thanks message). Therefore the message will appear after the form is submitted. If you are submitting the form via an AJAX request, you might want to wait for a response THEN call the window.foo function to say thanks or sorry depending on the response you receive. – Pierre Dec 11 '11 at 13:22
  • The Ajax story is not necessary. I just need to say to activate the function after index.html has been reloaded. What do you mean by: " Then make the submit function call window.foo (thanks message) ". Are you refering to the submit fucntion created by phemios? – Mike Dec 11 '11 at 13:27
0

I've done a little example for you.

Here is the main page (index.html) containing the iframe

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    </head>
    <body>
        <input type="hidden" id="infoFormPosted" value=0 />
        <iframe src="./iframe.html"></iframe>
        <div id="thanks" style="display:none;">
            Thanks!
        </div>
    </body>
</html>

And here is the iframe (iframe.html):

<html>
    <head>
        <title>myIframe</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
         <script type="text/javascript">
         $(document).ready(function() {
            $("#infoForm").submit(function() {
              //change the value of the top document input hidden to 1
              $("#infoFormPosted", top.document).val(1);
            });
            // if the input hidden is set to 1
            if($("#infoFormPosted", top.document).val() == 1){
                // show the thanks div on the top document (not in the iframe)
                $("#thanks", top.document).show();
            }
        });

        </script>
    </head>
    <body>
        <div id="anydiv">
            <form id="infoForm" action="#" method="post">
              First name: <input type="text" name="fname" /><br />
              Last name: <input type="text" name="lname" /><br />
              <input type="submit" value="Submit" />
            </form> 
        </div>
    </body>
</html>

EDIT : An alternative is to create a function inside the main page and call it in the iframe using parent.nameOfTheFunction()

The main page (index.html)

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script type="text/javascript">
        showThanks = function(){
            $("#thanks").show();
        };

        </script>
    </head>
    <body>
        <input type="hidden" id="infoFormPosted" value=0 />
        <iframe src="./iframe.html"></iframe>
        <div id="thanks" style="display:none;">
            Thanks!
        </div>
    </body>
</html>

The iframe (iframe.html):

<html>
    <head>
        <title>myIframe</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
         <script type="text/javascript">
         $(document).ready(function() {
            $("#infoForm").submit(function() {
              //change the value of the top document input hidden to 1
              $("#infoFormPosted", top.document).val(1);
            });
            // if the input hidden is set to 1
            if($("#infoFormPosted", top.document).val() == 1){
                // call showThanks function from the main frame
                parent.showThanks(); 
            }
        });

        </script>
    </head>
    <body>
        <div id="anydiv">
            <form id="infoForm" action="#" method="post">
              First name: <input type="text" name="fname" /><br />
              Last name: <input type="text" name="lname" /><br />
              <input type="submit" value="Submit" />
            </form> 
        </div>
    </body>
</html>
phemios
  • 664
  • 4
  • 9
  • In what you wrote, you put the first and last name and click the submit button. Afterward, you append to the same div a string saying "THANKS...". I want to append the thanks note in the parent window, which by the way is not an iframe. i thought like to do something like this : iframe window : $('#submitButton').bind('click', function() { window.parent.thanksMessagge() }); AND THEN in the index.html (window.parent) create an additional js function where i append to the body the div stating "THANKS". – Mike Dec 11 '11 at 11:16
  • It's changed. The thanks note now appends in the parent window and the form is posted. Are you sure you want the parent to create additional js? An input hidden in the main page and the .show() function is working for your case isn't it? – phemios Dec 11 '11 at 11:20
  • I've just added an alternative if you really need to call a function from the iframe's parent. It works great! =] – phemios Dec 11 '11 at 11:48
  • phemios, i tried both your solutions. to me they should work, because they make sense but it doesn't work at all. by the way : the iframe within the index.html is created dinamically via external js file. could this be the problem? i mean: maybe it is not recognised as iframe child of index.html. question : how can I check via alert event or similar if the iframe we are talking about is actually iframe child of index.html? thanks – Mike Dec 11 '11 at 12:23
  • Add a name attribute on your iframe like this: `` then try `console.log(window.myIframe);`(it will say iframe.html) and `console.log(window.myIframe.parent)`(it will say index.html). You need to have firebug installed on Firefox or in Chrome you do right click > Inspect Element > Console – phemios Dec 11 '11 at 12:42
  • i tried it works fine, but the submit function is not working. really strange. – Mike Dec 11 '11 at 14:05
  • Do you have any error in the console? Maybe you have another script that disables the submit. Try to put `return true` at the end of the submit function, after `$("#infoFormPosted", top.document).val(1);`. Also, I've uploaded my files here if you want to see them: http://www.2shared.com/file/hLmq3NS9/stackoverflow_iframe_issue.html – phemios Dec 11 '11 at 14:11
  • phemios, first thanks for helping me. i appreciate it, even if i am becoming crazy for this issue ;). ok, i found the problem. it's chrome!!!i tried the file you sent me via 2shared and works perfectly ie in safari but not in chrome. any suggestion to let it work in chrome, since i did not began cross-browser checks – Mike Dec 11 '11 at 14:55
  • anyway here is another problem, even bigger : what u did is for submit event. but if the user keeps the field empty, an error shows up but the thanks div appears too, even if there is a problem. i need somehow to say to show the thanks message only when form is submitted correctly – Mike Dec 11 '11 at 15:05
  • If I host it on a real website it also works on chrome for me. To check if the form is correctly submitted see how [Jquery.submit](http://api.jquery.com/submit/) works. Inside your submit function by default you can return false and if it's correct you return true. – phemios Dec 11 '11 at 15:34
  • For more informations about checking input on submit, please see this thread: http://stackoverflow.com/questions/5886555/check-if-input-empty-on-submit – phemios Dec 11 '11 at 15:40