3

我在 GWT 中创建了一个小部件，我希望能够为用户提供一小段 HTML，他们可以将其嵌入到他们的网站中，这样我的小部件就会在那里呈现。

我不认为 iframe 是合适的，因为一个要求是单击我的小部件上的任何链接都应该将用户带到我的网站（而不仅仅是更改 iframe 的内容）。

任何帮助将不胜感激。

PS我尝试嵌入以下内容，但没有运气：< script src="http://embeddedapptest.appspot.com/embeddedapp/embeddedapp.nocache.js" ></script> < div id="foo" />

4

3 回答 3

3

有可能的。片段需要像

<script src="yourmodule.nocache.js"></script>
<div id="foo"/>

然后在您的入口点执行以下操作：

RootPanel root = RootPanel.get("foo");
// add your things here. root.add(...);

您需要注意不要踩到外部页面的样式，反之亦然，但编译的 CSS 应该可以帮助您实现这一目标。

这是用于在 Google API 文档中嵌入 API Explorer 的技术。

于 2012-07-16T05:33:29.740 回答
2

我认为现在不可能做到。但是将来您可以使用Web 组件来做到这一点。

但是可以使用gwt-exporter导出 GWT/Java API 。这使得自动创建 JavaScript API 成为可能。gwtchismes使用它来导出GWT 小部件的 JavaScript 版本。您可以在他们的 wiki中找到有关它的教程。

于 2012-07-15T08:50:52.977 回答
0

在 NetBeans GWT 项目中

mycss.css：

body, html,div.wrap-frame{ 
    margin: 0;
    padding: 0;
    widht: 100%;
    height: 100%;}body{
    background: white;
}

.row1or3 {
    width: 100%;
    height: 10%;
    background: blue;
    text-align: center;
}

.row2{
    width: 100%;
    height: 80%;
    background: yellow;
    text-align: center;
    display:flex;
}

.wrapper{
   width:100%;
   height: 100%;
}

.box{
    float:left; 
    height: 100%;
}

.box:nth-child(1){
    width:25%;
    background-color:red;
}

.box:nth-child(2){
    width:50%;
    background-color:green;
}

.box:nth-child(3){
    width:25%;
    background-color:yellow;
}

欢迎GWT.html

<html>
<head>
    <script id=ft type="text/javascript"  src="org.yournamehere.Main/org.yournamehere.Main.nocache.js"></script>
    <meta name='gwt:module' content='org.yournamehere.Main=org.yournamehere.Main'>
    <link rel="stylesheet" href="mycss.css"> 
</head>
<body>
    <div class="row1or3"> Row1
    </div>

    <div class="row2">
        <div class="wrapper">
            <div class="box">
                Left Side Menu
            </div>
            <div class="box" id="mydiv"> 
            </div>
            <div class="box">
                Right Side Menu
            </div>
        </div>
    </div>

    <div class="row1or3">
        Row3
    </div>​
</body>

MainEntryPoint.java

public class MainEntryPoint implements EntryPoint {

/**
 * Creates a new instance of MainEntryPoint
 */
public MainEntryPoint() {
}

/**
 * The entry point method, called automatically by loading a module that
 * declares an implementing class as an entry-point
 */
public void onModuleLoad() {
    final Label label = new Label("Hello, GWT!!!");
    final Button button = new Button("Click me!");

    button.addClickHandler(new ClickHandler() {
        public void onClick(ClickEvent event) {
            label.setVisible(!label.isVisible());
        }
    });

    RootPanel root = RootPanel.get("mydiv");
   root.add(button);
    root.add(label);
}
}

在此处输入图像描述

现在您可以将任何 html 页面的任何 div 元素命名为 id=mydiv 并添加已编译的 GWT jscript。我已经测试过了。

于 2018-06-06T18:38:29.217 回答