javascript - 将函数从 iframe 附加到父窗口并获取适当的范围

Question

我正在向我的网络应用程序添加文件上传功能。我正在使用 iframe 来发布我的上传内容。当我的 php 脚本处理上传时，它会将一些 JavaScript 写入 iframe。该 JavaScript 尝试将一个函数附加到父级，这是可行的，但是当该函数实际被调用时，它没有正确的作用域。这是我附加到父窗口的代码:

parent.window.showPreview = function(coords)
{
    if (parseInt(coords.w) > 0)
    {
        var rx = 200 / coords.w;
        var ry = 250 / coords.h;

        $('#preview').css({
            width: Math.round(rx * 400) + 'px',
            height: Math.round(ry * 533) + 'px',
            marginLeft: '-' + Math.round(rx * coords.x) + 'px',
            marginTop: '-' + Math.round(ry * coords.y) + 'px'
        });
    }
}

当这个函数执行时，我收到一个错误，提示 $ 未定义。我尝试添加更改对parent.$('#preview').css...的JQuery调用...，但随后它说parent未定义。有任何想法吗？

Answer 1

试试这个:

var p$ = parent.window.$;
parent.window.showPreview = function(coords) {
    if (parseInt(coords.w) > 0)
    {
        var rx = 200 / coords.w;
        var ry = 250 / coords.h;

        p$('#preview').css({
            width: Math.round(rx * 400) + 'px',
            height: Math.round(ry * 533) + 'px',
            marginLeft: '-' + Math.round(rx * coords.x) + 'px',
            marginTop: '-' + Math.round(ry * coords.y) + 'px'
        });
    }
}

如果您正在为父窗口创建一个函数，您可能希望它使用父窗口的 jQuery 而不是子窗口的。您还需要确保父页面有自己的 jQuery 副本。 (如果没有，而且你很勇敢，你可以尝试动态地给它一个!)

编辑

以下是如何使用闭包而不是全局 p$ 来做到这一点:

parent.window.showPreview = (function(p$) {
  return function(coords) {
    // ... same as above
  };
})(parent.window.$);