Skip to content

This is a window launcher for front-end compatibility with browser issues when using window.open.

License

Notifications You must be signed in to change notification settings

acrool/acrool-window-launcher

Repository files navigation

Acrool Window Launcher

Acrool Window Launcher Logo

This is a window launcher for front-end compatibility with browser issues when using window.open.

NPM npm npm

npm downloads npm

Features

  • Supports window.open after asynchronous requests in iOS Safari.
  • Supports whether to close the old window when opening a new one
  • Provides browser detection (Safari, Firefox, IE, Wechat, Line, Facebook), default is Chrome.

Installation

yarn add @acrool/window-launcher

Examples

use in your page/component:

import {Launcher} from '@acrool/window-launcher';

const launcher = new Launcher({
    readyUrl: '/loading.html',
    isEnableCatchClose: true,
});

// 1. open loading page
// 2. xhr requet
// 3. replace loading page to new url
launcher
    .open(async () => {
        const json = await axios.get('/url1.json');
        return json.data.gameUrl;
    })
    .catch(e => {
        logRef.current.append('\ncatch...');
    })
    .finally(() => {
        logRef.current.append('\nfinally...');
    });

Check Browser

import Launcher, {
    checkIsMobile,
    checkIsAndroid,
    checkIsIOS,
    getBrowser,
    checkIsChromeBrowser,
    checkIsSafariBrowser,
    checkIsFirefoxBrowser,
    checkIsEdgeBrowser,
    checkIsLineBrowser,
    checkIsFacebookBrowser, checkIsWebview, checkIsPWA
} from '@acrool/window-launcher';

Check OS

import Launcher, {
    checkIsMobile,
    checkIsAndroid,
    checkIsIOS,
} from '@acrool/window-launcher';

In Global

Here, declare things that go in the global namespace, or augment existing declarations in the global namespace

typings/global.d.ts

import {Launcher} from '@acrool/window-launcher';

declare global {
    interface Window {
        ActiveXObject: string
        dataLayer: any[]
        launcher: Launcher
    }
}

tsconfig.json

{
    "files": [
        "typings/global.d.ts"
    ]
}

There is also a example that you can play with it:

Play react-editext-example

License

MIT © Acrool & Imagine