Javascript 从iframe将函数附加到父窗口并获得适当的作用域

我正在将文件上传到我的web应用程序。我正在使用iframe发布我的上传。当我的php脚本处理上传时，它会向iframe写入一些JavaScript。这个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'
        });
    }
}

当这个函数被执行时，我会得到一个错误，它表示未定义$。我尝试将JQuery调用添加到parent.$（'#preview'）.css…，但它说parent未定义。有什么想法吗

试试这个：

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。您还需要确保父页面有自己的jQuery副本。（如果没有，而且你很勇敢，你可以尝试动态地给它一个！）

编辑

下面是如何使用闭包而不是全局p$：

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

试试这个：

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。您还需要确保父页面有自己的jQuery副本。（如果没有，而且你很勇敢，你可以尝试动态地给它一个！）

编辑

下面是如何使用闭包而不是全局p$：

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

---

我试过这个，它似乎不起作用。p$未定义。您的父页面是否有导入jQuery的

标记？应该是的。是的。我也可以成功地调用它，比如：parent.$（“#裁剪控件”）.html（cropcontrols）；正是这个函数存在范围问题：\如果定义了“parent.window.$”，那么“p$”怎么可能不被定义呢？我想你可以用闭包来定义。我在Chrome上试过同样的代码，它在那里工作。这看起来像是Firefox的问题。。嗯…我试过了，好像不管用。p$未定义。您的父页面是否有导入jQuery的

标记？应该是的。是的。我也可以成功地调用它，比如：parent.$（“#裁剪控件”）.html（cropcontrols）；正是这个函数存在范围问题：\如果定义了“parent.window.$”，那么“p$”怎么可能不被定义呢？我想你可以用闭包来定义。我在Chrome上试过同样的代码，它在那里工作。这看起来像是Firefox的问题。。隐马尔可夫模型。。。