0

我有以下 2 个 html 文件，INDEX.HTML 和 FRAME.HTML，它们显示在 INDEX.HTML 上的 iframe 中。当我单击 button1 时，我收到警报“action1: your value 1”。单击 button2 会显示警报“action1: your value 2”。

我的问题是，如何在 button3 上进行 onclick 以触发绑定到 button1 的 myfunction 对象上的 action2？这应该给我警报“action2：你的值 1”。

索引.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>

框架.HTML：

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

3 回答 3

1

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

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

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

window.parent.clickButton(1);

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

于 2012-12-18T14:31:39.840 回答
0

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

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

然后你可以添加一个 evenlistener ：

button3.myfunction("your value 3");

或直接：

$('iframe#frameforbutton3').contents().find("#button3").myfunction("your value 3");
于 2012-12-18T16:50:32.067 回答
0

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

索引.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>

框架.HTML：

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

单击 button3 会显示警报“action2: your value 1”。

于 2012-12-19T08:04:00.767 回答