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

Question

我想在内部插入 GWT 小部件，如 FlowPanel、HTMLPanel 和使用 GWT 的 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/> 中。

最终的解决方案是：

    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 属性来指定要加载的资源。