Add external web widget to a Panel

Question

I'm trying to add an external web widget from a weather website. It gives me somethink like this:

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

I've tried creating a HTML widget with that code and adding it to my panel, but it doesn't show.

score 1 · Accepted Answer · edited May 23 '17 at 12:17

The embed code you have been given only works when it is included in the HTML file. It doesn't work when added dynamically. For example, if you open an empty HTML file in a web browser and run:

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

in the developer (F12) console, you will see that the external content doesn't get loaded. This is because scripts will not automatically be executed when added in this way.

You don't need to execute this external script, however. All it does is create and insert an iframe, and set some attributes and styling. If we look at the source code of the script, we can translate it into a GWT equivalent.

Embed JS script:

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 equivalent:

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);
    }
}

score 0 · Answer 2 · answered Dec 22 '16 at 11:18

0

You can use an IFrame element to load external content.

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

Note though, that you won't be able to interact with the external content due to Cross site scripting.

answered Dec 22 '16 at 11:18

WLGfx

1,169
15
31

I already tried Frames, it works with a single URL but not for my case. HTMLPanel weather = new HTMLPanel("
"); weather.setSize("300px","125px"); body.add(weather); – jpp1jpp1 Dec 22 '16 at 12:46

Add external web widget to a Panel

2 Answers2