This is a window launcher for front-end compatibility with browser issues when using window.open.
- 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.
yarn add @acrool/window-launcher
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...');
});
import Launcher, {
checkIsMobile,
checkIsAndroid,
checkIsIOS,
getBrowser,
checkIsChromeBrowser,
checkIsSafariBrowser,
checkIsFirefoxBrowser,
checkIsEdgeBrowser,
checkIsLineBrowser,
checkIsFacebookBrowser, checkIsWebview, checkIsPWA
} from '@acrool/window-launcher';
import Launcher, {
checkIsMobile,
checkIsAndroid,
checkIsIOS,
} from '@acrool/window-launcher';
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: