Добавить внешний веб-виджет на панель

Question

Я пытаюсь добавить внешний веб-виджет с веб-сайта погоды. Это дает мне somethink так:

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

Я попытался создать HTML-виджет с этим кодом и добавить его к моей панели, но он не показывает.

Answer 1

Код вставки, который вы предоставили, работает только в том случае, если он включен в файл 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); 
    } 
} 

Answer 2

Элемент IFrame можно использовать для загрузки внешнего содержимого.

Обратите внимание, что вы не сможете взаимодействовать с внешним контентом из-за межсайтового скриптинга.