javascript - 为什么文档的就绪状态从 "complete"更改为 "loading"？

Question

请看下面的代码:

this.detachedWin = window.open(window.origin + "/@/tab","Detached","menubar=0,toolbar=0,personalbar=0,status=0");
  
this.doc = this.detachedWin.document;

setInterval(() => {
  console.log(this.doc === this.detachedWin.document,this.detachedWin.document.readyState);
  this.doc = this.detachedWin.document;
}, 10);

JSFiddle

如果您查看控制台日志，您会看到如下内容:

我不明白为什么文档的就绪状态第一次是“完成”，之后又变成加载状态的原因是什么？ 我希望第一次准备状态为“正在加载”。

Answer 1

第一次“完成”发生在空白窗口中，然后将位置更改为提供的 URL。

Note that remote URLs won't load immediately. When window.open() returns, the window always contains about:blank. The actual fetching of the URL is deferred and starts after the current script block finishes executing. The window creation and the loading of the referenced resource are done asynchronously.

developer.mozilla.org

简化的窗口打开流程

1. window.open()
2. 立即加载，因为没有要加载的内容:“正在加载”
3. 立即变为交互式，因为它是空的:“interactive”
4. 空白窗口已准备就绪:“已完成”
5. 显式或隐式设置window.location
6. 重定向至网址:“正在加载”
7. 窗口变为交互式:“交互式”
8. 窗口已准备就绪:“已完成”

您可以在 specification 中找到打开窗口的所有步骤的完整流程。 .

要了解其工作原理，请查看示例:

const openMe = () => { 
  this.detachedWin = window.open("", "Detached","menubar=0,toolbar=0,personalbar=0,status=0");

  setTimeout(() => {
    console.log("loading happen now")
    this.detachedWin.location = window.origin + "/@/tab"
  }, 1000);

  this.doc = this.detachedWin.document;
  setInterval(() => {
    console.log(this.doc === this.detachedWin.document, this.detachedWin.document.readyState);
    this.doc = this.detachedWin.document;
  }, 10);
}

<button onclick="openMe()">Open window</button>