如何访问嵌套在iframe的$(document).ready(function(){})函数？

Question

如何访问嵌套在iframe的$(document).ready(function(){})函数？

5

我有一个iframe，其中包含一些用$(document).ready(function(){})包装的函数，就像这样。

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

我知道我可以使用类似 $('iframe').contents().find('something') 的方式访问DOM，但我能否访问上面的 foo() 函数呢？

- Dylan Hudson

1

听起来非常困难 - 传递给 $(document).ready() 的块是一个匿名函数，因此从外部获取对它的引用将会很难，甚至不可能。你为什么不能将该函数移到 $(document).ready() 块之外呢？这似乎会让你的生活变得更加轻松。 - Xavier Holt

不行，代码不能这样写。 - Šime Vidas

2个回答

0

不行。 foo 是一个局部变量，无法从其他地方看到它（想象一下如果你可以从它们的作用域之外访问索引变量如 i 和其他局部变量！）。

如果您可以更改 iframe 中的代码：

1）您可以将 foo 变成全局变量。

$(document).ready(function(){
    foo = function(){
        //this alternate syntax declares a global function foo
        //it is very evil so be sure you really need this
        ...
    };
})

或者如果foo没有使用任何内部变量，它本来可以在外部声明。

首先...

function foo(){
    ...
};

$(document).ready(function(){

})

2) 你可以将foo作为参数传递给需要它的人（就像你必须对任何其他本地变量一样）

$(document).ready(function(){
    function foo(){
        //this alternate syntax declares a global function foo
        //it is very evil so be sure you really need this
        ...
    };

    function_that_uses_foo();
})

function_that_uses_foo(){
    foo(); //foo is not on cope, this doesnt work!
}

变成

$(document).ready(function(){
    function foo(){
        //this alternate syntax declares a global function foo
        //it is very evil so be sure you really need this
        ...
    };

    function_that_uses_foo(foo);
})

function_that_uses_foo(his_foo){
    his_foo();
}

如果您无法更改iframe，则需要复制粘贴函数代码，即使在此之后也可能没有帮助。

- hugomg

如果你不将它作为参数传递，就看不到它。 - Griwes

这不是本地变量，而是嵌套函数声明。一个“实际的”名称可能是“私有函数”。 - Šime Vidas

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- uɥƃnɐʌuop · Accepted Answer

您无法访问iframe的ready函数中的变量，原因是您无法访问任何其他函数的局部变量（您无法“向下”访问作用域）。但是，如果您可以修改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();
});