javascript - 为什么我的 readState 逻辑中 document.body 为 null？

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是undefined在 IE 中时 loading状态。

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()
  }
}

我目前的提问路线......

1. 问题是 default案件？我应该在那里添加事件监听器吗？我可以修改案例的顺序，以便事件监听器是默认的吗？
2. 可以吗 body是 null关于DOMContentLoaded事件？
3. document.readyState是否可能有其他值那些正在失败？

Answer 1

首先，如果您已经检查了 readyState 并确定它已已加载，那么为什么要为已经过去的时刻设置事件处理程序(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 个参数 第三个可以是两个值之一:

1. 事件名称(字符串)

2. 回调函数(引用或内联函数)

   3a。是否 Hook 到捕获阶段( bool 值 - 默认为 false)

   3b。用于配置特性的选项对象(对象)

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

应该是:

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

另外(仅供引用)，您确实应该手动插入语句末尾分号，而不是依赖自动插入，因为在某些边缘情况下会导致错误。