在Iframe中调用父页面JavaScript函数

时间:2012-04-19 11:33:37

标签: javascript jquery html

我在我的应用程序中使用了iFrame。我在这里举个例子。 我有主页

<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>

...这可以正常警告文本框中输入的内容

但是可以在iframe中调用相同的函数来提醒父页面文本框中的值吗?

假设test_iframe.htm代码是这样的

<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>

可以这样做吗?

3 个答案:

答案 0 :(得分:4)

我相信这可以通过'父母'来完成

function IframeFunction() 
{ 
   parent.TestFunction(); 
}

答案 1 :(得分:1)

<html>
  <head>
  <script src='jquery.js'></script>
  <script>
     function IframeFunction()
     {
       parent.TestFunction();  // or top.TestFunction()
     }
  </script>
  <head>
  <body>
    <input type='button' value='Click' onclick='IframeFunction();'>
  </body>
</html>

答案 2 :(得分:0)

<a onclick="parent.abc();" href="#" >Call Me </a>

请参阅Window.Parent

返回对当前窗口或子帧的父级的引用。

如果窗口没有父窗口,则其父属性是对自身的引用。

当一个窗口加载到,或者,它的父窗口是嵌入窗口的元素的窗口。

此答案取自stackoverflow