如何使iframe中的按钮触发父窗口中特定对象上的功能？

Question

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

我的问题是，如何才能在button3上进行onclick触发，以触发绑定到button1的myfunction对象上的action2？ 这应该给我警报“ action2：您的值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>

FRAME.HTML：

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

Answer 1

您无法从框架内部访问父框架的元素，反之亦然。 您可以做的是在父级中拥有一个由孩子调用的函数。 在父项中添加：

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

...然后从孩子（frame.html）调用：

window.parent.clickButton(1);

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

Answer 2

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

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

然后您可以添加一个evenlistener：

button3.myfunction("your value 3");

或直接：

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

Answer 3

好的，我找到了一个可以按需工作的解决方案。 无论我的页面上将myfunction绑定到多少元素，全局变量和/或函数的数量都将保持不变。 正是我想要实现的目标。 这是我的修改。

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[
        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="#" onclick="window.parent.buttons['button1'].action2(); return false;">BUTTON 3</a>

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