> Markdown version of [Browser Access](https://vaadin.com/docs/latest/flow/advanced/browser-access). Section index: [llms.txt](https://vaadin.com/docs/latest/flow/llms.txt)

# Accessing the Browser Page

Besides using the `Element` API to manipulate the DOM in the browser, you can also interact with the browser page by adding style sheets, executing JavaScript, and receiving browser resize events.

These features are available through the `Page` object. You can access the page of the current request with `UI.getCurrentOrThrow().getPage()`.

## <a id="getting-the-window-location-url"></a>Getting the Window Location URL

Use the `Page.fetchCurrentURL()` method to fetch the current URL from the browser.

For example:

Getting the browser URL

```java
UI.getCurrentOrThrow().getPage().fetchCurrentURL(currentUrl -> {
    // This is your own method that you may do something with the url.
    // Note that this method runs asynchronously
    storeCurrentURL(currentUrl);
});
```

## <a id="accessing-browser-information"></a>Accessing Browser Information

During the initial HTTP request, Vaadin reads the user-agent information supplied by the browser and stores it in a `WebBrowser` instance, which is accessible from the current `VaadinSession`.

Use `getUserAgent()` to get the raw user-agent string. For structured browser detection (e.g., browser name, version, or operating system), use a parsing library such as [ua-parser/uap-java](https://github.com/ua-parser/uap-java).

```java
WebBrowser browser = VaadinSession.getCurrent().getBrowser();
String userAgent = browser.getUserAgent();
// Use a parsing library for structured detection, for example:
// Parser parser = new Parser();
// Client client = parser.parse(userAgent);
// String browserName = client.userAgent.family; // "Chrome"
// String os = client.os.family; // "Windows"
```

> **Note:** The browser and OS detection methods (since V25) in `WebBrowser` — such as `getBrowserApplication()`, `isChrome()`, `isWindows()`, and `getBrowserMajorVersion()` — are deprecated. Use `getUserAgent()` with a parsing library instead.

## <a id="getting-the-extended-client-side-details"></a>Getting the Extended Client-Side Details

Use `retrieveExtendedClientDetails()` in the current `Page` object to retrieve extended client-side details. The method accepts a callback that, when called after client response, gets an `ExtendedClientDetails` object with various client-side data.

For example, the following can be used to get the screen width:

Getting the screen width

```java
UI.getCurrentOrThrow().getPage().retrieveExtendedClientDetails(details -> {
    // This is your own method that you may do something with the screen width.
    // Note that this method runs asynchronously
    handleScreenWidth(details.getScreenWidth());
});
```

### <a id="browser-time"></a>Browser Time (new in V25.3)

`getBrowserTime()` returns the current time of the browser as an `Instant`. It isn’t entirely accurate, since it’s derived from the round-trip to the client, but it’s close enough for most purposes.

The returned instant is a point on the time line and carries no time zone. To get the date and time as shown on the end user’s computer, combine it with the browser’s time zone — which `getTimeZoneId()` returns as `null` when the browser didn’t report one, so a fallback is needed:

Getting the date and time shown in the browser

```java
UI.getCurrentOrThrow().getPage().retrieveExtendedClientDetails(details -> {
    String timeZoneId = details.getTimeZoneId();
    ZoneId zone = timeZoneId != null ? ZoneId.of(timeZoneId)
            : ZoneId.systemDefault();

    ZonedDateTime browserDateTime = details.getBrowserTime().atZone(zone);
    handleBrowserDateTime(browserDateTime);
});
```

> **Note:** The older `getCurrentDate()` method is deprecated for removal. It returns a `Date` in the server’s default time zone, which is rarely what’s wanted; use `getBrowserTime()` instead.

### <a id="platform-detection"></a>Platform Detection (new in V25.3)

`getNavigatorPlatform()` returns the platform string the browser reports, or `null` if it reported none. Prefer feature detection over branching on it: the value is unreliable, and an iPad running iPadOS reports `MacIntel`, exactly like a desktop Mac.

For that reason, the `isIOS()` and `isIPad()` methods are deprecated. Use feature detection, or inspect `getNavigatorPlatform()` directly if you need the raw value.

## <a id="executing-javascript-in-the-browser"></a>Executing JavaScript in the Browser

You can use server-side Java to execute JavaScript snippets in the browser. You can also pass parameters to the executed script as variables named `$0`, `$1`, and so on. Vaadin automatically serializes and escapes the parameter values.

You can execute JavaScript in the browser and pass parameters as follows:

```java
public static void logElementSize(String name,
        Element element) {
    Page page = UI.getCurrentOrThrow().getPage();

    page.executeJs(
            "console.log($0 + ' size:', "
            + "$1.offsetWidth, $1.offsetHeight)",
            name, element);
}
```

The supported parameter types are: `String`, `Boolean`, `Integer`, `Double`, `JsonValue`, and `Element`.

The script is executed after the DOM tree has been updated based on server-side changes. The parameter value is `null` for a parameter of type `Element` that isn’t attached after the update (according to the server-side component structure).

The script is executed asynchronously, so you can’t directly pass values back to the server. Instead, you can use the returned `PendingJavaScriptResult` instance to add a callback that’s called when the result is available.

## <a id="scrolling-a-component-into-view"></a>Scrolling a Component into View

You can scroll any component into the visible area of the browser window using `scrollIntoView()`. This calls the browser’s native `scrollIntoView()` on the component’s element.

Scrolling a component into view

```java
component.scrollIntoView();
```

Use `ScrollIntoViewOption` to control scrolling behavior and alignment:

Smooth scrolling

```java
component.scrollIntoView(ScrollIntoViewOption.Behavior.SMOOTH);
```

Scrolling to align the component at the bottom of the viewport

```java
component.scrollIntoView(ScrollIntoViewOption.Block.END);
```

Options can be combined. `Behavior` controls the scrolling animation, `Block` controls vertical alignment, and `Inline` controls horizontal alignment.

Combining multiple options

```java
component.scrollIntoView(
        ScrollIntoViewOption.Behavior.SMOOTH,
        ScrollIntoViewOption.Block.END,
        ScrollIntoViewOption.Inline.CENTER);
```

The available alignment values for both `Block` and `Inline` are `START`, `CENTER`, `END`, and `NEAREST`.

## <a id="browser-window-resize-events"></a>Browser Window Resize Events

The `Page` class allows you to register a listener for events that affect the web page and the browser window in which the Vaadin UI lives. The `Page` instance corresponding to a given `UI` is accessed by the `getPage()` method of the `UI`.

You can get the browser window size by adding a resize listener, as follows:

```java
Page page = UI.getCurrentOrThrow().getPage();
var listener = page.addBrowserWindowResizeListener(
        event -> Notification.show("Window width="
                + event.getWidth()
                + ", height=" + event.getHeight()));
```

> **Note:** To avoid memory leaks when using `BrowserWindowResizeListener` you need to unregister it when you don’t need to listen the events anymore. For example you can do this when component detaches.

```java
@Override
protected void onDetach(DetachEvent detachEvent) {
    // Listener needs to be eventually removed to avoid resource leak
    listener.remove();
    super.onDetach(detachEvent);
}
```

`0DF2CC14-4401-49E4-B97D-920CAFEAAF8D`