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,http://embed-v2.ftelnet.ca/ftelnet/ftelnet.norip.xfer.min.js?v=2019-08-31,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

解决方法

当我需要使用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.f我们实例化的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;

目前，我不确定这与客户端路由的配合效果如何。如果遇到路由时窗口对象中的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
}

embed react-router reactjs reactjs