diff --git a/docs/guide/plugin.md b/docs/guide/plugin.md index b123cc0db..e68ae99ee 100644 --- a/docs/guide/plugin.md +++ b/docs/guide/plugin.md @@ -313,9 +313,9 @@ const plugins = [ ```javascript const plugins = [ { - // element 为插入的元素,window 为子应用的 window - appendOrInsertElementHook(element, iframeWindow) { - console.log(element, iframeWindow) + // element 为真正插入的元素,window 为子应用的 window, rawElement为原始插入元素 + appendOrInsertElementHook(element, iframeWindow, rawElement) { + console.log(element, iframeWindow, rawElement) } }, ]; diff --git a/packages/wujie-core/src/effect.ts b/packages/wujie-core/src/effect.ts index 0a4f6d092..14ba5b173 100644 --- a/packages/wujie-core/src/effect.ts +++ b/packages/wujie-core/src/effect.ts @@ -237,7 +237,7 @@ function rewriteAppendOrInsertChild(opts: { manualInvokeElementEvent(element, "load"); element = null; }; - insertScriptToIframe({ ...scriptResult, onload }, sandbox.iframe.contentWindow); + insertScriptToIframe({ ...scriptResult, onload }, sandbox.iframe.contentWindow, element); }; const scriptOptions = { src, @@ -272,9 +272,9 @@ function rewriteAppendOrInsertChild(opts: { sandbox.execQueue.push(() => fiber ? requestIdleCallback(() => { - insertScriptToIframe({ src: null, content: text }, sandbox.iframe.contentWindow); + insertScriptToIframe({ src: null, content: text }, sandbox.iframe.contentWindow, element); }) - : insertScriptToIframe({ src: null, content: text }, sandbox.iframe.contentWindow) + : insertScriptToIframe({ src: null, content: text }, sandbox.iframe.contentWindow, element) ); if (!execQueueLength) sandbox.execQueue.shift()(); } diff --git a/packages/wujie-core/src/iframe.ts b/packages/wujie-core/src/iframe.ts index 2ecce3d12..c1ac5aeb3 100644 --- a/packages/wujie-core/src/iframe.ts +++ b/packages/wujie-core/src/iframe.ts @@ -648,8 +648,13 @@ export function syncIframeUrlToWindow(iframeWindow: Window): void { * iframe插入脚本 * @param scriptResult script请求结果 * @param iframeWindow + * @param rawElement 原始的脚本 */ -export function insertScriptToIframe(scriptResult: ScriptObject | ScriptObjectLoader, iframeWindow: Window) { +export function insertScriptToIframe( + scriptResult: ScriptObject | ScriptObjectLoader, + iframeWindow: Window, + rawElement?: HTMLScriptElement +) { const { src, module, content, crossorigin, crossoriginType, async, callback, onload } = scriptResult as ScriptObjectLoader; const scriptElement = iframeWindow.document.createElement("script"); @@ -693,12 +698,13 @@ export function insertScriptToIframe(scriptResult: ScriptObject | ScriptObjectLo } container.appendChild(scriptElement); - // 外联转内联调用手动触发onload - content && onload?.(); // 调用回调 callback?.(iframeWindow); // 执行 hooks - execHooks(plugins, "appendOrInsertElementHook", scriptElement, iframeWindow); + execHooks(plugins, "appendOrInsertElementHook", scriptElement, iframeWindow, rawElement); + // 外联转内联调用手动触发onload + content && onload?.(); + // async脚本不在执行队列,无需next操作 !async && container.appendChild(nextScriptElement); }