JavaScriptで子ウィンドウから親ウィンドウを操作する

もぐナビの運営には、日々投稿されるクチコミの監視業務があります。そこで利用しているWebアプリには、投稿された画像を編集する機能があります。クチコミの一覧が表示される親ウィンドウから編集機能をもつ子ウィンドウが開かれ、画像の編集と保存を行い完了メッセージを表示します。先日この機能に、編集した画像をクチコミ一覧へさせるようにしましたので、その方法を書きたいと思います。

親ウィンドウから子ウィンドウを開く

window.open('/imageEdit?path=[編集する画像のパス]'&targetClass=[imgタグのクラス名], 'imageEditWindow', 'width=600, height=600, menubar=no, toolbar=no, scrollbars=yes')

クチコミの一覧から編集機能を開くには、window.open を利用します。このときURLパラメータでimgタグのクラス名を渡すことで、画像を反映させる対処を特定出来るようにしました。

小ウィンドウから親ウィンドウへ編集内容を渡す

window.opener.postMessage(JSON.stringify({
    'type': 'editImage',
    'targetClass': '[imgタグのクラス名]',
    'path': '[画像パス]?timestamp=' + new Date().getTime()
}));

編集機能をもつ子ウィンドウでは、画像の編集と保存が完了したことを利用者に通知する画面があります。今回はそのページに、Web Messaging APIを利用し親ウィンドウで画像を反映させるために必要な情報を通知することにしました。反映する画像のパスと、場所を特定するためのクラス名含めています。このほかに、通知の種類を判別するため"type"という属性を含めています。工夫した点として、画像パスに"timestamp"というパラメータを追加しました。これは、編集の前後で画像ファイル名が変わらない場合にブラウザのキャッシュにより反映されないことへ対処するためです。

親ウィンドウで編集内容を反映する

window.addEventListener('message', function(e) {
    var json = JSON.parse(e.data);
    if (json.type == 'editImage') {
        var img = jQuery(json.targetClass);
        img.attr('src', json.path);
        return;
    }
}, false);

最後に、親ウィンドウで通知を受け取ります。通知の種類を判別し、画像反映の通知の場合は指定された要素のsrc属性を書き換えるようにしています。