외부 웹 위젯을 패널에 추가

Question

날씨 웹 사이트에서 외부 웹 위젯을 추가하려고합니다. 내가 그 코드로 HTML 위젯을 생성하고 내 패널에 추가하려고했습니다

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

하지만 표시되지 않습니다 : 그것은 나를 이렇게 somethink 제공합니다.

Answer 1

제공된 소스 코드는 HTML 파일에 포함 된 경우에만 작동합니다. 동적으로 추가 할 때는 작동하지 않습니다. 예를 들어, 웹 브라우저에서 빈 HTML 파일을 열고 경우 실행 개발자 (F12) 콘솔

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

, 당신은 외부 콘텐츠가로드되지 않는 것을 볼 수 있습니다. 이 방법으로 스크립트를 추가하면 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 요소를 사용하여 외부 콘텐츠를로드 할 수 있습니다. 이 때문에 크로스 사이트 스크립팅에 외부 콘텐츠와 상호 작용 할 수 없다는 생각

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

참고.