Question

我有一个html页面，其中有一个关闭按钮，点击该按钮应该关闭窗口。这个html页面正在加载到Vaadin对话框中。我知道Vaadin负责用window.setClosable（true）关闭对话框。但是，html页面中的按钮也应该这样做。如何启用此功能？
以下是代码：

myHelp.html：

<html>
<head>
</head>
<body>
.
.
<!-- This is at the footer right corner -->
<p class="myClass" align="right"><img src="images/iconclose.gif" width="50" height="10" border="0" onClick="window.close()" title="Close"></p>
.
.
</body>
</html>

Java代码：

.
.
String link = "test/myHelp.html";
MenuItem menuItem = null;
if (link.contains("/test")) {

menuItem = menuBar.addItem("", new ExternalResource(StringUtil.append("/images/", images.get(i))), new Command() {

@Override
public void menuSelected(MenuItem selectedItem) {

    final Window window = new Window(this.caption);
    window.setClosable(true);
    window.setWindowMode(WindowMode.NORMAL);
    window.setModal(true);
    window.setDraggable(true);
    window.setResizable(false);
    window.center();
    window.addStyleName("abcdailog");
    VerticalLayout layout = new VerticalLayout();
    layout.setSizeFull();
    layout.setSpacing(true);
    layout.setMargin(true);

    if (!CommonUtil.isEmpty(this.styleName)) {
        window.addStyleName("abcStyle");
        layout.setMargin(false);
    }
    if (!CommonUtil.isEmpty(link)) {
        BrowserFrame browser = new BrowserFrame(null, new ExternalResource(this.link));
        browser.setSizeFull();
        layout.addComponent(browser);
    } else {
        verticalLayout.setSizeFull();
        layout.addComponent(verticalLayout);
    }

    window.setContent(layout);
    UI.getCurrent().addWindow(window);
    }
    }
    });
.
.
.

在新窗口中加载myHtml会发生什么。作为一个vaadin窗口，一切都很好，但由于html有一个window.close在一个图像上，这是假设工作不起作用。我希望代码有助于更好地理解。

Answer 1

最简单的方法是在窗口底部添加一个Vaadin按钮。但是，如果这不是一个选择，有几种方法可以做到这一点，第一个想到的方法（可能是下一个最简单的方法）是添加a callback JS function来关闭窗口。

1）自定义窗口实现：

import com.vaadin.shared.ui.label.ContentMode;
import com.vaadin.ui.JavaScript;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;
import com.vaadin.ui.Window;

    public class MyHtmlWindow extends Window {
    private static final String CLOSE_WINDOW_FUNCTION = "closeWindow";

    public MyHtmlWindow() {
        // some window configuration
        setModal(true);
        setClosable(true);
        setResizable(false);
    }

    public void show(UI ui) {
        // add some HTML content in a label including the call to the closeWindow() JS function
        setContent(new Label("<html>\n" +
                "<button type=\"button\" onClick=\"" + CLOSE_WINDOW_FUNCTION + "();\">Close</button>\n" +
                "<script>\n", ContentMode.HTML));

        // add a JS function to close the window
        JavaScript.getCurrent().addFunction(CLOSE_WINDOW_FUNCTION, arguments -> this.close());

        // show the window
        ui.addWindow(this);
    }

    @Override
    public void close() {
        // call super so everything gets cleaned up nicely
        super.close();
        // remove previously added function
        JavaScript.getCurrent().removeFunction(CLOSE_WINDOW_FUNCTION);
    }
}

2）用法：

public class MyVaadinUI extends UI {
    @Override
    protected void init(VaadinRequest request) {
        new MyHtmlWindow().show(this);
    }
}

3）结果：

P.S。：欢迎提出改进建议

如何在vaadin对话框中启用javascript window.close（）？

1 个答案: