Tutorial: View.setCustomWindowHandler

View.setCustomWindowHandler

Sets a custom window handler. Only works if experimental child windows are enabled for the view. Takes a match pattern or array of match patterns for which to call the handler. If multiple handlers are set that match a url, only the first set one will be called. This can be used to "cascade" listeners. Returns a function to unsubscribe this handler.

Example

Creates a view and logs requested window options into the console

let view;
async function createView() {
    const me = await fin.Window.getCurrent();
    return fin.View.create({
        name: 'viewNameCustomWindow1',
        target: me.identity,
        bounds: {top: 10, left: 10, width: 600, height: 400},
        experimental: {
            childWindows: true
        }
    });
}

async function createViewWithCustomHandler1() {
    view = await createView();
    console.log('View created.');

    const unsubscribe = await view.setCustomWindowHandler('<all_urls>', opts => {
        console.log(`View requested to open ${opts.url}`);
    })
    await view.navigate('https://javascript.info/popup-windows');
    console.log('View navigated to given url.');
}

createViewWithCustomHandler1()
    .then(() => console.log('View created'))
    .catch(err => console.log(err));

Example

Creates a view which will only block urls matching the google domain.

let view;
async function createView() {
    const me = await fin.Window.getCurrent();
    return fin.View.create({
        name: 'viewNameCustomWindow2',
        target: me.identity,
        bounds: {top: 10, left: 10, width: 600, height: 400},
        experimental: {
            childWindows: true
        }
    });
}

async function createViewWithCustomHandler2() {
    view = await createView();
    console.log('View created.');

    const unsubscribe = await view.setCustomWindowHandler('*://*.google.com/*', opts => {
        console.log(`View requested to open google ${opts.url}`);
    })
    await view.navigate('https://javascript.info/popup-windows');
    console.log('View navigated to given url.');
}

createViewWithCustomHandler2()
    .then(() => console.log('View created'))
    .catch(err => console.log(err));

Example

Creates a view which will only block all urls except those matching the google domain. Those will be opened in a new window.

let view;
async function createView() {
    const me = await fin.Window.getCurrent();
    return fin.View.create({
        name: 'viewNameCustomWindow3',
        target: me.identity,
        bounds: {top: 10, left: 10, width: 600, height: 400},
        experimental: {
            childWindows: true
        }
    });
}

async function createViewWithCustomHandler3() {
    view = await createView();
    console.log('View created.');
    const unsubscribe1 = await view.setCustomWindowHandler('*://*.google.com/*', opts => {
        fin.Window.create(opts);
    })
    const unsubscribe2 = await view.setCustomWindowHandler('<all_urls>', opts => {
        console.log(`View requested to open ${opts.url}`);
    })
    await view.navigate('https://javascript.info/popup-windows');
    console.log('View navigated to given url.');
}

createViewWithCustomHandler3()
    .then(() => console.log('View created'))
    .catch(err => console.log(err));