调用“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 人员可能会说把它放在组件中并显示在那里，但我需要以某种方式完成(。

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

Answer 1

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

因此，首先打开子窗口，

然后创建要附加到子窗口上下文中的子窗口的元素，如下所示。

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

在此处查找更新的代码笔。