为什么 document.body null 与我的 readyState 逻辑？

Question

我正在尝试尽快将 iframe 元素附加到 document.body 中。

所有 4 种主要浏览器（Chrome、Safari、FF、IE -- 各种版本）都会收到错误报告，我们看到 document.body 是 null。我认为当我的 JS 文件被缓存并快速加载时会发生这种情况。

这是插入 iframe:

的逻辑

private loadIFrame(): void {
  switch (document.readyState) {
    case 'uninitialized':
    case 'loading':
    case 'loaded':
      window.addEventListener('DOMContentLoaded',
        this.appendIFrame.bind(this)
      )
      break
    case 'interactive':
    case 'complete':
    default:
      this.appendIFrame()
  }
}

private appendIFrame(): void {
  if (document.getElementById('iframeId')) {
    return
  }

  let iFrame: HTMLIFrameElement = document.createElement('iframe')
  iFrame.src = document.location.protocol + this.ORIGIN + '/iframe.html'
  iFrame.id = 'iframeId'

  // document.body is null here
  document.body.appendChild(iFrame)
}

我很难在干净的环境中重现该问题，这让我猜测这是如何在野外发生的。

我最初尝试过这种rreadyState逻辑，但是我们看到document.body在IE中处于loading状态时是undefined。

private loadIFrame(): void {
  switch (document.readyState) {
    case 'uninitialized':
    case 'loading':
      window.addEventListener('DOMContentLoaded',
        this.appendIFrame.bind(this)
      )
      break
    case 'loaded':
    case 'interactive':
    case 'complete':
    default:
      this.appendIFrame()
  }
}

我目前的提问线....

问题是 default 的情况吗？我应该在那里添加事件监听器吗？我可以修改案例的顺序，以便事件侦听器是默认的吗？
是否有可能 body 是 null 在 DOMContentLoaded 事件中？
是否有可能 document.readyState 的其他值正在下降？

Answer 1

首先，如果您已经在检查 readyState 并确定它是 loaded，那么为什么要为已经过去的时刻设置事件处理程序 (DOMContentLoaded)?

你可以这样做：

private loadIFrame(): void {
  switch (document.readyState) {
    case 'uninitialized':
    case 'loading':
    case 'loaded':
      this.appendIFrame.bind(this);
      break;
    case 'interactive':
    case 'complete':
    default:
      this.appendIFrame();
  }
}

其次，您的事件处理程序注册有误。 .addEventListener() 有 3 个参数，第三个参数可以是以下两个值之一：

事件名称（字符串）
回调函数（引用或内联函数）

3a。是否挂钩到捕获阶段（boolean - 默认为false）

3b。一个配置特征的选项对象(object)

并且，addEventListener() 本身在将接收事件的对象上调用（在本例中为 window）。

应该是：

    window.addEventListener('DOMContentLoaded', function(){
      this.appendIFrame.bind(this);
    });

此外（仅供参考），您确实应该手动插入语句末尾的分号，而不是依赖自动插入，因为在某些极端情况下会导致错误。

Answer 2

我更新了逻辑，我能够几乎消除错误，但我仍然看到 document.body 是 null 当 [=13] =] 是 interactive。

一旦我评估了导致问题的特定浏览器场景，我将更新此 post。

private loadIFrame(): void {
  switch (document.readyState) {
    case 'uninitialized':
    case 'loading':
    case 'loaded':
      document.addEventListener('DOMContentLoaded',
        this.appendIFrame.bind(this)
      )
      break
    case 'interactive':
    case 'complete':
    default:
      if(document.body) {
        this.appendIFrame()
      } else {
        window.addEventListener('load',
          this.appendIFrame.bind(this)
        )
      }
  }
}

为什么 document.body null 与我的 readyState 逻辑？

Why is document.body null with my readyState logic?

javascript

typescript

iframe

readystate

domcontentloaded