yano3nora
7/2/2017 - 8:15 AM

[js: open window] with jQuery & BlockUI. #js

[js: open window] with jQuery & BlockUI. #js

open_window_note.md
content_copyfile_download
  • Rendered
  • Source

Overview

静的コンテンツを別まど表示するだけならjQueryとかCSS3とかで十分対応できる。動的に【値の受け渡し】を前提にした別窓処理をしなければならないときにどうするか。

JSとHTMLでとりあえず別窓を開く、値は親窓→子窓。window.open()の戻り値は、ウィンドウの生成に成功したときは 生成されたウィンドウオブジェクト、失敗したときは null となります。

子窓のロードを待つこと

出したばかりの子窓ではjQueryなどjsの読み取りに時間がかかり即時 $('~~') とか使えません。window.onload や addEventlistener('DOMContentLoaded') や setTimeout() でロード後に処理を走らせます。

childwindow.window.onload = function() {
  console.log('onloaded');
}

子窓にポスト

http://bashalog.c-brains.jp/13/11/18-193122.php

window.opener

window.opener には自身を開いたWindowオブジェクトが入ります。

window.opener.$('selecter#hogehoge').clone();
open_window.js
content_copyfile_download
openModalWindow = (e) => {
  var url = "/path/to/modal/page/"
  var modal = window.open(url,"modal","width=800,height=600,scrollbars=yes")
  $.blockUI({
    message: "please done process on modal.",
  })
  modal.window.onload = function(){
    this.$('#js-modalClose').on('click', function(){
      console.log('close this-window and return opener-window')
      this.opener.$.unblockUI()
      this.window.close()
    }.bind(this))
  }
}