All geek questions in one place

How to integrate the GWT application into another web platform?

I need the ability to download and run the GWT application at any time in an Echo2 environment. My first approach was to download and execute nocache.js in client-server synchronization using

var script = document.createElement("script");
script.setAttribute("src",javascriptURI);
script.setAttribute("type","text/javascript");
document.getElementsByTagName('body')[0].appendChild(script);

This call basically works, but when the script is executed, it works with the EMPTY document instead of the current Echo2 application document. Was it supposed to somehow initialize the script, or was any event required?

A GWT / script application works fine if it is included in the application’s HTML source code, so I assume that the GWT application is correct. In the original standalone GWT HTML application, there is an HTML script tag in the body.

+3
source share
1 answer

The problem is that the dowcument.write calls in the nocache.js file only work if the documents have not finished loading. Otherwise, document.write will overwrite the entire document.

To do this, calls to document.write must be replaced with the createElement methods for the DOM:

For the first code that adds a script with a token identifier:

var script = document.createElement("script");
script.setAttribute("id", markerId);
$doc_0.getElementsByTagName("body")[0].appendChild(script);

For the second part (almost at the end of nocache.js). Replace “application” with your application name:

try {
    var script = document.createElement("script");
    script.setAttribute("defer", "defer");
    script.innerHTML = "app.onInjectionDone('app')";
    $doc_0.getElementsByTagName("body")[0].appendChild(script);
} catch (e) {
    // Fallback if we want to use the original html page without embedding in IE
    $doc_0.write('<script defer="defer">app.onInjectionDone(\'app\')<\/script>');
}

So this was the part that needs to be fixed in the code generated by gwt. Now the html page that loads and starts the application when the user clicks a button:

<html> 
  <head> 
    <!-- base url --> 
    <base href="http://localhost:8080/app/" /> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <link type="text/css" rel="stylesheet" href="static-gwt.css"> 
    <title>APP</title> 
    <script type="text/javascript"> 

    function startApp() {
        if (document.createElement && document.getElementsByTagName) {
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = 'app/app.nocache.js';
          var heads =document.getElementsByTagName('body');
          if (heads && heads[0]) {
            heads[0].appendChild(script);
            triggerAppStart();
          }
        }
    }

    function triggerAppStart(){
        try{
        app.onInjectionDone('app');
        if ( !document.createEventObject ) {
            var evt = document.createEvent("HTMLEvents");
            evt.initEvent("DOMContentLoaded", true, true);
            document.dispatchEvent(evt);
           }
        } catch ( e ) {
        window.setTimeout('triggerAppStart()', 100 );
       } 
    }

</script> 
  </head> 
  <body> 
    <input type="button" onclick="startApp();return false;"> 
  </body> 
 </html>

I know that this is not the best solution, but this is the only way he has worked so far.

+1
source

Source: https://habr.com/ru/post/1740302/

More articles:


All Articles