jquery - 从 iframe 更改父元素不起作用？

Question

谁能告诉我为什么当我点击链接时这段代码不起作用？

该链接位于 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>

Answer 1

jQuery 选择器不会自然地选择其他窗口中的元素，您必须访问其他窗口中的 jQuery 来查询其 DOM，或者传递对其他窗口文档的引用，以便 jQuery 可以找到您要查找的内容。

第一种方法，使用 iframe 内的 jQuery 查询 iframe 窗口内的元素，并使用父窗口的 jQuery 查询父窗口中的元素:

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

Fiddle

不过，并不总是需要加载 jQuery 两次，所以假设您刚刚将其加载到父窗口中，然后您可以使用父窗口的 jQuery 和 context selector将其设置为当前文档，而省略时仍默认为父窗口的文档:

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

Fiddle

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

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

Fiddle

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

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

PS2。如果任何读者在您的页面中尝试此代码时遇到问题，请记住 iframe 受 same origin police 的约束。 。也就是说，当 src 的域、协议(protocol)或端口与父文档的域、协议(protocol)或端口不匹配时，您无法访问 iframe，反之亦然.