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 中的 jQuery 查询 's 窗口中的元素iframe，使用父窗口的 jQuery 查询父窗口中的元素：

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

小提琴

虽然，并不总是需要加载 jQuery 两次，所以假设您刚刚将它加载到父窗口中，然后您可以使用父窗口的 jQuery 和上下文选择器将其设置为 current document，而它仍然默认为父窗口的文档省略时：

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

小提琴

同样，如果出于某种原因您只在子窗口中使用 jQuery，请在引用父窗口的文档时使用上下文选择器：

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

小提琴

附言。别介意我的inject包装。iframe这只是一种在将其文本以 IIFE 形式注入之前以可读方式编写代码的方法——我的字符串连接隐式调用Function.toString()。

当然，如果您有其他绝对需要在框架页面中包含 jQuery 的依赖项/插件，您可以使用最简单的第一个解决方案，或者您认为更合适的任何一个解决方案。

ps2。如果任何读者在您的页面中尝试此代码时遇到问题，请记住iframes 受同源警察的约束。iframe也就是说，当它src的域、协议或端口与父文档不匹配时，您将无法访问它，反之亦然。

于 2013-02-14T01:02:26.753 回答