web-dev-qa-db-ja.com

iframeからjQuery UIダイアログを閉じる

（iframeを使用して）jQueryダイアログ内に写真をアップロードするための次のコードを実装しました。

ここにiFrameがあります

<div style="display: none">
    <iframe id="upload-form" frameborder="0" marginheight="0" marginwidth="0" src="Upload.aspx"></iframe>
</div>

そして、これがjQueryコードですダイアログを開く処理を行う親ページです。

$("#upload-image").click(function (e) {
    e.preventDefault();
    $('#upload-form').dialog({
        modal: true,
        width: 300,
        title: "Upload Image",
        autoOpen: true,
        close: function(event, ui) { $(this).dialog('close') }
    });
});

次に、アップロードが成功した後にスクリプトを（iframeページに）挿入します。これにより、結果が親ページに返されますが、同時にダイアログを閉じたいと思います。

$(document).ready(function () {
    $(parent.document).find('#imagePathValue').val('theimagevalue');
    $(parent.document).find('#upload-form').dialog('close');
});

#imagePathValueは正常に渡されましたが、ダイアログを閉じることができないようです。

何かアイデアはありますか？

jqueryjquery-uiiframejquery-ui-dialog
25
Marko

これを機能させるには、iframe内からではなく、親からjQueryを呼び出す必要があります。これを行うには、以下を使用します...

window.parent.jQuery('#upload-form').dialog('close');

それでうまくいくはずです！

40
mikesir87

これを試して：

$(document).ready(function () {
    $(parent.document).find('#imagePathValue').val('theimagevalue');
    window.parent.$('#upload-form').dialog('close');
});
5
Jeremy B.

それに加えて、これも行う必要があります。

window.parent.$('#upload-form').remove();

そのため、ダイアログを閉じるとiframeインスタンスが削除されます。

したがって、最終的なコードは次のようになります。

$(document).ready(function () {
    $(parent.document).find('#imagePathValue').val('theimagevalue');
    window.parent.$('#upload-form').dialog('close');
    window.parent.$('#upload-form').remove();
});

ありがとうKaushal

2
Kaushal Subba