Присоединение функции к родительскому окну из 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'
        });
    }
}

Когда эта функция выполняется, я получаю сообщение об ошибке, что $ не определено. Я попытался добавить изменение вызова JQuery к parent. $ ('# Preview'). Css ..., но затем он говорит, что 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.$);