From c900a017036e477fba5615bc8d3294cbe1eebc81 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Tue, 7 Apr 2020 10:31:05 +0800
Subject: [PATCH 01/16] Update article.md

---
 .../03-cross-window-communication/article.md  | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/3-frames-and-windows/03-cross-window-communication/article.md b/3-frames-and-windows/03-cross-window-communication/article.md
index cec6e55b9d..a0c5c38610 100644
--- a/3-frames-and-windows/03-cross-window-communication/article.md
+++ b/3-frames-and-windows/03-cross-window-communication/article.md
@@ -1,12 +1,12 @@
 # 跨窗口通信
 
-"同源"策略限制了窗口之间的互相访问。
+“同源（Same Origin）”策略限制了窗口（window）和 frame 之间的相互访问。
 
-这个想法出于这样的考虑，如果我们打开了两个窗口：一个窗口来自 `john-smith.com`，另一个是 `gmail.com`，那么我们就不希望 `john-smith.com` 的脚本可以阅读我们的邮件。
+这个想法出于这样的考虑，如果一个用户有两个打开的窗口：一个窗口来自 `john-smith.com`，另一个是 `gmail.com`，那么用户将不希望 `john-smith.com` 的脚本可以读取 `gmail.com` 中的邮件。所以，“同源”策略的目的是保护用户免遭信息盗窃。
 
-## 同源
+## 同源 [#same-origin]
 
-如果两个 URL 具有相同的协议，域名和端口，则称它们是"同源"的。
+如果两个 URL 具有相同的协议，域和端口，则称它们是“同源”的。
 
 以下的几个 URL 都是同源的：
 
@@ -14,12 +14,12 @@
 - `http://site.com/`
 - `http://site.com/my/page.html`
 
-但是下面几个不是：
+但是下面这几个不是：
 
-- <code>http://<b>www.</b>site.com</code> (`www.` 域名与其他不同)
-- <code>http://<b>site.org</b></code> (`.org` 域名与其他不同)
-- <code><b>https://</b>site.com</code> (协议与其他不同: `https`)
-- <code>http://site.com:<b>8080</b></code> (端口与其他不同：`8080`)
+- <code>http://<b>www.</b>site.com</code>（另一个域：`www.` 影响）
+- <code>http://<b>site.org</b></code>（另一个域：`.org` 影响）
+- <code><b>https://</b>site.com</code>（另一个协议：`https`）
+- <code>http://site.com:<b>8080</b></code>（另一个端口：`8080`）
 
 如果我们有另外一个窗口（一个弹出窗口或者 iframe）的引用，并且这个窗口是同源的，那么我们可以使用它做任何事情。
 
@@ -31,7 +31,7 @@
 
 在同源策略里有一个很重要的排除项。
 
-如果窗口有相同的二级域名，比如 `john.site.com`，`peter.site.com` 和 `site.com`，我们可以使用 JavaScript 将 `document.domain` 设置为他们相同的二级域名 `site.com`。此时这些窗口将被当做同源的站点对待。
+如果窗口有相同的二级域，比如 `john.site.com`，`peter.site.com` 和 `site.com`，我们可以使用 JavaScript 将 `document.domain` 设置为他们相同的二级域 `site.com`。此时这些窗口将被当做同源的站点对待。
 
 换句话说，所有的这些页面（包括来自 `site.com` 的页面）都添加这么一段代码：
 
@@ -41,7 +41,7 @@ document.domain = 'site.com';
 
 之后他们就可以无限制的互动了。
 
-但是这仅适用于具有相同二级域名的页面。
+但是这仅适用于具有相同二级域的页面。
 ````
 
 ## 访问 iframe 的内容
@@ -345,14 +345,14 @@ window.addEventListener("message", function(event) {
 - `window.parent`，`window.top` 是父窗口以及顶级窗口的引用
 - `iframe.contentWindow` 是 `<iframe>` 内网页的 window 对象。
 
-如果几个窗口的网页是同源的（域名，端口，协议都相同），那么这几个窗口可以互相操作任何事情。
+如果几个窗口的网页是同源的（域，端口，协议都相同），那么这几个窗口可以互相操作任何事情。
 
 否则，只能做以下操作：
 - 修改另一个窗口的地址（并且只能修改，不能读取）
 - 对它发送一个消息
 
 但也有一些例外情况：
-- 对于二级域名相同的页面：`a.site.com` 和 `b.site.com`。通过在它们的代码里执行 `document.domain='site.com'` 可以让他们处于"同源"状态。 
+- 对于二级域相同的页面：`a.site.com` 和 `b.site.com`。通过在它们的代码里执行 `document.domain='site.com'` 可以让他们处于"同源"状态。 
 - 如果 iframe 有 `sandbox` 属性，则会强制其处于"非同源"状态，除非在属性中指定了 `allow-same-origin`，这可可用于在同一站点的 iframe 中运行不受信任的代码。
 
 

From 08de4a95b5cf209e4cdea2e998fa8860b799697e Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Tue, 7 Apr 2020 11:05:19 +0800
Subject: [PATCH 02/16] Update article.md

---
 .../03-cross-window-communication/article.md  | 92 ++++++++++---------
 1 file changed, 50 insertions(+), 42 deletions(-)

diff --git a/3-frames-and-windows/03-cross-window-communication/article.md b/3-frames-and-windows/03-cross-window-communication/article.md
index a0c5c38610..fdb82a90ff 100644
--- a/3-frames-and-windows/03-cross-window-communication/article.md
+++ b/3-frames-and-windows/03-cross-window-communication/article.md
@@ -21,70 +21,58 @@
 - <code><b>https://</b>site.com</code>（另一个协议：`https`）
 - <code>http://site.com:<b>8080</b></code>（另一个端口：`8080`）
 
-如果我们有另外一个窗口（一个弹出窗口或者 iframe）的引用，并且这个窗口是同源的，那么我们可以使用它做任何事情。
+“同源”策略规定：
 
-如果它不是同源的，那么我们只能改变它的地址。请注意：不是**读取**地址，而是**改变**它，将其重定向到另外一个地址。因为 URL 可能包含一些敏感的参数，所以为了安全，禁止从一个非同源的站点获取地址，但是可以更改它。
+- 如果我们有对另外一个窗口（例如，一个使用 `window.open` 创建的弹窗，或者一个窗口中的 iframe）的引用，并且该窗口是同源的，那么我们就具有对该窗口的全部访问权限。
+- 否则，如果该窗口不是同源的，那么我们就无法访问该窗口中的内容：变量，文档，任何东西。唯一的例外是 `location`：我们可以修改它（进而重定向用户）。但是我们无法读取 `location`（因此，我们无法看到用户当前所处的位置，也就不会泄漏任何信息）。
 
-当然这些窗口也可以互通信息，后面我们很快会讲到这一点。
+### 实例：iframe
 
-````warn header="排除：子域可能是同源的"
-
-在同源策略里有一个很重要的排除项。
-
-如果窗口有相同的二级域，比如 `john.site.com`，`peter.site.com` 和 `site.com`，我们可以使用 JavaScript 将 `document.domain` 设置为他们相同的二级域 `site.com`。此时这些窗口将被当做同源的站点对待。
-
-换句话说，所有的这些页面（包括来自 `site.com` 的页面）都添加这么一段代码：
-
-```js
-document.domain = 'site.com';
-```
-
-之后他们就可以无限制的互动了。
-
-但是这仅适用于具有相同二级域的页面。
-````
-
-## 访问 iframe 的内容
-
-一个 `<iframe>` 是一个两面派的野兽。从一方面看，它就是一个标签，就像 `<script>` 或者 `<img>`，从另一方面来说，它又是一个窗口内嵌套的窗口。
+一个 `<iframe>` 标签承载了一个单独的嵌入式窗口，它具有自己的 `document` 和 `window`。
 
-嵌入的窗口有它单独的 `document` 和 `window` 对象。
+我们可以使用以下属性访问它们：
 
-我们可以使用以下属性访问他们：
+- `iframe.contentWindow` 来获取 `<iframe>` 中的 window。
+- `iframe.contentDocument` 来获取 `<iframe>` 中的 document，是 `iframe.contentWindow.document` 的简写形式。
 
-- `iframe.contentWindow` 是对 `<iframe>` 里 window 的引用。
-- `iframe.contentDocument` 是对 `<iframe>` 里的 document 对象的引用。
+当我们访问嵌入式窗口中的东西时，浏览器会检查 iframe 是否具有相同的源。如果不是，则会拒绝访问（对 `location` 进行写入是一个例外，它是会被允许的）。
 
-当我们访问嵌入式窗口时，浏览器会检查 iframe 是否具有相同的来源，如果不是这样会拒绝访问（除了上述提到的排除项）。
-
-举个例子，这里是来自不同源的 `<iframe>`：
+例如，让我们尝试对来自另一个源的 `<iframe>` 进行读取和写入：
 
 ```html run
 <iframe src="https://example.com" id="iframe"></iframe>
 
 <script>
   iframe.onload = function() {
-    // 我们可以通过它获取内部窗口的引用
-    let iframeWindow = iframe.contentWindow;
-
+    // 我们可以获取对内部窗口的引用
+*!*
+    let iframeWindow = iframe.contentWindow; // OK
+*/!*
     try {
-      // ..但是无法获取 document
-      let doc = iframe.contentDocument;
+      // ...但是无法获取其中的文档
+*!*
+      let doc = iframe.contentDocument; // ERROR
+*/!*
     } catch(e) {
-      alert(e); // 安全错误（非同源）
+      alert(e); // Security Error（另一个源）
     }
 
-    // 并且我们无法读取嵌入窗口的地址
+    // 并且，我们也无法 **读取** iframe 中页面的 URL
     try {
-      alert(iframe.contentWindow.location);
+      // 无法从 location 对象中读取 URL
+*!*
+      let href = iframe.contentWindow.location.href; // ERROR
+*/!*
     } catch(e) {
-      alert(e); // 安全错误
+      alert(e); // Security Error
     }
 
-    // ...但是我们可以修改这个地址（并且将其他内容加载到 iframe 里）
-    iframe.contentWindow.location = '/'; // 生效了
+    // ...我们可以 **写入** location（所以，在 iframe 中加载了其他内容）！
+*!*
+    iframe.contentWindow.location = '/'; // OK
+*/!*
 
-    iframe.onload = null; // 清除处理函数，保证代码只执行一次
+    iframe.onload = null; // 清空处理程序，在 location 更改后不要再运行它
   };
 </script>
 ```
@@ -114,6 +102,26 @@ document.domain = 'site.com';
 </script>
 ```
 
+
+````warn header="排除：子域可能是同源的"
+
+在同源策略里有一个很重要的排除项。
+
+如果窗口有相同的二级域，比如 `john.site.com`，`peter.site.com` 和 `site.com`，我们可以使用 JavaScript 将 `document.domain` 设置为他们相同的二级域 `site.com`。此时这些窗口将被当做同源的站点对待。
+
+换句话说，所有的这些页面（包括来自 `site.com` 的页面）都添加这么一段代码：
+
+```js
+document.domain = 'site.com';
+```
+
+之后他们就可以无限制的互动了。
+
+但是这仅适用于具有相同二级域的页面。
+````
+
+
+
 ### 请等待 iframe 加载完成
 
 创建 iframe 时，它立刻就会有一个 document，但是这个 document 与最终页面加载完成后的 document 是不同的。

From 815bf7ebf5e6919da07631d1961e57dec9121e0d Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Tue, 7 Apr 2020 11:39:07 +0800
Subject: [PATCH 03/16] Update article.md

---
 .../03-cross-window-communication/article.md  | 30 ++++++++++++-------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/3-frames-and-windows/03-cross-window-communication/article.md b/3-frames-and-windows/03-cross-window-communication/article.md
index fdb82a90ff..d3f040c362 100644
--- a/3-frames-and-windows/03-cross-window-communication/article.md
+++ b/3-frames-and-windows/03-cross-window-communication/article.md
@@ -79,29 +79,37 @@
 
 上述代码除了以下操作都会报错：
 
-- 通过 `iframe.contentWindow` 获取内部窗口的 window
-- 修改它的 `location`
+- 通过 `iframe.contentWindow` 获取对内部窗口的引用
+- 对 `location` 进行写入
 
-
-```smart header="`iframe.onload` vs `iframe.contentWindow.onload`"
-`iframe.onload` 实际上与 `iframe.contentWindow.onload` 相同，当嵌入窗口内所有资源全部加载完后触发。
-...但是 `iframe.onload` 始终是可用的，然而 `iframe.contentWindow.onload` 需要满足同源策略。
-
-```
-
-现在有一个同源窗口的例子，我们可以对嵌入的窗口做任何事：
+与此相反，如果 `<iframe>` 具有相同的源，我们可以使用它做任何事情：
 
 ```html run
+<!-- 来自同一个网站的 iframe -->
 <iframe src="/" id="iframe"></iframe>
 
 <script>
   iframe.onload = function() {
-    // 随便做任何事
+    // 可以做任何事儿
     iframe.contentDocument.body.prepend("Hello, world!");
   };
 </script>
 ```
 
+```smart header="`iframe.onload` vs `iframe.contentWindow.onload`"
+`iframe.onload` 事件（在 `<iframe>` 标签上）与 `iframe.contentWindow.onload`（嵌入的窗口对象）基本相同。
+
+
+当嵌入式窗口
+
+
+
+，当嵌入窗口内所有资源全部加载完后触发。
+...但是 `iframe.onload` 始终是可用的，然而 `iframe.contentWindow.onload` 需要满足同源策略。
+
+```
+
+
 
 ````warn header="排除：子域可能是同源的"
 

From 7731e08851661c258c094f727f35672388bc8a6f Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Tue, 7 Apr 2020 11:48:31 +0800
Subject: [PATCH 04/16] Update article.md

---
 .../03-cross-window-communication/article.md  | 26 ++++++-------------
 1 file changed, 8 insertions(+), 18 deletions(-)

diff --git a/3-frames-and-windows/03-cross-window-communication/article.md b/3-frames-and-windows/03-cross-window-communication/article.md
index d3f040c362..f232440731 100644
--- a/3-frames-and-windows/03-cross-window-communication/article.md
+++ b/3-frames-and-windows/03-cross-window-communication/article.md
@@ -2,7 +2,7 @@
 
 “同源（Same Origin）”策略限制了窗口（window）和 frame 之间的相互访问。
 
-这个想法出于这样的考虑，如果一个用户有两个打开的窗口：一个窗口来自 `john-smith.com`，另一个是 `gmail.com`，那么用户将不希望 `john-smith.com` 的脚本可以读取 `gmail.com` 中的邮件。所以，“同源”策略的目的是保护用户免遭信息盗窃。
+这个想法出于这样的考虑，如果一个用户有两个打开的窗口：一个来自 `john-smith.com`，另一个是 `gmail.com`，那么用户将不希望 `john-smith.com` 的脚本可以读取 `gmail.com` 中的邮件。所以，“同源”策略的目的是保护用户免遭信息盗窃。
 
 ## 同源 [#same-origin]
 
@@ -28,14 +28,14 @@
 
 ### 实例：iframe
 
-一个 `<iframe>` 标签承载了一个单独的嵌入式窗口，它具有自己的 `document` 和 `window`。
+一个 `<iframe>` 标签承载了一个单独的嵌入的窗口，它具有自己的 `document` 和 `window`。
 
 我们可以使用以下属性访问它们：
 
 - `iframe.contentWindow` 来获取 `<iframe>` 中的 window。
 - `iframe.contentDocument` 来获取 `<iframe>` 中的 document，是 `iframe.contentWindow.document` 的简写形式。
 
-当我们访问嵌入式窗口中的东西时，浏览器会检查 iframe 是否具有相同的源。如果不是，则会拒绝访问（对 `location` 进行写入是一个例外，它是会被允许的）。
+当我们访问嵌入的窗口中的东西时，浏览器会检查 iframe 是否具有相同的源。如果不是，则会拒绝访问（对 `location` 进行写入是一个例外，它是会被允许的）。
 
 例如，让我们尝试对来自另一个源的 `<iframe>` 进行读取和写入：
 
@@ -44,7 +44,7 @@
 
 <script>
   iframe.onload = function() {
-    // 我们可以获取对内部窗口的引用
+    // 我们可以获取对内部 window 的引用
 *!*
     let iframeWindow = iframe.contentWindow; // OK
 */!*
@@ -79,7 +79,7 @@
 
 上述代码除了以下操作都会报错：
 
-- 通过 `iframe.contentWindow` 获取对内部窗口的引用
+- 通过 `iframe.contentWindow` 获取对内部 window 的引用 —— 这是被允许的。
 - 对 `location` 进行写入
 
 与此相反，如果 `<iframe>` 具有相同的源，我们可以使用它做任何事情：
@@ -97,21 +97,12 @@
 ```
 
 ```smart header="`iframe.onload` vs `iframe.contentWindow.onload`"
-`iframe.onload` 事件（在 `<iframe>` 标签上）与 `iframe.contentWindow.onload`（嵌入的窗口对象）基本相同。
-
-
-当嵌入式窗口
-
-
-
-，当嵌入窗口内所有资源全部加载完后触发。
-...但是 `iframe.onload` 始终是可用的，然而 `iframe.contentWindow.onload` 需要满足同源策略。
+`iframe.onload` 事件（在 `<iframe>` 标签上）与 `iframe.contentWindow.onload`（在嵌入的 window 对象上）基本相同。当嵌入的窗口的所有资源都完全加载完毕时触发。
 
+……但是，我们无法使用 `iframe.contentWindow.onload` 访问不同源的 iframe。因此，请使用 `iframe.onload`，
 ```
 
-
-
-````warn header="排除：子域可能是同源的"
+## 子域上的 window：document.domain
 
 在同源策略里有一个很重要的排除项。
 
@@ -126,7 +117,6 @@ document.domain = 'site.com';
 之后他们就可以无限制的互动了。
 
 但是这仅适用于具有相同二级域的页面。
-````
 
 
 

From ad6f72f50cc9f767650d984f2545a61103f1f0e6 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Tue, 7 Apr 2020 14:42:42 +0800
Subject: [PATCH 05/16] Update article.md

---
 .../03-cross-window-communication/article.md  | 80 +++++++++----------
 1 file changed, 40 insertions(+), 40 deletions(-)

diff --git a/3-frames-and-windows/03-cross-window-communication/article.md b/3-frames-and-windows/03-cross-window-communication/article.md
index f232440731..cdd31eac42 100644
--- a/3-frames-and-windows/03-cross-window-communication/article.md
+++ b/3-frames-and-windows/03-cross-window-communication/article.md
@@ -2,7 +2,7 @@
 
 “同源（Same Origin）”策略限制了窗口（window）和 frame 之间的相互访问。
 
-这个想法出于这样的考虑，如果一个用户有两个打开的窗口：一个来自 `john-smith.com`，另一个是 `gmail.com`，那么用户将不希望 `john-smith.com` 的脚本可以读取 `gmail.com` 中的邮件。所以，“同源”策略的目的是保护用户免遭信息盗窃。
+这个想法出于这样的考虑，如果一个用户有两个打开的页面：一个来自 `john-smith.com`，另一个是 `gmail.com`，那么用户将不希望 `john-smith.com` 的脚本可以读取 `gmail.com` 中的邮件。所以，“同源”策略的目的是保护用户免遭信息盗窃。
 
 ## 同源 [#same-origin]
 
@@ -104,27 +104,27 @@
 
 ## 子域上的 window：document.domain
 
-在同源策略里有一个很重要的排除项。
+根据定义，两个具有不同域的 URL 具有不同的源。
 
-如果窗口有相同的二级域，比如 `john.site.com`，`peter.site.com` 和 `site.com`，我们可以使用 JavaScript 将 `document.domain` 设置为他们相同的二级域 `site.com`。此时这些窗口将被当做同源的站点对待。
+但是，如果窗口共享一个二级域，例如 `john.site.com`，`peter.site.com` 和 `site.com`（它们共同的二级域是 `site.com`），我们可以使浏览器忽略该差异，使得它们可以被作为“同源”的来对待，以便进行跨窗口通信。
 
-换句话说，所有的这些页面（包括来自 `site.com` 的页面）都添加这么一段代码：
+为了做到这一点，每个这样的窗口都应该执行下面这行代码：
 
 ```js
 document.domain = 'site.com';
 ```
 
-之后他们就可以无限制的互动了。
+这样就可以了。现在它们可以无限制地进行交互了。但是再强调一遍，这仅适用于具有相同二级域的页面。
 
-但是这仅适用于具有相同二级域的页面。
+## Iframe：错误文档陷阱
 
+当一个 iframe 来自同一个源时，我们可能会访问其 `document`，但是这里有一个陷阱。它与跨源无关，但你一定要知道。
 
+在创建 iframe 后，iframe 会立即就拥有了一个文档。但是该文档不同于加载到其中的文档！
 
-### 请等待 iframe 加载完成
+因此，如果我们要立即对文档进行操作，就可能出问题。
 
-创建 iframe 时，它立刻就会有一个 document，但是这个 document 与最终页面加载完成后的 document 是不同的。
-
-看一下代码：
+看一下下面这段代码：
 
 
 ```html run
@@ -135,19 +135,20 @@ document.domain = 'site.com';
   iframe.onload = function() {
     let newDoc = iframe.contentDocument;
 *!*
-    // 加载完后，document 和之前的已经不同了！
+    // 加载的文档与初始的文档不同！
     alert(oldDoc == newDoc); // false
 */!*
   };
 </script>
 ```
 
-对于新的开发者来言，这实际上是一个众所周知的陷阱。我们不应该立即使用这个 document，因为这个是错误的。我们在它上面增加的任何事件处理函数都将被忽略。
+我们不应该对尚未加载完成的 iframe 的文档进行处理，因为那是 **错误的文档**。如果我们在其上设置了任何事件处理程序，它们将会被忽略。
 
-...但是只有当 iframe 内的所有资源加载完后才会触发 `onload` 事件，如果我们希望更早的在嵌入文档的 `DOMContentLoaded` 上做操作怎么办？
+如果检测文档加载完成的时刻呢？
 
+正确的文档是在 `iframe.onload` 触发时就会。但是，只有在整个 iframe 的所有资源都加载完成时，`iframe.onload` 才会触发。
 
-如果 iframe 不是同源的，那就无法完成这件事。但是对于同源的 iframe 来说，我们可以尝试捕捉新文档出现的时机，然后设置必要的处理逻辑，如下所示：
+我们可以尝试通过在 `setInterval` 中进行检查，以更早地捕获该时刻：
 
 ```html run
 <iframe src="/" id="iframe"></iframe>
@@ -155,30 +156,26 @@ document.domain = 'site.com';
 <script>
   let oldDoc = iframe.contentDocument;
 
-  // 每 100ms 检测 document 是否是新的
-    let timer = setInterval(() => {
-    if (iframe.contentDocument == oldDoc) return;
+  // 每 100ms 检查一次文档是否为新文档
+  let timer = setInterval(() => {
+    let newDoc = iframe.contentDocument;
+    if (newDoc == oldDoc) return;
 
-    // 如果是新的，设置处理函数
-    iframe.contentDocument.addEventListener('DOMContentLoaded', () => {
-      iframe.contentDocument.body.prepend('Hello, world!');
-    });
+    alert("New document is here!");
 
-    clearInterval(timer); // 清空定时器
+    clearInterval(timer); // 取消 setInterval，不再需要它做任何事儿
   }, 100);
 </script>
 ```
 
-如果您对这个问题有更好的解决方案，请在评论中告诉我。
-
-## window.frames
+## 集合：window.frames
 
-获取 `<iframe>` 窗口对象的另一个方式是从命名集合 `window.frames` 上获取：
+获取 `<iframe>` 的 window 对象的另一个方式是从命名集合 `window.frames` 中获取：
 
-- 通过索引获取：`window.frames[0]` —— 当前文档里第一个 iframe 的窗口。
-- 通过名称获取：`window.frames.iframeName` —— 获取 `name="iframeName"` 的 iframe 窗口。
+- 通过索引获取：`window.frames[0]` —— 文档中的第一个 iframe 的 window 对象。
+- 通过名称获取：`window.frames.iframeName` —— 获取 `name="iframeName"` 的 iframe 的 window 对象。
 
-举个例子：
+例如：
 
 ```html run
 <iframe src="/" style="height:80px" name="win" id="iframe"></iframe>
@@ -189,35 +186,38 @@ document.domain = 'site.com';
 </script>
 ```
 
-一个 iframe 内可能嵌套了其他的 iframe，相应的 `window` 对象会也形成嵌套的层次结构（hierarchy）。
+一个 iframe 内可能嵌套了其他的 iframe。相应的 `window` 对象会形成一个层次结构（hierarchy）。
 
-可以通过以下方式获取引用：
+可以通过以下方式获取：
 
-- `window.frames` —— 子窗口的集合（用于嵌套的 iframe）。
-- `window.parent` —— 对"父"（外部）窗口的引用。
-- `window.top` —— 对最顶级父窗口的引用。
+- `window.frames` —— “子”窗口的集合（用于嵌套的 iframe）。
+- `window.parent` —— 对“父”（外部）窗口的引用。
+- `window.top` —— 对最顶级级父窗口的引用。
 
-举例：
+例如：
 
 ```js run
 window.frames[0].parent === window; // true
 ```
 
-我们可以使用 `top` 属性来检测当前的文档是否是在 iframe 内打开：
+我们可以使用 `top` 属性来检查当前的文档是否是在 iframe 内打开的：
 
 ```js run
-if (window == top) { // current window == window.top?
+if (window == top) { // 当前 window == window.top?
   alert('The script is in the topmost window, not in a frame');
 } else {
   alert('The script runs in a frame!');
 }
 ```
 
-## sandbox 属性
+## "sandbox" iframe 特性
+
+`sandbox` 特性（attribute）允许在 `<iframe>` 中禁止某些特定行为，以防止其执行不被信任的代码。它通过将 iframe 视为非同源的，或者应用其他限制来实现 iframe 的“沙盒化”。
+
+对于 `<iframe sandbox src="...">` 有一个
 
-`sandbox` 属性允许在 `<iframe>` 中禁止某些特定操作，以避免执行一些不被信任的代码。它通过将它当做非同源的网页对待以及添加一些限制以实现 iframe 的沙盒化。
 
-默认情况下，对于 `<iframe sandbox src="...">`，会有一些"默认限制"被应用于 iframe。但是我们可以像 `<iframe sandbox="allow-forms allow-popups">` 这样，提供一个以空格分割的"排除"限制列表作为属性，此时被列出的限制将不会生效。
+会有一些"默认限制"被应用于 iframe。但是我们可以像 `<iframe sandbox="allow-forms allow-popups">` 这样，提供一个以空格分割的"排除"限制列表作为属性，此时被列出的限制将不会生效。
 
 换句话说，一个空的 `"sandbox"` 可以带来最严格的限制，但是我们可以列出一个以空格分割的列表，列出我们想要提升的内容。
 

From 4773fb93765afb7ab5af877af4c7b0de4ce31d3b Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Tue, 7 Apr 2020 15:51:14 +0800
Subject: [PATCH 06/16] Update article.md

---
 .../03-cross-window-communication/article.md  | 31 +++++++++----------
 1 file changed, 14 insertions(+), 17 deletions(-)

diff --git a/3-frames-and-windows/03-cross-window-communication/article.md b/3-frames-and-windows/03-cross-window-communication/article.md
index cdd31eac42..96063106cc 100644
--- a/3-frames-and-windows/03-cross-window-communication/article.md
+++ b/3-frames-and-windows/03-cross-window-communication/article.md
@@ -214,44 +214,41 @@ if (window == top) { // 当前 window == window.top?
 
 `sandbox` 特性（attribute）允许在 `<iframe>` 中禁止某些特定行为，以防止其执行不被信任的代码。它通过将 iframe 视为非同源的，或者应用其他限制来实现 iframe 的“沙盒化”。
 
-对于 `<iframe sandbox src="...">` 有一个
+对于 `<iframe sandbox src="...">`，有一个些默认的限制。但是，我们可以通过提供一个以空格分隔的限制列表作为特性的值，来放宽这些限制，该列表中的各项为不应该应用于这个 iframe 的限制，例如：`<iframe sandbox="allow-forms allow-popups">`。
 
+换句话说，一个空的 `"sandbox"` 特性会施加最严格的限制，但是我们用一个以空格分隔的列表，列出要移除的限制。
 
-会有一些"默认限制"被应用于 iframe。但是我们可以像 `<iframe sandbox="allow-forms allow-popups">` 这样，提供一个以空格分割的"排除"限制列表作为属性，此时被列出的限制将不会生效。
+以下是限制的列表：
 
-换句话说，一个空的 `"sandbox"` 可以带来最严格的限制，但是我们可以列出一个以空格分割的列表，列出我们想要提升的内容。
-
-以下是限制列表的一些属性：
-
-`allow-same-origin`： 默认情况下，`"sandbox"` 在 iframe 上强制执行"不同来源"的策略。换句话说，即使 `iframe` 的 `src` 是同源的，它也会其作为非同源的站点来处理，并且对脚本添加所有隐含的限制。添加此选项后会移除这些限制。
+`allow-same-origin`
+: 默认情况下，`"sandbox"` 会为 iframe 强制实施“不同来源”的策略。换句话说，它使浏览器将 `iframe` 视为来自另一个源，即使其 `src` 指向的是同一个网站也是如此。具有所有隐含的脚本限制。此选项会移除这些限制。
 
 `allow-top-navigation`
-: 允许 `iframe` 修改父窗口的地址。
+: 允许 `iframe` 更改 `parent.location`。
 
 `allow-forms`
-: 允许在 `iframe` 内提交表单。
+: 允许在 `iframe` 中提交表单。
 
 `allow-scripts`
-: 允许在 `iframe` 内运行脚本。
+: 允许在 `iframe` 中运行脚本。
 
 `allow-popups`
-: 允许来自 `iframe` 的 `window.open` 弹出窗口。
-
+: 允许在 `iframe` 中使用 `window.open` 打开弹窗。
 
-查看 [官方手册](mdn:/HTML/Element/iframe) 以获取更多内容。
+查看 [官方手册](mdn:/HTML/Element/iframe) 获取更多内容。
 
-下面的示例演示了一个带有默认限制的沙盒 iframe：`<iframe sandbox src="...">`。它有一些 JavaScript 脚本和一个表单。
+下面的示例演示了一个具有默认限制集的沙盒 iframe：`<iframe sandbox src="...">`。它有一些 JavaScript 代码和一个表单。
 
-请注意这里的代码没有任何作用。可见默认设置非常苛刻：
+请注意，这里没有东西会运行。可见默认设置非常苛刻：
 
 [codetabs src="sandbox" height=140]
 
 
 ```smart
-`"sandbox"` 属性的目的是为了*添加更多*限制。它不能移除这些限制，尤其是当 iframe 是非同源时，更不能放松同源策略。
+`"sandbox"` 特性的目的仅是 **添加更多** 限制。它无法移除这些限制。尤其是，如果 iframe 来自其他源，则无法放宽同源策略。
 ```
 
-## 跨窗口传递消息
+## 跨窗口通信
 
 通过 `postMessage` 这个接口，我们可以在不同源的窗口内进行通信。
 

From 563c1c6f7281d096139dd6bf656b98ff7df6a8be Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Tue, 7 Apr 2020 16:13:30 +0800
Subject: [PATCH 07/16] Update article.md

---
 2-ui/2-events/04-default-browser-action/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/2-events/04-default-browser-action/article.md b/2-ui/2-events/04-default-browser-action/article.md
index 521c8deaba..052d3e8b2c 100644
--- a/2-ui/2-events/04-default-browser-action/article.md
+++ b/2-ui/2-events/04-default-browser-action/article.md
@@ -37,7 +37,7 @@ or
 
 ### 示例：菜单
 
-考虑一个站点菜单，如下所示：
+考虑一个网站菜单，如下所示：
 
 ```html
 <ul id="menu" class="menu">

From 298d62c5d16b700763ec836edb73d7d0e054577c Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Tue, 7 Apr 2020 16:14:06 +0800
Subject: [PATCH 08/16] Update article.md

---
 1-js/02-first-steps/04-variables/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/1-js/02-first-steps/04-variables/article.md b/1-js/02-first-steps/04-variables/article.md
index 1b2ab5a0e1..8029c281da 100644
--- a/1-js/02-first-steps/04-variables/article.md
+++ b/1-js/02-first-steps/04-variables/article.md
@@ -303,7 +303,7 @@ const pageLoadTime = /* 网页加载所需的时间 */;
 - 使用易读的命名，比如 `userName` 或者 `shoppingCart`。
 - 离诸如 `a`、`b`、`c` 这种缩写和短名称远一点，除非你真的知道你在干什么。
 - 变量名在能够准确描述变量的同时要足够简洁。不好的例子就是 `data` 和 `value`，这样的名称等于什么都没说。如果能够非常明显地从上下文知道数据和值所表达的含义，这样使用它们也是可以的。
-- 脑海中的术语要和团队保持一致。如果站点的访客称为“用户”，则我们采用相关的变量命名，比如 `currentUser` 或者 `newUser`，而不要使用 `currentVisitor` 或者一个 `newManInTown`。
+- 脑海中的术语要和团队保持一致。如果网站的访客称为“用户”，则我们采用相关的变量命名，比如 `currentUser` 或者 `newUser`，而不要使用 `currentVisitor` 或者一个 `newManInTown`。
 
 听上去很简单？确实如此，但是在实践中选择一个一目了然的变量名称并非如此简单。大胆试试吧。
 

From ceeca4be866aaa623d0695011d331f57143497d5 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Tue, 7 Apr 2020 16:14:26 +0800
Subject: [PATCH 09/16] Update article.md

---
 1-js/02-first-steps/01-hello-world/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/1-js/02-first-steps/01-hello-world/article.md b/1-js/02-first-steps/01-hello-world/article.md
index 05963169ed..e6b10d3cd3 100644
--- a/1-js/02-first-steps/01-hello-world/article.md
+++ b/1-js/02-first-steps/01-hello-world/article.md
@@ -73,7 +73,7 @@ JavaScript 程序可以在 `<script>` 标签的帮助下插入到 HTML 文档的
 <script src="/path/to/script.js"></script>
 ```
 
-这里，`/path/to/script.js` 是脚本文件从站点根目录开始的绝对路径。当然也可以提供当前页面的相对路径。例如，`src ="script.js"` 表示当前文件夹中的 `"script.js"` 文件。
+这里，`/path/to/script.js` 是脚本文件从网站根目录开始的绝对路径。当然也可以提供当前页面的相对路径。例如，`src ="script.js"` 表示当前文件夹中的 `"script.js"` 文件。
 
 我们也可以提供一个完整的 URL 地址，例如：
 

From 1aaef53d307752ec6a913aa375b36160ee1133a3 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Tue, 7 Apr 2020 16:14:54 +0800
Subject: [PATCH 10/16] Update article.md

---
 2-ui/5-loading/03-onload-onerror/article.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/2-ui/5-loading/03-onload-onerror/article.md b/2-ui/5-loading/03-onload-onerror/article.md
index 402823ed52..29c755ddf6 100644
--- a/2-ui/5-loading/03-onload-onerror/article.md
+++ b/2-ui/5-loading/03-onload-onerror/article.md
@@ -105,7 +105,7 @@ img.onerror = function() {
 
 ## 跨源策略
 
-这里有一条规则：来自一个站点的脚本无法访问其他站点的内容。例如，位于 `https://facebook.com` 的脚本无法读取位于 `https://gmail.com` 的用户邮箱。
+这里有一条规则：来自一个网站的脚本无法访问其他网站的内容。例如，位于 `https://facebook.com` 的脚本无法读取位于 `https://gmail.com` 的用户邮箱。
 
 或者，更确切地说，一个源（域/端口/协议三者）无法获取另一个源（origin）的内容。因此，即使我们有一个子域，或者仅仅是另一个端口，这都是不同的源，彼此无法相互访问。
 
@@ -119,7 +119,7 @@ img.onerror = function() {
 noSuchFunction();
 ```
 
-现在从它所在的同一个站点加载它：
+现在从它所在的同一个网站加载它：
 
 ```html run height=0
 <script>

From 295338f374cf58332be503761dd585fd9e2b2b4b Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Tue, 7 Apr 2020 16:25:53 +0800
Subject: [PATCH 11/16] Update article.md

---
 2-ui/2-events/01-introduction-browser-events/article.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/2-ui/2-events/01-introduction-browser-events/article.md b/2-ui/2-events/01-introduction-browser-events/article.md
index b5e87e05c9..d5ac61a16b 100644
--- a/2-ui/2-events/01-introduction-browser-events/article.md
+++ b/2-ui/2-events/01-introduction-browser-events/article.md
@@ -168,7 +168,7 @@ button.onclick = sayThanks();
 <input type="button" id="button" onclick="sayThanks()">
 ```
 
-这个区别很容易解释。当浏览器读取 HTML 特性（attribute）时，浏览器将会使用 **特性中的内容** 创建一个处理函数：`sayThanks()`。
+这个区别很容易解释。当浏览器读取 HTML 特性（attribute）时，浏览器将会使用 **特性中的内容** 创建一个处理程序：`sayThanks()`。
 
 所以，标记（markup）会生成下面这个属性：
 ```js
@@ -223,7 +223,7 @@ element.addEventListener(event, handler[, options]);
 : 事件名，例如：`"click"`。
 
 `handler`
-: 处理函数。
+: 处理程序。
 
 `options`
 : 具有以下属性的附加可选对象：

From 663075b54f8344c9e5450f137d7a344de7135bff Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Tue, 7 Apr 2020 16:27:08 +0800
Subject: [PATCH 12/16] Update article.md

---
 1-js/09-classes/07-mixins/article.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/1-js/09-classes/07-mixins/article.md b/1-js/09-classes/07-mixins/article.md
index f08336486b..36beef76e2 100644
--- a/1-js/09-classes/07-mixins/article.md
+++ b/1-js/09-classes/07-mixins/article.md
@@ -155,19 +155,19 @@ let eventMixin = {
    */
   trigger(eventName, ...args) {
     if (!this._eventHandlers || !this._eventHandlers[eventName]) {
-      return; // 该事件名称没有对应的事件处理函数（handlers）
+      return; // 该事件名称没有对应的事件处理程序（handler）
     }
 
-    // 调用事件处理函数（handlers）
+    // 调用事件处理程序（handler）
     this._eventHandlers[eventName].forEach(handler => handler.apply(this, args));
   }
 };
 ```
 
 
-1. `.on(eventName, handler)` — 指定函数 `handler` 以在具有对应名称的事件发生时运行。从技术上讲，这儿有一个用于存储每个事件名称对应的处理函数（handlers）的 `_eventHandlers` 属性，在这儿该属性就会将刚刚指定的这个 `handler` 添加到列表中。
+1. `.on(eventName, handler)` — 指定函数 `handler` 以在具有对应名称的事件发生时运行。从技术上讲，这儿有一个用于存储每个事件名称对应的处理程序（handler）的 `_eventHandlers` 属性，在这儿该属性就会将刚刚指定的这个 `handler` 添加到列表中。
 2. `.off(eventName, handler)` — 从处理程序列表中删除指定的函数。
-3. `.trigger(eventName, ...args)` — 生成事件：所有 `_eventHandlers[eventName]` 中的事件处理函数（handlers）都被调用，并且 `...args` 会被作为参数传递给它们。
+3. `.trigger(eventName, ...args)` — 生成事件：所有 `_eventHandlers[eventName]` 中的事件处理程序（handler）都被调用，并且 `...args` 会被作为参数传递给它们。
 
 用法：
 
@@ -183,12 +183,12 @@ Object.assign(Menu.prototype, eventMixin);
 
 let menu = new Menu();
 
-// 添加一个事件处理函数（handler），在被选择时被调用：
+// 添加一个事件处理程序（handler），在被选择时被调用：
 *!*
 menu.on("select", value => alert(`Value selected: ${value}`));
 */!*
 
-// 触发事件 => 运行上述的事件处理函数（handler）并显示：
+// 触发事件 => 运行上述的事件处理程序（handler）并显示：
 // 被选中的值：123
 menu.choose("123");
 ```

From 362563f549681732b2b64e25c06d0ba5615a953b Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Tue, 7 Apr 2020 16:28:31 +0800
Subject: [PATCH 13/16] Update task.md

---
 1-js/11-async/03-promise-chaining/01-then-vs-catch/task.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/1-js/11-async/03-promise-chaining/01-then-vs-catch/task.md b/1-js/11-async/03-promise-chaining/01-then-vs-catch/task.md
index cb4851de67..dc1774b2d2 100644
--- a/1-js/11-async/03-promise-chaining/01-then-vs-catch/task.md
+++ b/1-js/11-async/03-promise-chaining/01-then-vs-catch/task.md
@@ -1,6 +1,6 @@
 # Promise：then 对比 catch
 
-这两个代码片段是否相等？换句话说，对于任何处理函数（handler），它们在任何情况下的行为都相同吗？
+这两个代码片段是否相等？换句话说，对于任何处理程序（handler），它们在任何情况下的行为都相同吗？
 
 ```js
 promise.then(f1).catch(f2);

From e99a07d183b62412a3dd68e34482968ff8634db5 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Tue, 7 Apr 2020 16:43:12 +0800
Subject: [PATCH 14/16] Update article.md

---
 .../03-cross-window-communication/article.md  | 30 ++++++++++---------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/3-frames-and-windows/03-cross-window-communication/article.md b/3-frames-and-windows/03-cross-window-communication/article.md
index 96063106cc..d67ee7563a 100644
--- a/3-frames-and-windows/03-cross-window-communication/article.md
+++ b/3-frames-and-windows/03-cross-window-communication/article.md
@@ -214,7 +214,7 @@ if (window == top) { // 当前 window == window.top?
 
 `sandbox` 特性（attribute）允许在 `<iframe>` 中禁止某些特定行为，以防止其执行不被信任的代码。它通过将 iframe 视为非同源的，或者应用其他限制来实现 iframe 的“沙盒化”。
 
-对于 `<iframe sandbox src="...">`，有一个些默认的限制。但是，我们可以通过提供一个以空格分隔的限制列表作为特性的值，来放宽这些限制，该列表中的各项为不应该应用于这个 iframe 的限制，例如：`<iframe sandbox="allow-forms allow-popups">`。
+对于 `<iframe sandbox src="...">`，有一个应用于其上的默认的限制集。但是，我们可以通过提供一个以空格分隔的限制列表作为特性的值，来放宽这些限制，该列表中的各项为不应该应用于这个 iframe 的限制，例如：`<iframe sandbox="allow-forms allow-popups">`。
 
 换句话说，一个空的 `"sandbox"` 特性会施加最严格的限制，但是我们用一个以空格分隔的列表，列出要移除的限制。
 
@@ -250,27 +250,29 @@ if (window == top) { // 当前 window == window.top?
 
 ## 跨窗口通信
 
-通过 `postMessage` 这个接口，我们可以在不同源的窗口内进行通信。
+`postMessage` 接口允许窗口之间相互通信，无论它们来自什么源。
 
-它有两个部分。
+因此，这是解决“同源”策略的方式之一。它允许来自于 `john-smith.com` 的窗口与来自于 `gmail.com` 的窗口进行通信，并交换信息，但前提是它们双方必须均同意并调用相应的 JavaScript 函数。这可以保护用户的安全。
+
+这个接口有两个部分。
 
 ### postMessage
 
-想要发送消息的窗口需要调用接收窗口的 [postMessage](mdn:api/Window.postMessage) 方法来传递消息。换句话说，如果我们想把消息发送到 `win`，我们应该调用 `win.postMessage(data, targetOrigin)`。
+想要发送消息的窗口需要调用接收窗口的 [postMessage](mdn:api/Window.postMessage) 方法。换句话说，如果我们想把消息发送给 `win`，我们应该调用 `win.postMessage(data, targetOrigin)`。
 
-这个接口有以下参数：
+参数：
 
 `data`
-: 要发送的数据。可以是任何对象，接口内部会使用"结构化克隆算法"将数据克隆一份。IE 只支持字符串，因此我们需要对复杂对象调用 `JSON.stringify` 以支持该浏览器
+: 要发送的数据。可以是任何对象，数据会被通过使用“结构化克隆算法”进行克隆。IE 浏览器只支持字符串，因此我们需要对复杂的对象调用 `JSON.stringify` 方法进行处理，以支持该浏览器。
 
 `targetOrigin`
-: 指定目标窗口的源，以确保只有来自指定源的窗口才能获得该消息。
+: 指定目标窗口的源，以便只有来自给定的源的窗口才能获得该消息。
 
-`targetOrigin` 是一种安全措施。请记住，如果目标窗口是非同源的，我们无法读取它的 `location`，因此我们就无法确认当前在预期的窗口中打开的是哪个站点：因为用户随时可以跳转走。
+`targetOrigin` 是一种安全措施。请记住，如果目标窗口是非同源的，我们无法在发送消息的窗口读取它的 `location`。因此，我们无法确定当前在预期的窗口中打开的是哪个网站：用户随时可以导航离开，并且发送消息的窗口对此一无所知。
 
-指定 `targetOrigin` 可以确保窗口内指定的网站还存在时才会接收数据。在有敏感数据时非常重要。
+指定 `targetOrigin` 可以确保窗口仅在当前仍处于正确的网站时接收数据。在有敏感数据时，这非常重要。
 
-举个例子：这里只有当 `win` 内的站点是 `http://example.com` 这个源时才会接收消息：
+例如，这里的 `win` 仅在它拥有来自 `http://example.com` 这个源的文档时，才会接收消息：
 
 ```html no-beautify
 <iframe src="http://example.com" name="example">
@@ -282,7 +284,7 @@ if (window == top) { // 当前 window == window.top?
 </script>
 ```
 
-如果我们不希望做这个检测，可以将 `targetOrigin` 设置为 `*`。
+如果我们不希望做这个检查，可以将 `targetOrigin` 设置为 `*`。
 
 ```html no-beautify
 <iframe src="http://example.com" name="example">
@@ -299,7 +301,7 @@ if (window == top) { // 当前 window == window.top?
 
 ### onmessage
 
-为了接收消息，目标窗口应该在 `message` 事件上增加一个处理函数。当 `postMessage` 被调用时这个事件会被触发（并且 `targetOrigin` 检查成功）。
+为了接收消息，目标窗口应该在 `message` 事件上有一个处理程序。当 `postMessage` 被调用时这个事件会被触发（并且 `targetOrigin` 检查成功）。
 
 这个事件的 event 对象有一些特殊属性：
 
@@ -356,13 +358,13 @@ window.addEventListener("message", function(event) {
 
 但也有一些例外情况：
 - 对于二级域相同的页面：`a.site.com` 和 `b.site.com`。通过在它们的代码里执行 `document.domain='site.com'` 可以让他们处于"同源"状态。 
-- 如果 iframe 有 `sandbox` 属性，则会强制其处于"非同源"状态，除非在属性中指定了 `allow-same-origin`，这可可用于在同一站点的 iframe 中运行不受信任的代码。
+- 如果 iframe 有 `sandbox` 属性，则会强制其处于"非同源"状态，除非在属性中指定了 `allow-same-origin`，这可可用于在同一网站的 iframe 中运行不受信任的代码。
 
 
 `postMessage` 接口允许两个窗口之间进行通信（要通过安全检查）：
 
 1. 发送方调用 `targetWin.postMessage(data, targetOrigin)`。
-2. 如果 `targetOrigin` 不是 `'*'`，那么浏览器会检测 `targetWin` 的链接地址
+2. 如果 `targetOrigin` 不是 `'*'`，那么浏览器会检查 `targetWin` 的链接地址
 3. 如果满足条件，`targetWin` 会触发 `message` 事件，并且有以下三个属性：
     - `origin` —— 发送方窗口的源（比如 `http://my.site.com`）
     - `source` —— 对发送窗口的引用

From 0f682a34f78093f848f00576697388e2d9e4a2da Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Tue, 7 Apr 2020 17:33:33 +0800
Subject: [PATCH 15/16] Update article.md

---
 .../03-cross-window-communication/article.md  | 49 +++++++++----------
 1 file changed, 23 insertions(+), 26 deletions(-)

diff --git a/3-frames-and-windows/03-cross-window-communication/article.md b/3-frames-and-windows/03-cross-window-communication/article.md
index d67ee7563a..ed406c1a67 100644
--- a/3-frames-and-windows/03-cross-window-communication/article.md
+++ b/3-frames-and-windows/03-cross-window-communication/article.md
@@ -268,7 +268,7 @@ if (window == top) { // 当前 window == window.top?
 `targetOrigin`
 : 指定目标窗口的源，以便只有来自给定的源的窗口才能获得该消息。
 
-`targetOrigin` 是一种安全措施。请记住，如果目标窗口是非同源的，我们无法在发送消息的窗口读取它的 `location`。因此，我们无法确定当前在预期的窗口中打开的是哪个网站：用户随时可以导航离开，并且发送消息的窗口对此一无所知。
+`targetOrigin` 是一种安全措施。请记住，如果目标窗口是非同源的，我们无法在发送方窗口读取它的 `location`。因此，我们无法确定当前在预期的窗口中打开的是哪个网站：用户随时可以导航离开，并且发送方窗口对此一无所知。
 
 指定 `targetOrigin` 可以确保窗口仅在当前仍处于正确的网站时接收数据。在有敏感数据时，这非常重要。
 
@@ -301,66 +301,63 @@ if (window == top) { // 当前 window == window.top?
 
 ### onmessage
 
-为了接收消息，目标窗口应该在 `message` 事件上有一个处理程序。当 `postMessage` 被调用时这个事件会被触发（并且 `targetOrigin` 检查成功）。
+为了接收消息，目标窗口应该在 `message` 事件上有一个处理程序。当 `postMessage` 被调用时触发该事件（并且 `targetOrigin` 检查成功）。
 
-这个事件的 event 对象有一些特殊属性：
+event 对象具有特殊属性：
 
 `data`
 : 从 `postMessage` 传递来的数据。
 
 `origin`
-: 发送方的源，举个例子： `http://javascript.info`。
+: 发送方的源，例如 `http://javascript.info`。
 
 `source`
-: 对发送方窗口的引用。如果我们需要的话可以立即回复 `postMessage`。
+: 对发送方窗口的引用。如果我们想，我们可以立即 `source.postMessage(...)` 回去。
 
-为了处理这个事件，我们需要使用 `addEventListener`，简单使用 `window.onmessage` 不起作用。
+要为 `message` 事件分配处理程序，我们应该使用 `addEventListener`，简短的语法 `window.onmessage` 不起作用。
 
 这里有一个例子：
 
 ```js
 window.addEventListener("message", function(event) {
   if (event.origin != 'http://javascript.info') {
-    // 从未知源获取的消息，忽略它
+    // 来自未知的源的内容，我们忽略它
     return;
   }
 
   alert( "received: " + event.data );
+
+  // 可以使用 event.source.postMessage(...) 向回发送消息
 });
 ```
 
-这里有完整的示例：
+完整示例：
 
 [codetabs src="postmessage" height=120]
 
-```smart header="There's no delay"
-`postMessage` 和 `message` 事件之间完全没有延迟。他们是同步的，甚至比 `setTimeout(...,0)` 还要快。
-```
-
 ## 总结
 
-为了获取另一个窗口的内容以及调用它的方法，首先我们需要获取它的引用。
+要调用另一个窗口的方法或者访问另一个窗口的内容，我们应该首先拥有对其的引用。
 
-对于弹出窗口我们有两个属性
-- `window.open` —— 弹出一个新的窗口并返回它的引用,
-- `window.opener` —— 在弹出窗口内获取打开它的窗口的引用。
+对于弹窗，我们有两个引用：
+- 从打开窗口的（opener）窗口：`window.open` —— 打开一个新的窗口，并返回对它的引用，
+- 从弹窗：`window.opener` —— 是从弹窗中对打开此弹窗的窗口（opener）的引用。
 
-对于 iframes 来说，我们可以使用以下方法获得父窗口或子窗口：
-- `window.frames` —— 一个嵌套的 window 对象集合
-- `window.parent`，`window.top` 是父窗口以及顶级窗口的引用
-- `iframe.contentWindow` 是 `<iframe>` 内网页的 window 对象。
+对于 iframe，我们可以使用以下方式访问父/子窗口：
+- `window.frames` —— 一个嵌套的 window 对象的集合，
+- `window.parent`，`window.top` 是对父窗口和顶级窗口的引用，
+- `iframe.contentWindow` 是 `<iframe>` 标签内的 window 对象。
 
-如果几个窗口的网页是同源的（域，端口，协议都相同），那么这几个窗口可以互相操作任何事情。
+如果几个窗口共享相同的源（域，端口，协议），那么这几个窗口可以彼此进行所需的操作。
 
-否则，只能做以下操作：
-- 修改另一个窗口的地址（并且只能修改，不能读取）
-- 对它发送一个消息
+否则，只能进行以下操作：
+- 更改另一个窗口的 `location`（只能写入）。
+- 向其发送一个消息。
 
-但也有一些例外情况：
+例外情况：
 - 对于二级域相同的页面：`a.site.com` 和 `b.site.com`。通过在它们的代码里执行 `document.domain='site.com'` 可以让他们处于"同源"状态。 
 - 如果 iframe 有 `sandbox` 属性，则会强制其处于"非同源"状态，除非在属性中指定了 `allow-same-origin`，这可可用于在同一网站的 iframe 中运行不受信任的代码。
 
-
 `postMessage` 接口允许两个窗口之间进行通信（要通过安全检查）：
 
 1. 发送方调用 `targetWin.postMessage(data, targetOrigin)`。

From 7a97b3c76a011622aeb23a10ebba939a52143526 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Tue, 7 Apr 2020 18:17:07 +0800
Subject: [PATCH 16/16] Update article.md

---
 .../03-cross-window-communication/article.md  | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/3-frames-and-windows/03-cross-window-communication/article.md b/3-frames-and-windows/03-cross-window-communication/article.md
index ed406c1a67..8fd0563bc4 100644
--- a/3-frames-and-windows/03-cross-window-communication/article.md
+++ b/3-frames-and-windows/03-cross-window-communication/article.md
@@ -106,7 +106,7 @@
 
 根据定义，两个具有不同域的 URL 具有不同的源。
 
-但是，如果窗口共享一个二级域，例如 `john.site.com`，`peter.site.com` 和 `site.com`（它们共同的二级域是 `site.com`），我们可以使浏览器忽略该差异，使得它们可以被作为“同源”的来对待，以便进行跨窗口通信。
+但是，如果窗口的二级域相同，例如 `john.site.com`，`peter.site.com` 和 `site.com`（它们共同的二级域是 `site.com`），我们可以使浏览器忽略该差异，使得它们可以被作为“同源”的来对待，以便进行跨窗口通信。
 
 为了做到这一点，每个这样的窗口都应该执行下面这行代码：
 
@@ -348,23 +348,23 @@ window.addEventListener("message", function(event) {
 - `window.parent`，`window.top` 是对父窗口和顶级窗口的引用，
 - `iframe.contentWindow` 是 `<iframe>` 标签内的 window 对象。
 
-如果几个窗口共享相同的源（域，端口，协议），那么这几个窗口可以彼此进行所需的操作。
+如果几个窗口的源相同（域，端口，协议），那么这几个窗口可以彼此进行所需的操作。
 
 否则，只能进行以下操作：
 - 更改另一个窗口的 `location`（只能写入）。
-- 向其发送一个消息。
+- 向其发送一条消息。
 
 例外情况：
-- 对于二级域相同的页面：`a.site.com` 和 `b.site.com`。通过在它们的代码里执行 `document.domain='site.com'` 可以让他们处于"同源"状态。 
-- 如果 iframe 有 `sandbox` 属性，则会强制其处于"非同源"状态，除非在属性中指定了 `allow-same-origin`，这可可用于在同一网站的 iframe 中运行不受信任的代码。
+- 对于二级域相同的窗口：`a.site.com` 和 `b.site.com`。通过在这些窗口中均设置 `document.domain='site.com'`，可以使它们处于“同源”状态。 
+- 如果一个 iframe 具有 `sandbox` 特性（attribute），则它会被强制处于“非同源”状态，除非在其特性值中指定了 `allow-same-origin`。这可用于在同一网站的 iframe 中运行不受信任的代码。
 
-`postMessage` 接口允许两个窗口之间进行通信（要通过安全检查）：
+`postMessage` 接口允许两个具有任何源的窗口之间进行通信：
 
 1. 发送方调用 `targetWin.postMessage(data, targetOrigin)`。
-2. 如果 `targetOrigin` 不是 `'*'`，那么浏览器会检查 `targetWin` 的链接地址
-3. 如果满足条件，`targetWin` 会触发 `message` 事件，并且有以下三个属性：
-    - `origin` —— 发送方窗口的源（比如 `http://my.site.com`）
-    - `source` —— 对发送窗口的引用
-    - `data` —— 数据，除 IE 只支持字符串意外，其余浏览器都是对象。
+2. 如果 `targetOrigin` 不是 `'*'`，那么浏览器会检查窗口 `targetWin` 是否具有源 `targetOrigin`。
+3. 如果它具有，`targetWin` 会触发具有特殊的属性的 `message` 事件：
+    - `origin` —— 发送方窗口的源（比如 `http://my.site.com`）。
+    - `source` —— 对发送方窗口的引用。
+    - `data` —— 数据，可以是任何对象。但是 IE 浏览器只支持字符串，因此我们需要对复杂的对象调用 `JSON.stringify` 方法进行处理，以支持该浏览器。
 
-    我们应该使用 `addEventListener` 在目标窗口监听这个事件。
+    我们应该使用 `addEventListener` 来在目标窗口中设置 `message` 事件的处理程序。