javascript - 如何访问包含在 iframe 的 $(document).ready(function(){}) 中的函数？

Question

所以我有一个 iframe，它有一些函数包装在 $(document).ready(function(){}) 中，就像这样。

<script>
    $(document).ready(function(){
        function foo(){
            // do some stuff
        }
    });
</script>

我知道我可以使用 $('iframe').contents().find('something') 之类的东西访问 DOM，但是我可以从上面访问 foo() 函数吗？

Answer 1

您不能访问 iframe 的那个就绪函数中的变量，原因与您不能访问任何其他函数的局部变量(您不能在范围内“向下”)相同。但是，如果您可以修改 iframe 中的代码，则始终可以扩大范围。所以在你的 iframe 代码中:

$(document).ready(function() {
    function func1() {
        alert("Function in iframe");
    }

    parent.iframeFunctions = {
        test: func1
    }
});

下一个问题是您需要能够访问该函数。您不能使用普通的 jquery 文档就绪，因为当父页面的 DOM 准备就绪时 iframe 尚未完成加载，因此您的 iframeFunctions 对象在父页面中仍未定义。你需要这个:

$(window).load(function() {
    iframeFunctions.test();
});

但是，您可以访问 iframe 的全局空间。哦，是的，到目前为止，这都是假设 iframe 源属于同一域策略。否则，涉及的工作会更多，而且在很多情况下甚至不值得。例如，jquery 对象位于全局空间中，因此这是获取 iframe 的 jquery 的方式:

$("iframe")[0].contentWindow.$("#divInIframe")

因此，如果您修改 iframe 源的内容以使用函数表达式而不是函数声明:

var func1 = function() {
    alert("Function in iframe");
}

$(document).ready(function() {
    func1();
});

您也可以从父级访问它(在窗口加载事件触发后):

$(window).load(function() {
    $("iframe")[0].contentWindow.func1();
});