diff --git a/plugins/globals.ts b/plugins/globals.ts index 9aed27b39..29e47c410 100644 --- a/plugins/globals.ts +++ b/plugins/globals.ts @@ -79,31 +79,27 @@ export default ({ app, store }: { app: Vue, store: Store }): void => store.commit('showTranslationMode'); } - Vue.prototype.$loadScript = (name: string, src: string, nonce: string | undefined = undefined) => { + Vue.prototype.$loadScript = (name: string, src: string, nonce: string | undefined = undefined): Promise => { if (!process.client || document.querySelectorAll(`script.${name}-script`).length > 0) { return new Promise((resolve) => { - resolve(null); + resolve(); }); } - let resolveFn: ((this: GlobalEventHandlers, event: Event) => any) | null = null; - let rejectFn: OnErrorEventHandler = null; - const promise = new Promise((resolve, reject) => { - resolveFn = resolve; - rejectFn = reject; + return new Promise((resolve, reject) => { + const script = document.createElement('script'); + script.setAttribute('src', src); + if (nonce) { + script.setAttribute('nonce', nonce); + } + script.classList.add(`${name}-script`); + script.crossOrigin = 'true'; + script.addEventListener('load', () => resolve()); + script.addEventListener('error', (event) => { + reject(new Error(`failed to load ${name} (${src}): ${typeof event === 'string' ? event : event.type}`)); + }); + document.body.appendChild(script); }); - - const s = document.createElement('script'); - s.setAttribute('src', src); - if (nonce) { - s.setAttribute('nonce', nonce); - } - s.classList.add(`${name}-script`); - s.onload = resolveFn; - s.onerror = rejectFn; - document.body.appendChild(s); - - return promise; }; try {