0

INDEX.HTML と FRAME.HTML の 2 つの html ファイルがあり、INDEX.HTML の iframe に表示されます。button1 をクリックすると、「action1: your value 1」というアラートが表示されます。button2 をクリックすると、アラート「action1: your value 2」が表示されます。

私の質問は、button1 にバインドされた myfunction オブジェクトで action2 をトリガーする onclick on button3 を作成するにはどうすればよいですか? これにより、「action2: your value 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

わかりました、希望どおりに機能すると思われる解決策を見つけました。ページで 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 に答える
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 に答える