Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Calling Parent Page JavaScript Function In An Iframe

I am using an iFrame in my application. Let me give an example here. I have main page as

<html>
  <head>
    <script src='jquery.js'></script>
    <script>
      function TestFunction()
      {
        var FirstName = $("#first_name").val();
        alert(FirstName);
      }
    </script>
  <head>
  <body>
    Enter First Name: <input type='text' size='20' id='first_name'><br />
    <input type='button' value='Cilck' onclick='TestFunction();'><br />
    <iframe id='test_iframe' src='test_iframe.htm' height='200' width='200'>
    </iframe>
  </body>
</html>

...and this works fine with alerting whatever is entered in textbox

But is it possible to invoke the same function in iframe that will alert the value present in textbox of the parent page?

Suppose test_iframe.htm code is like this

<html>
  <head>
  <script src='jquery.js'></script>
  <script>
     function IframeFunction()
     {
        TestFunction(); // I know this wont work.. just an example
     }
  </script>
  <head>
  <body>
    <input type='button' value='Click' onclick='IframeFunction();'>
  </body>
</html>

Can this be done ?

like image 641
skos Avatar asked Oct 23 '25 02:10

skos


1 Answers

I believe this can be done with 'parent'

function IframeFunction() 
{ 
   parent.TestFunction(); 
}
like image 161
Chris Gessler Avatar answered Oct 24 '25 17:10

Chris Gessler



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!