React 站点，尝试嵌入应用程序，但我不知道如何集成到组件中（在静态页面上工作）

Question

我正在尝试将以下内容嵌入到我的特定 component/page 中的 React 站点中。当我将代码放在静态 html 页面上时，它工作得很好，但是当我尝试将它放在组件上时却无法正常工作。

我遇到的主要错误是说 chrome 不允许来自外部脚本或类似内容的 document.write。 我希望我仍然有错误消息，但我一直在尝试不同的事情，并且在一阵沮丧中昨晚把它删除了。 （很棒的策略，我知道。） 我能够检索错误，请在底部查看详细信息。

<div id="fTelnetContainer" class="fTelnetContainer"></div>
<script>document.write('<script src="//embed-v2.ftelnet.ca/js/ftelnet-loader.norip.xfer.js?v=' + (new Date()).getTime() + '"><\/script>');</script>
<script>
    var Options = new fTelnetOptions();
    Options.BareLFtoCRLF = false;
    Options.BitsPerSecond = 57600;
    Options.ConnectionType = 'telnet';
    Options.Emulation = 'ansi-bbs';
    Options.Enter = '\r';
    Options.Font = 'CP437';
    Options.ForceWss = false;
    Options.Hostname = 'mysite.com';
    Options.LocalEcho = false;
    Options.NegotiateLocalEcho = true;
    Options.Port = 1234;
    Options.ProxyHostname = 'proxy-us-ga.ftelnet.ca';
    Options.ProxyPort = 80;
    Options.ProxyPortSecure = 443;
    Options.ScreenColumns = 80;
    Options.ScreenRows = 25;
    Options.SendLocation = true;
    var fTelnet = new fTelnetClient('fTelnetContainer', Options);
</script>

我不是在找任何人为我做这件事，但如果你能提供提示、给我一些文档或任何提示，我将永远感激不已。

顺便说一下，此嵌入来自以下站点：http://embed-v2.ftelnet.ca/

编辑

我仍在努力解决这个问题，所以我尝试取回错误消息，结果如下：

(index):46 A parser-blocking, cross site (i.e. different eTLD+1) script, http://embed-v2.ftelnet.ca/js/ftelnet-loader.norip.xfer.js?v=1599169227014, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See https://www.chromestatus.com/feature/5718547946799104 for more details.

A cookie associated with a cross-site resource at http://ftelnet.ca/ was set without the `SameSite` attribute. It has been blocked, as Chrome now only delivers cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.

ftelnet-loader.norip.xfer.js?v=1599169227014:1 A parser-blocking, cross site (i.e. different eTLD+1) script, http://embed-v2.ftelnet.ca/ftelnet/ftelnet.norip.xfer.min.js?v=2019-08-31, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See https://www.chromestatus.com/feature/5718547946799104 for more details.

EDIT2 这是我现在的组件：

class Home extends React.Component {

  componentDidMount() {
    document.write("<script src='//embed-v2.ftelnet.ca/js/ftelnet-loader.norip.xfer.js?v=" + (new Date()).getTime() + "'></script>" +
        "<script>" +
        "window.onload(function() {" +
        "var Options = new fTelnetOptions();" +
        "Options.BareLFtoCRLF = false;" +
        "Options.BitsPerSecond = 57600;" +
        "Options.ConnectionType = 'telnet';" +
        "Options.Emulation = 'ansi-bbs';" +
        "Options.Enter = '\r';" +
        "Options.Font = 'CP437';" +
        "Options.ForceWss = false;" +
        "Options.Hostname = 'mysite.com';" +
        "Options.LocalEcho = true;" +
        "Options.NegotiateLocalEcho = true;" +
        "Options.Port = 1234;" +
        "Options.ProxyHostname = 'proxy-us-ga.ftelnet.ca';" +
        "Options.ProxyPort = 80;" +
        "Options.ProxyPortSecure = 443;" +
        "Options.ScreenColumns = 80;" +
        "Options.ScreenRows = 25;" +
        "Options.SendLocation = true;" +
        "var fTelnet = new fTelnetClient('fTelnetContainer', Options);" +
        "});" +
         + "</script>");

  }

  render() {
    return (
      <div>
      <h1>TELNET TIME</h1>
      <div id="fTelnetContainer" className="fTelnetContainer"></div>
      </div>
    );
  }
}

export default Home;

这也会抛出错误，Uncaught SyntaxError: Invalid or unexpected token

Answer 1

我在需要使用 PayPal 脚本时遇到了类似的问题（它们不支持导入 ES6 模块）。

首先，document.write 对您不起作用，因为在调用 componentDidMount 时，文档已经完全加载。参见 https://developer.mozilla.org/en-US/docs/Web/API/Document/write。因此再次调用它 - 如果 write 函数通过 - 将删除文档中的所有内容并写入一个新的。

为了解决您的问题，我做了以下工作：在您最初的 html 文档中，例如 index.html，我在此处包含了您的脚本以加载所需的源代码，并且我分配了fTelnetOptions 对象到 window 属性，因为稍后实例化它：

<html>
<head>
  <script>
    document.write(
        '<script src="//embed-v2.ftelnet.ca/js/ftelnet-loader.norip.xfer.js?v=' +
            new Date().getTime() +
        '"><\/script>'
    );
    window.fTelnetOptions = fTelnetOptions;
  </script>
</head>

回到您的组件，执行您必须在组件安装时初始化 telnet 的操作 - 请参阅我们实例化的 window.fTelnetOptions：

class Home extends React.Component {
  componentDidMount() {
    var Options = new window.fTelnetOptions();
    Options.BareLFtoCRLF = false;
    Options.BitsPerSecond = 57600;
    Options.ConnectionType = "telnet";
    Options.Emulation = "ansi-bbs";
    Options.Enter = "\r";
    Options.Font = "CP437";
    Options.ForceWss = false;
    Options.Hostname = "mysite.com";
    Options.LocalEcho = true;
    Options.NegotiateLocalEcho = true;
    Options.Port = 1234;
    Options.ProxyHostname = "proxy-us-ga.ftelnet.ca";
    Options.ProxyPort = 80;
    Options.ProxyPortSecure = 443;
    Options.ScreenColumns = 80;
    Options.ScreenRows = 25;
    Options.SendLocation = true;
    var fTelnet = new window.fTelnetClient("fTelnetContainer", Options);
  }

  render() {
    return (
      <div>
        <h1>TELNET TIME</h1>
        <div id="fTelnetContainer" className="fTelnetContainer"></div>
      </div>
    );
  }
}

export default Home;

---

此时我不确定这与 client-side-routing 的配合情况如何。遇到路由丢失window对象中的fTelnetOptions属性请参考我下面的脚本：

const script = document.createElement("script");
script.src = `your_script_url`;
script.async = true;
document.body.appendChild(script);

script.onload = () => {
    // do your instantiation & logic here
}