CODEWITHSUNDEEP
gwt
jpp1jpp1
jpp1jpp1

Reputation: 181

Add external web widget to a Panel

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.

Upvotes: 0

Views: 591

Answers (2)

djd0
djd0

Reputation: 947

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

Upvotes: 1

WLGfx
WLGfx

Reputation: 1179

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.

Upvotes: 0

Related Questions