Javascript 如何使iframe中的按钮触发父窗口中特定对象上的函数？

我有以下两个html文件，INDEX.html和FRAME.html，它们显示在INDEX.html上的iframe中。当我单击按钮1时，我会收到警报“操作1：您的值1”。单击按钮2显示警报“操作1：您的值2”

我的问题是，如何在button1绑定的myfunction对象上单击button3触发action2？这应该会给我一个警告“行动2：你的价值1”

INDEX.HTML：

    <a id="button1" href="#">BUTTON 1</a>
    <a id="button2" href="#">BUTTON 2</a>

    <iframe id="frameforbutton3" src="frame.html"></iframe>

    <script type="text/javascript">
        //<![CDATA[
        $.fn.myfunction = function(value) {
            $(this).click(function() {
                action1();
                return false;
            });
            var action1 = function() {
                alert("action1: " + value);
            }
            var action2 = function() {
                alert("action2: " + value);
            }
        }
        $(function() {
            $("#button1").myfunction("your value 1");
            $("#button2").myfunction("your value 2");
        });
        //]]>
    </script>

    <a id="button1" href="#">BUTTON 1</a>
    <a id="button2" href="#">BUTTON 2</a>

    <iframe id="frameforbutton3" src="frame.html"></iframe>

    <script type="text/javascript">
        //<![CDATA[
        var buttons = {};
        $.fn.myfunction = function(value) {
            var button = $(this);
            buttons[button.attr('id')] = myfunctionimpl(button, value);
        }
        var myfunctionimpl = function(button, value) {
            button.click(function() {
                action1();
                return false;
            });
            var action1 = function() {
                alert("action1: " + value);
            }
            var action2 = function() {
                alert("action2: " + value);
            }
            return {
                action2: action2
            }
        }
        $(function() {
            $("#button1").myfunction("your value 1");
            $("#button2").myfunction("your value 2");
        });
        //]]>
    </script>

//

FRAME.HTML：

    <a id="button3" href="#">BUTTON 3</a>

    <a id="button3" href="#" onclick="window.parent.buttons['button1'].action2(); return false;">BUTTON 3</a>

---

不能从帧内访问父帧的元素，反之亦然。您可以做的是在父级中有一个由子级调用的函数。在父项中添加：

function clickButton(num) {
    $("#button" + num).click();
}

…然后从子对象（frame.html）调用：

---

…或2，具体取决于您的需要。

您可以通过以下方式访问iframe内的元素：

var button3 = $('iframe#frameforbutton3').contents().find("#button3");

然后，您可以添加一个侦听器：

button3.myfunction("your value 3");

或直接：

$('iframe#frameforbutton3').contents().find("#button3").myfunction("your value 3");

---

好的，我找到了一个解决方案，它似乎能按预期工作。无论我在页面上绑定了多少元素，全局变量和/或函数的数量都将保持不变。这正是我想要达到的。这是我的修改

INDEX.HTML：

    <a id="button1" href="#">BUTTON 1</a>
    <a id="button2" href="#">BUTTON 2</a>

    <iframe id="frameforbutton3" src="frame.html"></iframe>

    <script type="text/javascript">
        //<![CDATA[
        $.fn.myfunction = function(value) {
            $(this).click(function() {
                action1();
                return false;
            });
            var action1 = function() {
                alert("action1: " + value);
            }
            var action2 = function() {
                alert("action2: " + value);
            }
        }
        $(function() {
            $("#button1").myfunction("your value 1");
            $("#button2").myfunction("your value 2");
        });
        //]]>
    </script>

    <a id="button1" href="#">BUTTON 1</a>
    <a id="button2" href="#">BUTTON 2</a>

    <iframe id="frameforbutton3" src="frame.html"></iframe>

    <script type="text/javascript">
        //<![CDATA[
        var buttons = {};
        $.fn.myfunction = function(value) {
            var button = $(this);
            buttons[button.attr('id')] = myfunctionimpl(button, value);
        }
        var myfunctionimpl = function(button, value) {
            button.click(function() {
                action1();
                return false;
            });
            var action1 = function() {
                alert("action1: " + value);
            }
            var action2 = function() {
                alert("action2: " + value);
            }
            return {
                action2: action2
            }
        }
        $(function() {
            $("#button1").myfunction("your value 1");
            $("#button2").myfunction("your value 2");
        });
        //]]>
    </script>

//

FRAME.HTML：

    <a id="button3" href="#">BUTTON 3</a>

    <a id="button3" href="#" onclick="window.parent.buttons['button1'].action2(); return false;">BUTTON 3</a>

---

单击按钮3显示警报“操作2：您的值1”。

。您的示例将调用action1，而不是action2。但我想我可以渲染触发action2的隐藏按钮，然后使用这种方法。我只希望我能将clickButton（num）函数包装在myfunction对象中，以避免名称冲突。这是我选择.fn美元的原因之一。但也是问题的根源。哦，我误解了。幸运的是，您不必使用它来单击按钮。你可以让它调用你想要的任何函数。您目前的代码没有以任何方式公开action2，因此我无法向您展示执行它的示例。另外，您不能将$.fn.myfunction分配给框架中的元素（即使您通过我给出的方法公开它），因为$.fn.function无法访问另一个框架中的DOM元素。我想问题是，如何最好地公开action2。到目前为止，你的建议是我得到的最好的，如果我渲染一个隐藏按钮，将action2绑定到它的click事件，并创建一个类似于你的函数，从iframe中单击它。那么唯一的问题是如何最好地命名一个全局函数，这样它就不会与其他函数冲突。它不会是世界上最漂亮的东西，但它会起作用的。或者，从

$.fn

包装器中执行操作2。无论如何，它听起来并不属于那里。谢谢，但如果我理解正确，这将在按钮3上设置一个onclick事件，触发action1（）。此外，即使它确实以某种方式触发了action2（），它也会在绑定到button3的myfunction对象上触发action2（），而不是在父帧中绑定到button1的对象上触发action2（）。结果将是警报“action2:your value 3”，而不是所需的“action2:your value 1”。