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

Question

我想使用 GWT 插入 GWT 小部件，如 FlowPanel、HTMLPanel inside 和 iframe。我找到了 this将内容作为字符串插入到 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/> child 的。

最终的解决方案是:

    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。