Vaadin 24 iframe首次加载无法滚动到锚点问题求助

在Vaadin 24中，通过带target指向iframe的<a>元素加载含锚点的URL时，首次加载不会自动滚动到锚点元素，但再次点击链接可正常生效。该功能在Vaadin 8中正常，迁移后失效。以下是可行的解决方案：

方案一：监听iframe加载完成事件，手动触发锚点滚动 #

利用iframe的load事件，在内容完全加载后，提取URL中的锚点并找到对应元素执行滚动操作。在包含iframe的视图代码中添加如下逻辑：

public MyLayout() {
    val anch = new Anchor();
    anch.setTarget("iframename");
    anch.setHref("/goo#h1_id");
    anch.setText("CLICK ME");
    
    val iframe = new IFrame();
    iframe.setName("iframename");
    iframe.setId("iframename");
    iframe.setSizeFull();
    
    // 添加加载监听，手动处理锚点滚动
    iframe.addAttachListener(event -> {
        getUI().ifPresent(ui -> {
            ui.getPage().executeJs("""
                const iframe = document.getElementById('$0');
                // 监听iframe加载完成事件
                iframe.addEventListener('load', function() {
                    // 从src中提取锚点
                    const hash = iframe.src.split('#')[1];
                    if (hash) {
                        const targetElement = iframe.contentDocument.getElementById(hash);
                        if (targetElement) {
                            // 执行滚动，behavior设为auto模拟浏览器默认行为
                            targetElement.scrollIntoView({behavior: 'auto'});
                        }
                    }
                });
            """, iframe.getId());
        });
    });
    
    add(iframe);
    add(anch);
}

方案二：拦截Anchor点击，手动控制iframe加载与滚动 #

通过阻止Anchor的默认跳转行为，手动设置iframe的src并绑定一次性加载事件，确保滚动只触发一次：

public MyLayout() {
    val anch = new Anchor();
    anch.setTarget("iframename");
    anch.setHref("/goo#h1_id");
    anch.setText("CLICK ME");
    
    val iframe = new IFrame();
    iframe.setName("iframename");
    iframe.setId("iframename");
    iframe.setSizeFull();
    
    // 拦截Anchor点击事件
    anch.addClickListener(event -> {
        event.preventDefault();
        String targetHref = anch.getHref();
        // 设置iframe的src
        iframe.setSrc(targetHref);
        
        getUI().ifPresent(ui -> {
            ui.getPage().executeJs("""
                const iframe = document.getElementById('$0');
                const targetHash = '$1'.split('#')[1];
                // 绑定一次性加载事件，避免重复触发
                iframe.addEventListener('load', function() {
                    if (targetHash) {
                        const targetElement = iframe.contentDocument.getElementById(targetHash);
                        if (targetElement) {
                            targetElement.scrollIntoView();
                        }
                    }
                }, {once: true});
            """, iframe.getId(), targetHref);
        });
    });
    
    add(iframe);
    add(anch);
}

原理说明 #

Vaadin 24基于现代前端框架（Lit + Vaadin Router）构建，其客户端初始化逻辑可能在首次加载iframe时，干扰了浏览器默认的锚点滚动行为。通过手动监听iframe加载完成事件，确保DOM元素已完全渲染后再执行滚动，即可绕过框架的拦截逻辑，实现与Vaadin 8一致的效果。

注意：上述方案仅适用于同域场景，跨域iframe受浏览器同源策略限制，无法直接访问内部DOM元素。

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