2

リンクをクリックしたときにこのコードが機能しない理由を教えてもらえますか?

リンクは iframe 内にあり、メイン ページのメニューを切り替えるリンクが必要です。

<script>
$(document).ready(function() {
 quickout = 0;
 $("#scrollsetting").click(function(){
    if (quickout==0){
    window.parent.document.getElementById('quickmenu').show(300);
    quickout = 1;
    } else {
    window.parent.document.getElementById('quickmenu').hide(300);
    menuout=0;
    }
 })
});
</script>
4

1 に答える 1

6

jQuery セレクターは他のウィンドウの要素を自然に選択しません。他のウィンドウの jQuery にアクセスしてその DOM を照会するか、他のウィンドウのドキュメントへの参照を渡して、jQuery が探しているものを見つけられるようにする必要があります。

最初のアプローチでは、iframeのウィンドウ内の要素を 内の jQueryでクエリiframeし、親ウィンドウの要素を親ウィンドウの jQueryでクエリします。

$(document).ready(function () {
    $("#scrollsetting").click(function () {
        window.parent.$('#quickmenu').toggle(300);
    });
});

フィドル

ただし、常に jQuery を 2 回ロードする必要があるわけではないため、親ウィンドウにロードしたとしましょう。その後、コンテキスト セレクターを使用して親の jQuery を現在の に設定することができますがdocument、デフォルトは親ウィンドウのドキュメントに設定されます。省略時：

var $ = window.parent.$;
$(document).ready(function () {
    $("#scrollsetting", document).click(function () {
        $('#quickmenu').toggle(300);
    });
});

フィドル

同様に、何らかの理由で子ウィンドウだけに jQuery を使用する場合は、親ウィンドウのドキュメントを参照するときにコンテキスト セレクターを使用します。

$("#scrollsetting").click(function () {
    $('#quickmenu', window.parent.document).toggle(300);
});

フィドル

ps。私のinjectラッパーを気にしないでください。iframeこれは、コードのテキストをIIFE の形式で挿入する前に、読み取り可能な方法でコードを記述する方法にすぎません。文字列連結は暗黙的に を呼び出しますFunction.toString()。

もちろん、フレーム化されたページに含まれる jQuery を絶対に必要とする他の依存関係/プラグインがある場合は、最も単純な最初のソリューション、またはより適していると思われるソリューションを使用できます。

ps2. あなたのページでこのコードを試すのに問題がある読者がいる場合は、 s が同じオリジン ポリシーiframeの対象であることを思い出してください。つまり、のドメイン、プロトコル、またはポートが親ドキュメントのものと一致しない場合は にアクセスできません。逆の場合も同様です。iframesrc

于 2013-02-14T01:02:26.753 に答える