Как интегрировать приложение GWT в другой веб-фреймворк?
-
25-09-2019 - |
Вопрос
Мне нужна возможность загружать и запускать приложение GWT в любое время в среде Echo2.Мой первый подход заключался в загрузке и выполнении nocache.js при синхронизации клиент-сервер, используя
var script = document.createElement("script");
script.setAttribute("src",javascriptURI);
script.setAttribute("type","text/javascript");
document.getElementsByTagName('body')[0].appendChild(script);
Этот вызов в основном работает, но при выполнении сценария он работает с ПУСТЫМ документом, а не с текущим документом приложения Echo2.Нужно ли сначала каким-то образом инициализировать сценарий или требуется какое-то событие?
Приложение/скрипт GWT работает нормально, если оно включено в стартовый HTML-код приложения, поэтому я предполагаю, что приложение GWT работает правильно.Исходный автономный HTML-код приложения GWT также содержит тег HTML-скрипта в теле.
Решение
Проблема в том, что вызовы dowcument.write в файле nocache.js работают только в том случае, если документы еще не завершили загрузку.В противном случае document.write перезапишет весь документ.
Поэтому вызовы document.write необходимо заменить методами createElement DOM:
Для первого кода, который добавляет скрипт с идентификатором маркера:
var script = document.createElement("script");
script.setAttribute("id", markerId);
$doc_0.getElementsByTagName("body")[0].appendChild(script);
Вторая часть (почти в конце nocache.js).Замените «приложение» на имя вашего приложения:
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>');
}
Итак, это была та часть, которую необходимо исправить в коде, сгенерированном gwt.Теперь html-страница, которая загружает и запускает приложение, когда пользователь нажимает кнопку:
<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>
Я знаю, что это не лучшее решение, но до сих пор это единственный способ, который работал.