Reputation: 1160
I am trying to scroll to the fragment element on first iframe load (default browser behavior when there is #<elementId>
in the url), however I have been unsuccessful so far.
In url, there is an id of an element after '#
' sign, like: mydomain.com/test#h1_id
. I made sure that particular element with h1_id
exists in the html that is loaded into iframe.
The way the iframe loads is like this: user clicks an <a>
element that has a target
of that iframe: <a href="mydomain.com/test#h1_id" target="iframename">2c)</a>
.
Iframe looks like this: <iframe style="flex: 1 1 50%; width: 100%; height: 100%;" name="iframename" frameborder="0" id="iframename" slot="secondary"></iframe>
.
When it loads it does not scroll to the fragment immediately, but once it is loaded and user clicks on <a>
another time, it scrolls.
Minimal example:
Route where the <a>
element and <iframe>
is present:
@Route("/foo")
public class MyLayout extends VerticalLayout {
public MyLayout() {
val anch = new Anchor();
anch.setTarget("iframename");
anch.setHref("/goo#h1_id"); // or any other url, in my case it is localhost (same origin, or browsers will show warning/error)
anch.setText("CLICK ME");
val iframe = new IFrame();
iframe.setName("iframename");
iframe.setId("iframename");
iframe.setSizeFull();
add(iframe);
add(anch);
}
}
Route to show in iframe:
@Route("/goo")
public class Hello extends VerticalLayout {
public Hello() {
// long paragraph so it actually takes some height
val text = new Span(" Lorem ipsum dolor sit amet, consectetur adipiscing elit. " +
"Pellentesque molestie ultricies lectus ac rhoncus. Quisque auctor venenatis metus," +
" et tincidunt elit scelerisque in. Donec a magna eget arcu euismod iaculis. Integer " +
"eget finibus turpis, sed faucibus ligula. Aliquam sed sodales ligula. Aliquam erat volutpa" +
"t. In sed aliquam elit. Orci varius natoque penatibus et magnis dis parturient montes, nasc" +
"etur ridiculus mus. Donec tincidunt est aliquet ullamcorper mollis. Integer id sem eu libero " +
"euismod facilisis nec id turpis. Nullam ullamcorper feugiat fringilla. Nullam ultricies volutpat d" +
"ui, eu varius dui condimentum eu. Curabitur in lectus faucibus, pellentesque risus et, semper dui.");
text.addClassName(LumoUtility.FontSize.XXLARGE);
val scrollElement = new Span("Element to scroll to");
scrollElement.setId("h1_id");
add(text, scrollElement);
}
}
Behavior that I want to achieve (scroll on first iframe load) the way i described above is functional in Vaadin 8, however when we migrated to 24, it does not work. Are there any ways to make it work? I tried scrolling to it programatically in route constructor or in AfterNavigation, or in BeforeEnter, and using javascript load hooks, however it did not help.
Upvotes: 0
Views: 96