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就可以找到你的＃＆＃ 39;重新寻找。

第一种方法，使用iframe中的jQuery查询iframe窗口内的元素，使用父窗口jQuery查询父窗口中的元素：< / p>

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

Fiddle

虽然，并不总是需要加载jQuery两次，所以让我们说你只是将它加载到父窗口中，然后你可以使用父{j} {j}设置{j}它当前为document，但在省略时仍默认为父窗口的文档：

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

context selector

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

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

Fiddle

PS。不要介意我的inject包装器。它只是一种以可读方式编写代码的方法，然后以IIFE的形式将其文本注入iframe - 我的字符串连接隐式调用Fiddle。

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

PS2。如果任何读者在您的网页中尝试使用此代码时遇到问题，请记住iframe受Function.toString()的约束。也就是说，当iframe的域名，协议或端口与父文档不匹配时，您无法访问src，并且相同反过来说。

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

1 个答案: