Search code examples
reactjsreact-routerembed

React site, trying to embed app, but I can't figure out how to integrate into a component (works on the static page)

I'm trying to embed the following onto my react site in a specific component/page. When I put the code on the static html page it works beautifully, but it isn't working out when I try to place it onto the component.

The main error I'm getting is saying that chrome won't allow document.write from an external script or something along those lines. I wish I still had the error message, but I've been trying different things and in a fit of frustration deleted it all last night. (Great strategy, I know.) I was able to retrieve the errors, please see at the bottom for details.

<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>

I'm not looking for anyone to do this for me, but if you could provide a tip, point me to some documentation, or any hint whatsoever I would be eternally grateful.

This embed is coming from the following site by the way: http://embed-v2.ftelnet.ca/

EDIT

I'm still working on this, so I tried to get back the error messages and here is what happened:

(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 This is my component at the moment:

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;

This also throws the error, Uncaught SyntaxError: Invalid or unexpected token

Solution

  • I encountered a similar issue when I needed to use PayPal scripts (they do not support importing ES6 modules).

    First of all, document.write will not work for you because by the time the componentDidMount is invoked, the document is already fully loaded. See https://developer.mozilla.org/en-US/docs/Web/API/Document/write. Therefore calling this again - should the write function push through - will erase everything in the document and write a new one.

    To solve your issue, here is what I did: on your initial html document, example index.html, this is where I included your script to load the source codes needed and I assigned the fTelnetOptions object to a window property since you instantiate this later on:

    <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>

    Back on your component, do what you have to to initialize the telnet when the component mounts - see the window.fTelnetOptions that we instantiated:

    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;

    Edit confident-vaughan-4t225

    At this point I am not sure how well this will work with client-side-routing. Refer to my scripts below if you encounter that the fTelnetOptions property in window object is lost when routing:

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

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