From 133d558f6a7c08789d8986da31c012c8b15d5b4c Mon Sep 17 00:00:00 2001 From: Hiroki Tokunaga Date: Thu, 2 Mar 2023 21:08:56 +0900 Subject: [PATCH 01/18] Remove trailing spaces --- 3-frames-and-windows/01-popup-windows/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/3-frames-and-windows/01-popup-windows/article.md b/3-frames-and-windows/01-popup-windows/article.md index c372856a83..7f0bcf9954 100644 --- a/3-frames-and-windows/01-popup-windows/article.md +++ b/3-frames-and-windows/01-popup-windows/article.md @@ -78,7 +78,7 @@ params あまりサポートされていないブラウザ固有の機能も数多くありますが、通常は使用されていません。例については、window.open in MDN を確認してみてください。 -## 例: a minimalistic window +## 例: a minimalistic window ブラウザがどの機能の無効化を許容するか、最小セットの機能でウィンドウを開いてみましょう。: From cd9d366c32de28652a85fc714d4650a0fa331fda Mon Sep 17 00:00:00 2001 From: Hiroki Tokunaga Date: Thu, 2 Mar 2023 21:12:52 +0900 Subject: [PATCH 02/18] Remove a heading --- 3-frames-and-windows/01-popup-windows/article.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/3-frames-and-windows/01-popup-windows/article.md b/3-frames-and-windows/01-popup-windows/article.md index 7f0bcf9954..e28782c5f3 100644 --- a/3-frames-and-windows/01-popup-windows/article.md +++ b/3-frames-and-windows/01-popup-windows/article.md @@ -9,8 +9,6 @@ window.open('http://javascript.info/') ... すると、指定された URL で新しいウィンドウが開きます。ほとんどのモダンブラウザは、別ウィンドウではなく新しいタブとして開くよう設定されています。 -## ポップアップブロック - ポップアップはとても古くから存在します。当初の考えは、メインのウィンドウを閉じることなく別のコンテンツを表示することでした。現時点では、それをするための他の方法があります: JavaScript はサーバへリクエストを送ることができるので、ポップアップはめったに使われません。しかし、それでも依然として便利なときはあります。 過去、悪意のあるサイトはポップアップを大いに乱用しました。悪意のあるページは広告を含むウィンドウを何度も開く事ができました。そのため、現在多くのブラウザはポップアップをブロックし、ユーザを守ろうとしています。 From 113284a956f412424c7efba74872bf16a796883a Mon Sep 17 00:00:00 2001 From: Hiroki Tokunaga Date: Thu, 2 Mar 2023 21:27:44 +0900 Subject: [PATCH 03/18] Update the translation --- 3-frames-and-windows/01-popup-windows/article.md | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/3-frames-and-windows/01-popup-windows/article.md b/3-frames-and-windows/01-popup-windows/article.md index e28782c5f3..3c3bff5e75 100644 --- a/3-frames-and-windows/01-popup-windows/article.md +++ b/3-frames-and-windows/01-popup-windows/article.md @@ -9,7 +9,17 @@ window.open('http://javascript.info/') ... すると、指定された URL で新しいウィンドウが開きます。ほとんどのモダンブラウザは、別ウィンドウではなく新しいタブとして開くよう設定されています。 -ポップアップはとても古くから存在します。当初の考えは、メインのウィンドウを閉じることなく別のコンテンツを表示することでした。現時点では、それをするための他の方法があります: JavaScript はサーバへリクエストを送ることができるので、ポップアップはめったに使われません。しかし、それでも依然として便利なときはあります。 +ポップアップはとても古くから存在します。当初の考えは、メインのウィンドウを閉じることなく別のコンテンツを表示することでした。現時点では、それをするための他の方法があります: [fetch](info:fetch) を使うことでコンテンツを動的に読み込むことができ、それを動的に生成された `
` の中で表示することができます。ですから、ポップアップは私達が普段使用するものではありません。 + +さらにポップアップは、複数のウィンドウを同時には表示しないモバイルデバイスでは手際を要します。 + +それでも、ポップアップがいまだに使われるタスクが存在します。例えば OAuth 認証（Google や Facebook などへのログイン）。なぜなら: + +1. ポップアップは独立した JavaScript 環境を持つウィンドウです。ですから、第三者の信頼されていないサイトから開くポップアップは安全です。 +2. ポップアップを開くことは非常に簡単です。 +3. ポップアップはナビゲート（URLの変更）可能で、ポップアップを開いたウィンドウにメッセージを送ることができます。 + +## ポップアップブロック 過去、悪意のあるサイトはポップアップを大いに乱用しました。悪意のあるページは広告を含むウィンドウを何度も開く事ができました。そのため、現在多くのブラウザはポップアップをブロックし、ユーザを守ろうとしています。 From e7324be6749544dc1ceb5bb2472f4034ec22bbec Mon Sep 17 00:00:00 2001 From: Hiroki Tokunaga Date: Thu, 2 Mar 2023 21:31:30 +0900 Subject: [PATCH 04/18] Update the translation --- 3-frames-and-windows/01-popup-windows/article.md | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/3-frames-and-windows/01-popup-windows/article.md b/3-frames-and-windows/01-popup-windows/article.md index 3c3bff5e75..54258432da 100644 --- a/3-frames-and-windows/01-popup-windows/article.md +++ b/3-frames-and-windows/01-popup-windows/article.md @@ -27,7 +27,18 @@ window.open('http://javascript.info/') これについて考える場合、少し注意が必要です。もしコードが直接 `onclick` 内にあればそれは簡単です。しかし、ポップアップは `setTimeout` で開くでしょうか？ -このコードを試してみましょう: +例えば: +```js +// ポップアップはブロックされます +window.open('https://javascript.info'); + +// ポップアップは許可されます +button.onclick = () => { + window.open('https://javascript.info'); +}; +``` + +このように、ユーザは望まないポップアップからある程度は守られていますが、その機能は完全には無効にされていません。 ```js run // 3秒後に開く From 1b4e804a07e1a487921e1ee9d96530897850ef54 Mon Sep 17 00:00:00 2001 From: Hiroki Tokunaga Date: Thu, 2 Mar 2023 21:31:49 +0900 Subject: [PATCH 05/18] Remove obsolete sentences --- 3-frames-and-windows/01-popup-windows/article.md | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/3-frames-and-windows/01-popup-windows/article.md b/3-frames-and-windows/01-popup-windows/article.md index 54258432da..8f273592dc 100644 --- a/3-frames-and-windows/01-popup-windows/article.md +++ b/3-frames-and-windows/01-popup-windows/article.md @@ -40,22 +40,6 @@ button.onclick = () => { このように、ユーザは望まないポップアップからある程度は守られていますが、その機能は完全には無効にされていません。 -```js run -// 3秒後に開く -setTimeout(() => window.open('http://google.com'), 3000); -``` - -Chrome ではポップアップは開きますが、Firefox ではブロックされます。 - -...そして、これは Firefox でも機能します。: - -```js run -// 1秒後に開く -setTimeout(() => window.open('http://google.com'), 1000); -``` - -違いは、Firefox は 2000ms 以下のタイムアウトは許容することです。しかし、その後は "信頼" がなくなり、"ユーザ操作の範囲外" であると想定します。そのため、最初のはブロックされ、2つ目は開きました。 - ## モダンな使用方法 現在、JavaScriptを使用してデータをロードし、ページ上に表示する方法は数多くあります。しかし、ポップアップがベストな選択肢である状況はまだあります。 From d5fcf6a397e6b2999b70a4b5de1e7b32167cfe97 Mon Sep 17 00:00:00 2001 From: Hiroki Tokunaga Date: Thu, 2 Mar 2023 21:32:34 +0900 Subject: [PATCH 06/18] Remove an obsolete section --- 3-frames-and-windows/01-popup-windows/article.md | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/3-frames-and-windows/01-popup-windows/article.md b/3-frames-and-windows/01-popup-windows/article.md index 8f273592dc..f884665f17 100644 --- a/3-frames-and-windows/01-popup-windows/article.md +++ b/3-frames-and-windows/01-popup-windows/article.md @@ -40,18 +40,6 @@ button.onclick = () => { このように、ユーザは望まないポップアップからある程度は守られていますが、その機能は完全には無効にされていません。 -## モダンな使用方法 - -現在、JavaScriptを使用してデータをロードし、ページ上に表示する方法は数多くあります。しかし、ポップアップがベストな選択肢である状況はまだあります。 - -例えば、多くのお店は相談にのる方法としてオンラインチャットを使います。訪問者がボタンを押すと、`window.open` が実行され、チャットをするポップアップが開きます。 - -なぜ、ここではページ内ではなくポップアップが良いのでしょう？ - -1. ポップアップは独立した JavaScript 環境を持つ別ウィンドウです。なので、チャットサービスはメインの店舗サイトのスクリプトと統合する必要がありません。 -2. ポップアップはサイトに追加するのが非常に簡単で、オーバーヘッドがほとんどありません。スクリプトの追加は不要で小さいボタンだけです。 -3. ポップアップは利用者がページを離れても持続させることができます。例えば、相談で利用者に新しい "スーパークーラー" のページを訪れるようにアドバイスします。利用者はメインウィンドウでそのページへ行きますが、チャットは無くなりません。 - ## window.open ポップアップを開く構文は次の通りです: `window.open(url, name, params)`: From e09377b509bbe84a6cd48a84921735b64de3715e Mon Sep 17 00:00:00 2001 From: Hiroki Tokunaga Date: Thu, 2 Mar 2023 21:37:02 +0900 Subject: [PATCH 07/18] Fix a translation --- 3-frames-and-windows/01-popup-windows/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/3-frames-and-windows/01-popup-windows/article.md b/3-frames-and-windows/01-popup-windows/article.md index f884665f17..61a6afadac 100644 --- a/3-frames-and-windows/01-popup-windows/article.md +++ b/3-frames-and-windows/01-popup-windows/article.md @@ -67,7 +67,7 @@ params - `scrollbars` (yes/no) -- 新しいウィンドウのスクロールバーを無効にします。非推奨です。 -あまりサポートされていないブラウザ固有の機能も数多くありますが、通常は使用されていません。例については、window.open in MDN を確認してみてください。 +あまりサポートされていないブラウザ固有の機能も数多くありますが、通常は使用されていません。例については、MDN の window.open を確認してみてください。 ## 例: a minimalistic window From b3bc8b69197d584e3a93914a42da6b6398cf4acc Mon Sep 17 00:00:00 2001 From: Hiroki Tokunaga Date: Thu, 2 Mar 2023 21:37:30 +0900 Subject: [PATCH 08/18] Translate --- 3-frames-and-windows/01-popup-windows/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/3-frames-and-windows/01-popup-windows/article.md b/3-frames-and-windows/01-popup-windows/article.md index 61a6afadac..a23173e452 100644 --- a/3-frames-and-windows/01-popup-windows/article.md +++ b/3-frames-and-windows/01-popup-windows/article.md @@ -69,7 +69,7 @@ params あまりサポートされていないブラウザ固有の機能も数多くありますが、通常は使用されていません。例については、MDN の window.open を確認してみてください。 -## 例: a minimalistic window +## 例: 最小限のウィンドウ ブラウザがどの機能の無効化を許容するか、最小セットの機能でウィンドウを開いてみましょう。: From 596d8c4ae831b40a0ff579236cf6f33ab9a6034c Mon Sep 17 00:00:00 2001 From: Hiroki Tokunaga Date: Thu, 2 Mar 2023 21:41:20 +0900 Subject: [PATCH 09/18] Fix translations --- 3-frames-and-windows/01-popup-windows/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/3-frames-and-windows/01-popup-windows/article.md b/3-frames-and-windows/01-popup-windows/article.md index a23173e452..a98d0da35c 100644 --- a/3-frames-and-windows/01-popup-windows/article.md +++ b/3-frames-and-windows/01-popup-windows/article.md @@ -82,7 +82,7 @@ open('/', 'test', params); ここでは、ほとんどの "ウィンドウの機能 は無効にされ、ウィンドウは画面外に配置されています。実行して実際に何が起きるのかを見てください。ほとんどのブラウザはゼロ値の `width/height` や画面外の `left/top` といったおかしなものを "直します"。例えば、Chrome はフルスクリーンになるよう、画面幅/高さでウィンドウを開きます。 -通常の配置オプションで `width`, `height`, `left`, `top` 座標を追加追加しましょう。: +通常の配置オプションと妥当な `width`, `height`, `left`, `top` 座標を追加しましょう。: ```js run let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no, From 9e48ec6757e5fc0e45ac5611a6661e4e87601c43 Mon Sep 17 00:00:00 2001 From: Hiroki Tokunaga Date: Thu, 2 Mar 2023 21:42:15 +0900 Subject: [PATCH 10/18] Fix --- 3-frames-and-windows/01-popup-windows/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/3-frames-and-windows/01-popup-windows/article.md b/3-frames-and-windows/01-popup-windows/article.md index a98d0da35c..4dcce2917d 100644 --- a/3-frames-and-windows/01-popup-windows/article.md +++ b/3-frames-and-windows/01-popup-windows/article.md @@ -96,7 +96,7 @@ open('/', 'test', params); 設定が省略された際のルール: - `open` 呼び出しで ３つ目の引数がない場合、もしくはそれが空の場合、デフォルトのウィンドウパラメータが使われます。 -- params の文字列はあるが、一部の機能の yes/no が省略されている場合、省略された機能はブラウザで許可されていれば無効になります。そのため、params を指定した場合には、明示的に必要なすべての機能に yes を設定してください。 +- params の文字列はあるが、一部の機能の yes/no が省略されている場合、省略された機能はブラウザで許可されていれば無効になります。そのため、params を指定する場合には、明示的に必要なすべての機能に yes を設定してください。 - params に `left/top` がない場合、ブラウザは最後に開いたウィンドウの近くに新しいウィンドウを開こうとします。 - `width/height` がない場合、新しいウィンドウは最後に開いたウィンドウと同じサイズになります。 From 5d816b611b6144356e338df89a4022e76bb694bb Mon Sep 17 00:00:00 2001 From: Hiroki Tokunaga Date: Thu, 2 Mar 2023 21:43:32 +0900 Subject: [PATCH 11/18] Fix a translation --- 3-frames-and-windows/01-popup-windows/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/3-frames-and-windows/01-popup-windows/article.md b/3-frames-and-windows/01-popup-windows/article.md index 4dcce2917d..96ebc98d44 100644 --- a/3-frames-and-windows/01-popup-windows/article.md +++ b/3-frames-and-windows/01-popup-windows/article.md @@ -102,7 +102,7 @@ open('/', 'test', params); ## ポップアップにアクセスする -`open` 呼び出しは、新しいウィンドウへの参照を返します。それはプロパティを操作したり、位置を替えたりと言ったことをするのに利用できます。 +`open` 呼び出しは、新しいウィンドウへの参照を返します。それはプロパティを操作したり、位置を変えたりといったことをするのに利用できます。 下の例では、新しいウィンドウのコンテンツはロード後に変更されます。 From 2968cdfcee4683370bcc88571e74f1059e7fb80b Mon Sep 17 00:00:00 2001 From: Hiroki Tokunaga Date: Fri, 3 Mar 2023 18:30:00 +0900 Subject: [PATCH 12/18] Translate --- .../01-popup-windows/article.md | 20 ++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/3-frames-and-windows/01-popup-windows/article.md b/3-frames-and-windows/01-popup-windows/article.md index 96ebc98d44..f3c24f517b 100644 --- a/3-frames-and-windows/01-popup-windows/article.md +++ b/3-frames-and-windows/01-popup-windows/article.md @@ -104,12 +104,22 @@ open('/', 'test', params); `open` 呼び出しは、新しいウィンドウへの参照を返します。それはプロパティを操作したり、位置を変えたりといったことをするのに利用できます。 -下の例では、新しいウィンドウのコンテンツはロード後に変更されます。 +この例では、ポップアップの内容を JavaScript で生成します: + +```js +let newWin = window.open("about:blank", "hello", "width=200,height=200"); + +newWin.document.write("Hello, world!"); +``` + +またこちらでは、コンテンツをロード後に変更します: ```js run let newWindow = open('/', 'example', 'width=300,height=300') newWindow.focus(); +alert(newWindow.location.href); // (*) about:blank, 読み込みはまだ始まっていません + newWindow.onload = function() { let html = `
Welcome!
`; *!* @@ -118,9 +128,13 @@ newWindow.onload = function() { }; ``` -外部の `document` コンテンツは、同じオリジン(同じ protocol://domain:port) からのウィンドウに対してのみアクセス可能であることに注意してください。 +注意してください: `window.open` の直後は、新しいウィンドウはまだ読み込まれていません。これは `(*)` の行にある `alert` で示されています。ですから、変更するために `onload` を待っています。 `newWin.document` 用に `DOMContentLoaded` ハンドラを使うこともできます。 -別のサイトの URL を持つウィンドウの場合、`newWindow.location=...` による割り当てでロケーションを変更することができますが、そのロケーションやコンテンツにアクセスすることはできます。これはユーザの安全のためであり、悪意のあるページが `http://gmail.com` のポップアップを開いてもデータを読む事ができないようにするためです。後ほど詳しく話します。 +```warn header="同一生成元ポリシー" +ウィンドウは、同じ元（同じプロトコル://ドメイン:ポート）から生成された場合のみ、互いのコンテンツに自由にアクセスすることができます。 + +そうでなければ、例えばメインウィンドウが `site.com` から生成され、ポップアップが `gmail.com` から生成された場合、ユーザの安全性のため不可能となります。詳しくは、 の章を確認してください。 +``` ## 開いた元(opener)のウィンドウにアクセスする From 0d2cd76e7610977e3d3477988506cfa6c549fff5 Mon Sep 17 00:00:00 2001 From: Hiroki Tokunaga Date: Fri, 3 Mar 2023 18:42:25 +0900 Subject: [PATCH 13/18] Translate --- 3-frames-and-windows/01-popup-windows/article.md | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/3-frames-and-windows/01-popup-windows/article.md b/3-frames-and-windows/01-popup-windows/article.md index f3c24f517b..b92e36ecfd 100644 --- a/3-frames-and-windows/01-popup-windows/article.md +++ b/3-frames-and-windows/01-popup-windows/article.md @@ -138,9 +138,19 @@ newWindow.onload = function() { ## 開いた元(opener)のウィンドウにアクセスする -ポップアップは "opener" ウィンドウにもアクセスすることができます。その中で、それを開いたウィンドウにアクセスするには `window.opener` を使います。ポップアップ以外のすべてのウィンドウの場合、それは `null` です。 +ポップアップは `window.opener` 参照を用いることでも "opener" ウィンドウにアクセスできます。ポップアップ以外のすべてのウィンドウの場合、それは `null` です。 -したがって、メインウィンドウとポップアップ両方とも、互いの参照を持っています。 それらは同じオリジンから来ていると想定して自由に互いを変更することができます。そうでない場合は、次のチャプター で説明するように、ほかのコミュニケーションする手段があります。 +以下のコードを実行すると、 opener ウィンドウ（現在のウィンドウ）の内容が "Test" に置き換わります: + +```js run +let newWin = window.open("about:blank", "hello", "width=200,height=200"); + +newWin.document.write( + "