无法使用动态加载的 JavaScript 文件中的函数答案

【问题标题】：Cannot use functions from dynamically loaded JavaScript file无法使用动态加载的 JavaScript 文件中的函数
【发布时间】：2021-08-11 21:42:02
【问题描述】：

如何从chrome扩展js文件加载的外部动态JavaScript文件调用函数？

我正在加载一个外部 JavaScript 文件，如下所示：

 var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = 'http://127.0.0.1:8081/index2.js';
    script.onload = function(){
        alert("Script is ready!");
        window.top.sayHi();
        console.log('test');
    };
    document.body.appendChild(script);

我收到警报的问题（“脚本已准备好！”）；但得到 window.top.sayHi();不是函数，我也试过只写sayHi();但它不起作用。

外部 JavaScript 文件：

alert('hello5');

export function sayHi(user) {
  alert(`Hello, ${user}!`);
}

警报('hello5');叫做顺便说一句，我是从 iframe 运行我的代码

以下代码也不起作用：

 if (script.readyState) { //IE
        script.onreadystatechange = function() {
            if (script.readyState === "loaded" || script.readyState === "complete") {
                script.onreadystatechange = null;
                console.log("[BANDEAU] script loaded");
                alert('in1');
                sayHi(); // window.top.testAlert() if needed
            }
        };
    }
    else {
        script.onload = function() {
            console.log("[BANDEAU] script loaded");
            alert('in2');
            sayHi();
        };
    }

【问题讨论】：

您的外部文件是ES module，因此您应该导入它。整个代码将是 import('http://......').then(m => { m.sayHi() })

标签： javascript google-chrome-extension

【解决方案1】：

export smth 是javascript modules 的语法。如果您想解决在纯 javascript 脚本中加载的函数，则应使其可从全局范围访问。例如，这应该可以按预期工作：

// example.js

alert('hello5');

self.sayHi = function sayHi(user) {
  alert(`Hello, ${user}!`);
}

【讨论】：

【解决方案2】：

这个post 将帮助您解决已经回答的所有困惑。请调查一下。谢谢

【讨论】：