如何访问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();
});