Блог

Я пытаюсь встроить следующее на свой сайт 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

Я столкнулся с аналогичной проблемой, когда мне нужно было использовать скрипты PayPal (они не поддерживают импорт модулей ES6).

Прежде всего, document.write у вас это не сработает, потому что к моменту componentDidMount вызова документ уже полностью загружен. Смотрите https://developer.mozilla.org/en-US/docs/Web/API/Document/write. Поэтому повторный вызов этой функции — если write функция сработает — сотрет все в документе и напишет новый.

Чтобы решить вашу проблему, вот что я сделал: в вашем исходном HTML-документе, example 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 при подключении компонента — см. Окно.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 в window object теряется при маршрутизации:

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

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