Vaadin中如何不触发弹窗拦截器打开动态内容新窗口？

问题背景 #

需要在新窗口打开动态生成的HTML文件，避免浏览器弹窗拦截。尝试过BrowserWindowOpener但误以为无法处理动态内容，Enhanced Window Opener仅支持Vaadin 8，当前按钮点击事件中的代码会触发拦截。

可行解决方案 #

方案一：正确使用BrowserWindowOpener处理动态资源 #

BrowserWindowOpener完全支持动态生成的StreamResource，因为资源内容是在浏览器请求时才生成的，而非提前预定义。这种方式是Vaadin官方推荐的，不会触发弹窗拦截。

代码示例：

Button openHtmlBtn = new Button("打开动态HTML文件");

// 初始化窗口打开器，资源提供者会在每次点击时动态生成资源
BrowserWindowOpener opener = new BrowserWindowOpener(() -> {
    // 动态生成HTML文件
    File htmlFile = generateMyHTMLFile();
    
    // 创建StreamResource
    StreamResource resource = new StreamResource(htmlFile.getName(), () -> {
        try {
            return new BufferedInputStream(new FileInputStream(htmlFile));
        } catch (FileNotFoundException e) {
            throw new RuntimeException("无法读取生成的HTML文件", e);
        }
    });
    
    resource.setContentType(fileMimeType);
    resource.setCacheTime(0); // 禁用缓存，确保每次加载最新内容
    return resource;
});

// 设置窗口参数
opener.setWindowName("_blank");
opener.setFeatures("height=800,width=600");
// 将打开器绑定到按钮
opener.extend(openHtmlBtn);

方案二：在点击事件中模拟<a>标签点击（自定义逻辑场景） #

如果必须在按钮的ClickListener中执行额外业务逻辑，可以通过生成临时<a>标签并模拟点击的方式打开窗口。这种操作处于用户点击的同步事件上下文内，不会被浏览器拦截。

代码示例：

public void openFile() {
    // 动态生成HTML文件
    File file = generateMyHTMLFile();

    // 创建StreamResource并注册
    StreamResource source = new StreamResource(file.getName(), () -> {
        try {
            return new BufferedInputStream(new FileInputStream(file.getAbsolutePath()));
        } catch (Exception e) {
            throw new RuntimeException("加载文件失败", e);
        }
    });
    source.setContentType(fileMimeType);
    source.setCacheTime(0);
    StreamRegistration registration = VaadinSession.getCurrent().getResourceRegistry().registerResource(source);
    String resourceUri = registration.getResourceUri();

    // 模拟a标签点击打开窗口
    UI.getCurrent().getPage().executeJs("""
        const link = document.createElement('a');
        link.href = $0;
        link.target = '_blank';
        link.rel = 'noopener noreferrer'; // 安全最佳实践
        link.style.display = 'none';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        """, resourceUri);
}

原代码触发拦截的原因 #

原代码中使用UI.getCurrent().getPage().executeJs("window.open(...)")时，executeJs的执行可能脱离了用户点击的同步事件上下文，浏览器会判定为非用户主动触发的弹窗，因此进行拦截。

内容的提问来源于stack exchange，提问作者Yberamos