Skip to main content

i4scada Knowledge Base

Chrome, Edge, Firefox changes in loading behavior of JavaScript

Abstract

Having troubles with your browsers and your I4SCADA visualization is affected due to JavaScript? Check out how you can overcome the issue.

Even though SmartEditor projects have minimum requirements for web browsers, your i4scada visualization may be affected by the JavaScript changes in the loading behavior of Chrome. Edge, Firefox browsers.

You might be affected if you encounter any of these issues in your browser:

  • Your visualization is not presenting any live values.

  • Your visualization is not behaving as it should after an (automatic) browser update.

  • Parts of your visualization are not rendered.

Solution

Add a defer attribute to the application JavaScript bundle.

For a description of what effects this attribute has, see script tags: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

  1. Manually apply the change to all compiled HTML files:

    1. HTML Smart Editor Application

      In all your *.html files which have an i4-core added, you have to find the following line:

      html.jpg

      Add the defer attribute like the following:

      defer.jpg

    2. App Template

      In your index.html you have to change the following line:

      script_type.jpg

      Add the defer attribute like the following:

      script_defer.jpg

  2. Upgrade to the latest software version:

    Note

    This option is only available with a valid SLA.

    The easiest way to implement the change is a regular i4scada update using the HMTL SmartEditor. All you have to do is install a WEBfactory i4scada (3.8.13) update on your system:

    1. Install the update;

    2. Rebuild your visualization with the SmartEditor;

    3. Check if you are using an i4-core version 3.8.13-18 and upwards;

    4. Deploy this application at your Webserver;

    5. Refresh/reload the browser.

  3. Implement the change through the HotFix:

    Note

    This option is only available with a valid SLA.

    The update of the i4-core is an intermediate hotfix, you just have to change the i4-core in the HTML Smart Editor folder:

    1. Change the i4core;

    2. Rebuild your visualization with the SmartEditor;

    3. Check if you are using an i4-core version 3.8.13-18 and upwards;

    4. Deploy this application at your Webserver.

  4. Implement the change while using your own controls:

    If you are developing controls on your own, this fix fits your need.

    Update the App Template only if you are using the release mode.

    After updating your App Template with the 3.8.13-18 and upwards, you can check the version in the package_json.jpg

    1. You should notice changes in the following files:

      pageTemplates.jpg
      script_type-text.jpg
      index_standalone.jpg
      page_templates-index.jpg

      As you can see the release version will add a defer attribute to the script tag.

    2. To apply this change, run the following commands in the terminal:

      gulp_clean.jpg

      This will delete your index*.html files.

      gulp_build.jpg

      This will rebuild the index*.html files with the updates. Then you can build your application as usual. Deploy this application at your Webserver and refresh/reload the browser.

  5. Implement the change while using your own Custom Core Extension:

    If you are developing your own core extension you have to update the core itself in SmartEditor.

    Extension_builder.jpg

    This can be done quite easily by adding a defer to the script tag in the last line under HTML → After <body> tag.

    HTML_body_tag.jpg

    1. Rebuild your custom core;

    2. Deploy it to the HTML Smart Editor extension folder;

    3. Rebuild your visualization with the SmartEditor;

    4. Check if you are using the new version;

    5. Deploy this application at your Webserver;

    6. Refresh/reload the browser.

In this section: