Vaadin 14添加的IFrame无法显示外部内容 无报错如何解决

• 第一步：先确认目标站点是否允许iframe嵌入
  你当前使用的https://google.de本身就设置了X-Frame-Options: SAMEORIGIN响应头，全球所有谷歌官方域名都禁止第三方网站iframe嵌入，这是最常见的触发空白的原因。你可以先替换为允许跨域嵌入的测试地址验证，比如你的项目内静态页面、或者测试用的允许嵌入的公共站点。
• 第二步：检查dialog渲染时机是否影响iframe加载
  你把iframe放在dialog内容中，如果在dialog未打开、DOM还未挂载到页面时就初始化iframe，可能出现加载异常。可以添加dialog打开监听，在dialog触发打开事件后再设置iframe的src：

dialog.addOpenedChangeListener(event -> {
    if (event.isOpened()) {
        iFrame.setSrc("你的目标地址");
    }
});

• 第三步：排查前端报错和网络请求状态
  Vaadin后端无报错不代表前端没有异常，打开浏览器F12开发者工具：
  1. 查看控制台标签，是否存在跨域、资源加载拦截类的报错
  2. 查看网络标签，筛选iframe对应的请求，检查请求是否成功发送、响应头里X-Frame-Options/Content-Security-Policy字段是否有限制嵌入的配置
• 第四步：排查样式遮挡问题
  可以给iframe和父容器增加样式排查是否被上层元素遮挡、或者被父容器裁切：

// 给iframe设置高z-index避免被遮挡
iFrame.getElement().getStyle().set("z-index", "9999");
// 给父div设置和iframe一致的宽高，避免overflow:hidden裁切内容
div.setWidth("560px");
div.setHeight("315px");

• 第五步：排查Vaadin版本兼容问题
  Vaadin 14早期小版本存在IFrame组件src不生效的已知bug，如果你使用的版本低于14.4 LTS版本，建议升级到14最新的稳定LTS版本；也可以直接通过原生Element创建iframe绕过组件问题：

Element nativeIframe = new Element("iframe");
nativeIframe.setAttribute("src", "你的目标地址");
nativeIframe.setAttribute("width", "560px");
nativeIframe.setAttribute("height", "315px");
nativeIframe.setAttribute("frameborder", "1");
div.getElement().appendChild(nativeIframe);

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