时间戳

首页 > 解决方案 > 在浏览器中执行（导入）带有 JavaScript 代码的字符串，该字符串导入 ES6 模块

javascript - 在浏览器中执行（导入）带有 JavaScript 代码的字符串，该字符串导入 ES6 模块

问题描述

我正在制作一个动态系统，该系统需要执行在浏览器应用程序（Edge 或 Chrome 最新版本）中动态生成的 JS 代码。从另一个例子来看，我已经做到了这一点：

async function doIt()
{
        let code = "";
        code += "import { MyClass } from './MyClass.js' ;\n";
        code += 'export default function hello() { console.log( "Hello World" ); console.log( MyClass.test() ); }';
        const dataUri = 'data:text/javascript;charset=utf-8,' + encodeURIComponent(code);
        let module = await import(dataUri);
        console.log(module); // property default contains function hello now
        const myHello = module.default;
        myHello(); // puts "Hello World" to console
}

MyClass.js 有一个简单的 ES6 模块类：

export class MyClass {
    static test() { return 42; }
}

当我在没有第二行的情况下使用 import 语句运行 doIt() 函数时，它运行良好，直到它尝试调用 MyClass.test() ，这当然是未知的。启用第二个导入行后，Edge 或 Chrome 会出现错误：

    "Uncaught TypeError: Failed to resolve module specifier './MyClass.js'. 
    Invalid relative url or base scheme isn't hierarchical."

我试图制作模块引用的绝对路径，但错误仍然相同。. 那么，如何使这项工作？或者也许是替代解决方案？但是使用 ES6 模块是一个硬性要求。

标签： javascriptdynamicimport

解决方案

回答我自己的问题： import() 似乎有些残缺，但一种解决方法是将所需的动态 JavaScript 放在当前 HTML 页面中新的临时脚本节点的 innerHTML 中。从那里，ES6 import 语句就可以正常执行了：

        var script = document.createElement( "script" );
        script.setAttribute( 'type', 'module' );
        script.innerHTML = 'import { MyClass } from "/App/MyClass.js"; \
                            someGlobalVar = MyClass.test();

由于它在全局范围内运行，因此您需要将结果存储在某个全局对象中。它可以通过在对象实例上实现回调函数来改进，但我把它留给读者作为练习。:-)

推荐阅读