Tutorial: Window.getWebWindow

Window.getWebWindow

Returns the Window Object that represents the web context of the target window. This is the same object that you would get from calling window.open() in a standard web context. The target window needs to be in the same application as the requesting window as well as comply with same-origin policy requirements.

Injecting content into an empty window.

In this example we create a blank child window and populte it with some simple html.

(async ()=> {
    try {
        const winName = `child-window-${Date.now()}`;
        const win = await fin.Window.create({
            name: winName,
            url: 'about:blank'
        });
        win.getWebWindow().document.write('<h1>Hello World</h1>');
    } catch (err) {
        console.error(err);
    }
})();

Cloning DOM elements from the parent window

In this example we clone an h3 element from the parent window.

(async ()=> {
    try {
        const currentWindow = await fin.Window.getCurrent();
        const parentWindow = await currentWindow.getParentWindow();
        const clonedH3 = parentWindow.getWebWindow().document.querySelector('h3').cloneNode(true);
        document.body.append(clonedH3);

    } catch (err) {
        console.error(err);
    }
})();

Rendering on a child window via a library

In this example we are using the lit-html template library to render content on a blank child window. you are not going to be able to copy paste this example without configuring the project correctly but this would demonstrate some templeting options available.

(async ()=> {
    try {
        const win = await fin.Window.create({
            name: `child-window-${Date.now()}`,
            url: 'about:blank'
        });
        const template = html`
            <div>
                <span>Click here: </span>
                <button @click=${()=> console.log('Hello World!')}>log to the console</button>
            </div>`;
        render(template, win.getWebWindow().document.body);

    } catch (err) {
        console.error(err);
    }
})();