单击 iframe 中的按钮时在父页面上调用 jQuery 脚本答案

【问题标题】：Calling a jQuery script on the parent page when clicking on a button in an iframe单击 iframe 中的按钮时在父页面上调用 jQuery 脚本
【发布时间】：2011-12-11 10:21:37
【问题描述】：

我有一个包含动态加载的<iframe> 的页面。此 iframe 包含 <form>。当用户提交<form> 时，会在<iframe> 中加载一个新页面并表示谢谢。

我希望父页面显示谢谢消息，而不是使用第二个页面。

所以基本上我在我的<iframe> 中，我想在父框架上调用一个函数。

我该怎么做？

【问题讨论】：

你可以在你的页面上发布一个链接，或者在 www.jsfiddle.net 上发布一些东西
皮埃尔，就是这样。那是我的问题！感谢清理。
在我的新答案中，我没有在主页中调用另一个 js，但它使用隐藏的输入来完成技巧。我刚刚编辑过，请试一试。
refhat，抱歉这么晚才回复。这里是代码链接 jsfiddle.net jsfiddle.net/bitinthenet/zaeTC

标签： javascript jquery iframe

【解决方案1】：

在 iframe 中，可以使用 window.top.functionName() 调用在父窗口上声明的函数。但要使其正常工作，两个页面都应该托管在同一个域上。它们受Same Origin Policy 的约束。这意味着如果你想测试这个例子，你应该使用服务器（wamp、xampp 等）。

page.html（更新）

<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，顺便说一句：index.html 中的 iframe 是通过外部 js 文件动态创建的。这可能是问题吗？我的意思是：也许它不被识别为 index.html 的 iframe 子项。问题：如果我们正在谈论的 iframe 实际上是 index.html 的 iframe 子级，我如何通过警报事件或类似事件进行检查？或者我应该尝试在正文部分添加带有纯 html 的 iframe，而不是通过 js 动态创建它？谢谢
它们应该在同一个域中。 index.html 是 www.mysite.com，iframe 是 www.index.html/iframe/iframe.php。只是让你知道：我在 php iframe 文件中添加 js/jquery 的东西。
我认为问题与“动态添加 iframe”无关。我已经更新了我的代码，并且在使用 jQuery 附加 iframe 时它仍然有效。
皮埃尔，我有好消息。如果我单击提交，则会显示感谢消息，但不是在加载 index.html 并且消息已实际发送之后，而是在我单击时立即显示。所以我需要对按钮说：请在成功提交表单并重新加载 index.html 后激活该功能（即 window.foo）。
然后让提交函数调用window.foo（感谢消息）。因此，该消息将在表单提交后出现。如果您通过 AJAX 请求提交表单，您可能希望等待响应然后根据收到的响应调用 window.foo 函数表示感谢或抱歉。

【解决方案2】：

我为你做了一个小例子。

这是包含 iframe 的 主页 (index.html)

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

这里是 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>

编辑：另一种方法是在主页面内创建一个函数并使用parent.nameOfTheFunction()在iframe中调用它

主页 (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>

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>

【讨论】：

在您所写的内容中，输入名字和姓氏，然后单击提交按钮。之后，您在同一个 div 上附加一个字符串，上面写着“谢谢...”。我想在父窗口中附加感谢信，顺便说一句，它不是 iframe。我想做这样的事情：iframe window : $('#submitButton').bind('click', function() { window.parent.thanksMessagge() });然后在 index.html (window.parent) 中创建一个额外的 js 函数，在其中我将 div 附加到正文中，声明“谢谢”。
改变了。感谢信现在附加在父窗口中，并且表单已发布。您确定要让父级创建额外的 js 吗？隐藏在主页中的输入和 .show() 函数适用于您的情况，不是吗？
如果您确实需要从 iframe 的父级调用函数，我刚刚添加了一个替代方法。效果很好！ =]
phemios，我尝试了您的两种解决方案。对我来说，它们应该起作用，因为它们有意义，但根本不起作用。顺便说一句：index.html 中的 iframe 是通过外部 js 文件动态创建的。这可能是问题吗？我的意思是：也许它不被识别为 index.html 的 iframe 子项。问题：如果我们正在谈论的 iframe 实际上是 index.html 的 iframe 子级，我如何通过警报事件或类似事件进行检查？谢谢
在你的 iframe 上添加一个 name 属性，如下所示：<iframe name="myIframe" src="./iframe.html"></iframe> 然后尝试console.log(window.myIframe);（它会说 iframe.html）和console.log(window.myIframe.parent)（它会说 index.html）。您需要在 Firefox 或 Chrome 上安装 firebug，然后右键单击 > Inspect Element > Console