Question

我正在编写一个React应用程序，它应该从服务器获取数据（二进制文件pdf）并在新的选项卡/窗口中将其显示为PDF。我知道如何弄清楚显示部分，问题是我的代码中对新创建的窗口的引用丢失了。当您将以下文件放在vanilla 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

看来你的问题不是因为{/ 1}}在IE / Edge中是空的，但是你没有在IE / Edge中需要的子窗口上下文中创建元素。

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

_window

找到您更新的代码集here。

调用`window.open（）`后引用新窗口在IE11和MS Edge中返回null

1 个答案: