JavaScriptのwindow.open()メソッド
window.openはwindowオブジェクトのメソッドで、新しいウィンドウを開く命令です。
window.open(“ウィンドウのURL”,”ウィンドウ名”,”オプション”）と書くと、新しいウィンドウを開くことができます。
<script>
function aiue() {
var w=window.open("https://homepage.wakabagari.com/", "_blank", "width=700,height=600,scrollbars=yes");
w.focus();
}
</script>
<input type="button" value="aaa" onclick="aiue()">
ウィンドウのURL部分には、当サイトのURLが入っています。ＵＲＬを指定しない場合はabout:blankにしておきます。
ウィンドウ名に_blankとありますが、ここにはformのtargetプロパティで指定したウィンドウ名を記載するのが普通です。ない場合はnullを通常記載します。
オプション部分は、ググって適当に。ここでは700：600の画面で、スクロールバーをつける設定にしています。
タブブラウザが一般的となった今の時代においては、新規ウィンドウを開くといったら、タブとして開くか、もしくは別のウィンドウとして開くかの2つのケースを考えなければなりません。
form関連のプロパティ
formの中でinputされた内容をsubmitして。新規ウィンドウにデータを飛ばすパターンが多いかと思います。
以下フォーム要素のプロパティ・メソッド
| プロパティ名 | 説明 |
|---|---|
| elements | form内のinput要素一覧 |
| length | form内のinput要素の数 |
| name | formの名前。JavaScriptから参照する時に利用する |
| acceptCharset | formがサポートする文字セット |
| action | formのaction要素 |
| enctype | formのcontent type |
| method | データを送信する時に使用するＨＴＴＰメソッド |
| target | actionの結果を書き込む対象 |
| submit() | データを送信する |
| reset() | formを初期状態に戻す |
submit()メソッドを実行する（form.submit())とsubmitボタンを押した時と同じようにデータがサーバに送信されますが、submitボタンを押した時とは違い、submitイベントは発火しない。onsubmitイベントハンドラも実行されない。そのためイベントハンドラを発火させたい時は、このメソッドを使用せず、submitボタンが押される必要があります。
form.targetでformのtargetプロパティを指定できます。formは、このtargetプロパティに指定されたフレームやウィンドウにsubmitの結果のレスポンスを描画します。プロパティを設定しない場合は自分自身のフレームになるのでページ遷移が発生します。
| targetプロパティ値 | 結果を表示する場所 |
|---|---|
| _blank | 新規ウィンドウ |
| _self | 現在のフレーム（ウィンドウ） |
| _parent | 親フレーム |
| _top | フレーム分割を解除してウィンドウ全体に表示 |
| フレーム名、ウィンドウ名 | 指定しされた任意のフレーム（ウィンドウ） |
上記例ではf.target="hoge"ですので、結果を表示する場所として任意のフレーム（hoge）を指定して、これに対してsubmitの結果を送ります。このケースではタブブラウザの場合はタブとして新規ウィンドウが開きます。
this.formのthisはinput要素を指しています。inputのformプロパティで属するフォーム要素を指定しています。
inputやselectのようなフォームコントロール要素の共通のプロパティは、以下のようになります。
| プロパティ | 説明 |
|---|---|
| form | 要素が属するフォーム要素 |
| disabled | 要素を無効とするか |
| name | 要素の名前 |
| type | 要素のタイプ |
| value | 要素の値 |
| focus() | 要素にフォーカスを当てる |
| blur() | 要素からフォーカスを外す |
さらにこれをタブではなく、新規ウィンドウとして開きたい場合にはformプロパティに加えてwindow.open()メソッド組み込みます。
submitの内容を送る任意のウィンドウをwindow.open()メソッドの中に指定する（f.target）することで、新しいウィンドウを開くことが出来ます。
そして、そのウィンドウのプロパティにfocus()メソッドを指定して、フォーカスを当てたら、そのformの内容をsubmitし、その内容が新規のウィンドウフレーム、rese2.phpというページに飛びます。
submitを押してしまうと親ウィンドウのページが切り替わってしまうので、formにonsubmitをreturn falseすること。
submit()はform要素のプロパティ、focus()はformコントロール要素のプロパティ、submit()メソッドとsubmitボタンによるsubmitイベントは挙動が異なることに注意します。
submitイベントだけが、formイベントのキャンセルやonsubmitイベントハンドラを実行できます。
紛らわしいtargetプロパティ
targetプロパティは上記のform要素のプロパティとして以外にも、他のonclickやaddeventlistnerのようなイベントハンドラの中でwindow.event.targetのような形で使用するケースもあります。この場合はそのイベントが起こった要素（inuptなど）をさすことに注意します。
window.event.targetプロパティはIEに対応していないので、window.event.srcElementというほぼ同じ命令（要素を選択）とイコールとして使用することが多いです。なぜならevent.srcelementがfirefoxに対応していないからです。
srcElementを使うと、firefoxがダメ、targetを使うとIEがダメというどっちつかずの状態を防ぐために、firefox用にイベントリスナを下記のように設定しておく方法があります。
こうすることでwindow.event.srcElementをFirefoxにも対応させることが出来ます。
- 参考・引用元
- パーフェクトJavaScript（書籍）
コメントor補足情報orご指摘あればをお願いします。
- << 前のページ
- 次のページ >>
