在UIBinder的iFrame中添加GWT小部件？

Question

我想在其中使用GWT插入GWT小部件，例如FlowPanel，HTMLPanel和iframe。 我發現這篇文章將內容作為字符串插入到iFrame中。 但是，當我要集成其他面板和小部件時，這無濟於事。

我發現了如何以編程方式將GWT小部件和面板插入GWT。 這是我的方法：

  public interface Resources extends ClientBundle {

    @Source({Css.DEFAULT_CSS})
    Css css();

  }

  public interface Css extends CssResource {

    String DEFAULT_CSS = "test/client/app/start/StartView.gss";

    String outerBox();
    String iframe();
    String test();

  }

  @UiField(provided = true)
  Resources resources;

  @UiField(provided = true)
  Messages messages;

  @Inject
  public StartView(final Binder binder, Resources resources, Messages messages)    
  {
    this.resources = resources;
    resources.css().ensureInjected();
    this.messages = messages;
    initWidget(binder.createAndBindUi(this));

    final IFrameElement iframe = Document.get().createIFrameElement();
    FlowPanel innerBox = new FlowPanel() {
       @Override
       protected void onLoad() {
         super.onLoad();

         FlowPanel p1 = new FlowPanel();
         p1.addStyleName(resources.css().test());

         HTMLPanel panel = new HTMLPanel("Hello World!");
         panel.setStyleName(resources.css().test());  // does not work
         p1.add(panel);

         final Document doc = iframe.getContentDocument();
         BodyElement body = doc.getBody();

         body.appendChild(p1.getElement());
         panel.setStyleName(resources.css().test());  // does not work
         p1.getElement().addClassName(resources.css().test()); // does not work

       }
    };
  }

我的uiBinder：

<ui:with type="test.client.app.start.StartView.Resources" field="resources" />
<ui:with type="test.client.messages.Messages" field="messages" />

<g:FlowPanel ui:field="outerPanel" addStyleNames="{resources.css.outerBox}">
</g:FlowPanel>

前一個代碼將GWT面板插入到iframe中。 問題是我無法設置任何CSS樣式。 即使我使用以下方式設置樣式：

panel.setStyleName(resources.css().test());  // does not work
p1.getElement().addClassName(resources.css().test()); // does not work

兩種變體都不起作用。 我知道我可以在iframe文檔的開頭插入一個普通的CSS文件，但是我想使用GWT資源。

如何使用CSS / GSS資源為iframe內的面板設置樣式？

Answer 1

我建議使用IFrameElement以編程方式向iframe添加內容，並使用getContentDocument()檢索iframe文檔，以附加新內容。

順便說一句，您仍然可以在view.ui.xml中像這樣使用UIBinder：

 <iframe  ui:field="container"/>

並在您的View.java中：

 @UiField IFrameElement container;

關於CSS我認為主要問題是iframe就像一個沙箱，並且不與父文檔共享信息。 我最好的猜測是應該從父級克隆<link/>或<style/>元素，並將其附加到子級的<head/>中。

最終的解決方案是：

    Event.sinkEvents(iframe, Event.ONLOAD);
    Event.setEventListener(iframe, new EventListener() {
        @Override
        public void onBrowserEvent(Event event) {
            StyleElement style = Document.get().createStyleElement();
            style.setInnerText(resources.css().getText());
            iframe.getContentDocument().getHead().appendChild(style);

            ParagraphElement pEl = Document.get().createPElement();
            pEl.setInnerText("Hallo World");
            pEl.addClassName(resources.css().whatever());
            iframe.getContentDocument().getBody().appendChild(pEl);
        }
    });

為了從iframe檢索文檔，必須使用事件偵聽器，即使它是about：blank ，您也應該等待框架加載它。

Answer 2

<iframe>不能包含子元素（它們將被忽略），因為它實際上是嵌套在文檔中的瀏覽器窗口。 您必須使用其src屬性來指定要加載的資源。