将外部网络小部件添加到面板

Question

我正在尝试从天气网站添加外部网络小部件。它给了我这样的想法：

<div id='cont_5caab8f298a3d34d53973f2d8906d1f7'><script type='text/javascript' async src='https://www.tiempo.com/wid_loader/5caab8f298a3d34d53973f2d8906d1f7'></script></div>

我已经尝试使用该代码创建一个 HTML 小部件并将其添加到我的面板，但它没有显示。

Answer 1

您可以使用 IFrame 元素加载外部内容。

final Frame frame = new Frame("url");
frame.addLoadHandler(new LoadHandler() {
    @Override
    public void onLoad(LoadEvent event) {
        // do stuff here
    }
});
RootPanel.get("mydiv").add(frame);

不过请注意，由于跨站点脚本，您将无法与外部内容进行交互。

Answer 2

您获得的嵌入代码只有包含在 HTML 文件中时才有效。动态添加时不起作用。例如，如果您在网络浏览器中打开一个空的 HTML 文件并且运行:

document.body.innerHTML += "<div id='cont_5caab8f298a3d34d53973f2d8906d1f7'><script type='text/javascript' async src='https://www.tiempo.com/wid_loader/5caab8f298a3d34d53973f2d8906d1f7'></script></div>";

在开发者 (F12) 控制台中，您会看到没有加载外部内容。这是因为脚本 will not 以这种方式添加时会自动执行。

但是，您不需要执行此外部脚本。它所做的只是创建并插入一个 iframe，并设置一些属性和样式。如果我们查看 script 的源代码，我们可以将其翻译成等效的 GWT。

嵌入 JS 脚本：

conte = document.getElementById("cont_5caab8f298a3d34d53973f2d8906d1f7");
                    if (conte) {
                        conte.style.cssText = "width: 176px; color: #868686; background-color:#FFFFFF; border:1px solid #D6D6D6; margin: 0 auto; font-family: Roboto;";
                        elem = document.createElement("iframe");
                        elem.style.cssText = "width:176px; color:#868686; height:200px;";
                        elem.id = "5caab8f298a3d34d53973f2d8906d1f7";
                        elem.src = "https://www.tiempo.com/getwid/5caab8f298a3d34d53973f2d8906d1f7";
                        elem.frameBorder = 0;
                        elem.allowTransparency = true;
                        elem.scrolling = "no";
                        elem.name = "flipe";
                        conte.appendChild(elem);
                    }

相当于 GWT：

public class Hello implements EntryPoint {
    public void onModuleLoad() {
        Panel root = RootPanel.get("main"); // replace with your Panel

        //This doesn't work:
        //HTML embed = new HTML("<div id='cont_5caab8f298a3d34d53973f2d8906d1f7'><script type='text/javascript' async src='https://www.tiempo.com/wid_loader/5caab8f298a3d34d53973f2d8906d1f7'></script></div>");

        //This does:
        Frame embed =  new Frame("https://www.tiempo.com/getwid/5caab8f298a3d34d53973f2d8906d1f7");
        embed.setStyleName(""); // remove GWT styling. You could add your own CSS class here.
        embed.getElement().setAttribute("style", "width:176px; color:#868686; height:200px;");
        embed.getElement().setAttribute("frameborder", "0");
        embed.getElement().setAttribute("scrolling", "no");

        root.add(embed);
    }
}

将外部网络小部件添加到面板

Add external web widget to a Panel

gwt