javascript - 调用 `window.open()` 后对新窗口的引用在 IE11 和 MS Edge 中返回 null

Question

我正在编写一个 React 应用程序，它应该从服务器获取数据(二进制 pdf)并在新选项卡/窗口中将其显示为 PDF。我知道如何弄清楚显示部分，问题是我的代码中对新创建窗口的引用丢失了。当您将以下文件放入普通 create-react-app 项目并导入它时，您将看到变量 _window 将在 Chrome 和 Firefox 上返回新窗口对象，但在Windows 7 (IE11) 和 Windows 10 (MS Edge) 将返回 null。

import React, { Component } from 'react';

export default class Container extends Component {
  fetch() {
    const data = {
      user: 'User1',
      text: 'This is some text',
    }
    const user = document.createElement('h2');
    user.innerHTML = data.user;
    const text = document.createElement('p');
    text.innerHTML = data.text;
    const _window = window.open('about:blank', 'w1');
    console.log(_window);
    _window.document.body.appendChild(user);
    _window.document.body.appendChild(text);
  }

  render() {
    return (
      <div>
        <button onClick={this.fetch.bind(this)}>Fetch!</button>
      </div>
    );
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

这不允许我修改新创建的窗口对象的 DOM。 (我知道大多数 React 人员可能会说将其放入组件中并在那里显示，但我需要以某种方式完成此操作)。

我已经尝试阅读 this和 this并在 IE 中关闭保护模式，但它不起作用。

Answer 1

看来您的问题不是因为 IE/Edge 中的 _window 为 null，而是您尚未在 IE/Edge 中所需的子窗口上下文中创建元素。

因此，首先打开子窗口，然后在子窗口上下文中创建要附加到子窗口的元素，如下所示。

var _window = window.open('', 'w1');
var _contents = _window.document.createElement('div');

查找更新后的 codepen here .