我正在使用libgdx 1.9.2和gwt 2.6.1。
在我的java应用程序的GWT编译之后,我得到了一个JS脚本(html.nocache.js),我可以将其包含在我的html页面中,并在web浏览器中进行visualisate(在div中,在这里它' s" embed-html")。那部分工作得很好。
以下是代码:
<!doctype html>
<html>
<head>
<title>my-gdx-game</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="html/html.nocache.js"></script>
</head>
<body>
<div id="embed-html"></div>
</body>
</html>
我的下一个目标是使用网络组件,更准确地说是自定义元素,在任何网页中都有一个简单的标记<my-app></my-app>
来获取我的应用程序。
我的index.html:
<!doctype html>
<html>
<head>
<title>my-gdx-game</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="webcomponents.js/webcomponents.js"></script>
<link rel="import" href="component.html">
</head>
<body>
<my-app></my-app>
</body>
</html>
我的component.html:
<template id="template">
<div id="embed-html"></div>
<link href="styles.css" rel="stylesheet" type="text/css">
</template>
<script>
var helloDoc = document._currentScript.ownerDocument;
var myApp = document.registerElement('my-app', {
prototype: Object.create(HTMLElement.prototype, {
createdCallback: {
value: function() {
var root = this.createShadowRoot();
var template = helloDoc.querySelector('#template');
var clone = document.importNode(template.content, true);
root.appendChild(clone);
}
}
})
});
</script>
<script type="text/javascript" src="html/html.nocache.js"></script>
但GWT编译生成的JS脚本里面有一些document.write(...)
;所以包括的是我的空div,我的样式表正确加载,以及警告:&#34;警告:从异步加载的外部脚本调用document.write()被忽略&#34;。由于它是生成的,我不认为我可以避免使用这些document.write()
。
如果我将<script type="text/javascript" src="html/html.nocache.js"></script>
放在index.html的头部(在我尝试使用webcomponents之前的那个地方),应用程序不会添加到div中,因为它应该,但在(div和样式下)表格包含在预期中)。
如果我把脚本放在模板中,没有任何反应。
所以我想知道是否有办法让GWT应用程序使用Web组件,或者我是否应该搜索另一种方法来轻松地将我的应用程序包含到外部网站中。
(如果您想知道我想要这样做的原因,那是因为我希望客户能够在他们自己的网站上轻松添加我的应用程序,只需要导入和标记,就像我一样可以导入YouTube视频或Google地图。)