如何在没有 html 的 js 文件中包含 jQuery答案

【问题标题】：How do I include jQuery in my js file without html如何在没有 html 的 js 文件中包含 jQuery
【发布时间】：2020-01-26 13:07:00
【问题描述】：

我做了一个 chrome 扩展，我的弹出按钮调用了一个脚本。另一个脚本使用 jQuery，但我收到一条错误消息，提示未定义 jQuery。

我的popup.html：

<!DOCTYPE html>
<html>
    <head>
        <title>HomAttendance</title>
    </head>
    <body>
        <h1 style="color:#E54E4E">Hom<span style="color:#4E97E5">Attendance</span></h1>
        <button type id="record" style="background-color:White"><h1 style="color:Black">Record Attendance</h1></button>
    </body>
    <script src="jquery-3.4.1.min.js"></script>
    <script src="popup.js"></script>
</html>

我的 popup.js：

document.addEventListener('DOMContentLoaded', function() {
  var login = document.getElementById('record');
  login.addEventListener('click', function() {
    chrome.tabs.executeScript({file: 'markStudents.js'});
  });
});

myScript.js：

var arrays = []
$.get('Attendance.txt', function(data){

    var splitted = data.split("\n"); // --> should return an array for each line 

    // Loop through all lines 
    for(var i = 0; i < splitted.length; i++) 
    {

        var line = splitted[i]; 

        // Now you could remove [ and ] from string  
        var removed = line.replace('[','').replace(']','');
        var refined = removed.replace(' ', '');

        // Now you can split all values by using , delimiter
        var values = refined.split(',');  
        var array = [];
        // Now you can iterate through all values and add them to your array
        for(var c = 0; c < values.length; c++) 
        {
            var value = values[c]; 
            array.push(value);
        }
        arrays.push(array);
    }
});
var present = arrays[0];
console.log(present);
var absent = arrays[1];
console.log(absent);

var user = present[0];
var pass = absent[0];
var loginField = document.getElementById('fieldAccount');
var passwordField = document.getElementById('fieldPassword');
loginField.value = user;
passwordField.value = pass;
var loginForm = document.getElementById('btn-enter-sign-in');

有没有办法将我的 jquery.js 包含在 myScript.js 中？

Console Error

【问题讨论】：

标签： javascript google-chrome-extension

【解决方案1】：

在导入 popup.js 之前导入 jquery

像这样

<!DOCTYPE html>
<html>
    <head>
        <title>HomAttendance</title>
    </head>
    <body>
        <h1 style="color:#E54E4E">Hom<span style="color:#4E97E5">Attendance</span></h1>
        <button type id="record" style="background-color:White"><h1 style="color:Black">Record Attendance</h1></button>
    </body>
    <script src="jquery-3.4.1.min.js"></script>
    <script src="popup.js"></script>
</html>

在你的 popup.js 中，当你加载使用 jQuery 的 markStudents.js 时，你必须再次在之前加载 jQuery

像这样

document.addEventListener('DOMContentLoaded', function () {
    var login = document.getElementById('record');
    login.addEventListener('click', function () {
        chrome.tabs.executeScript(null, { file: "jquery-3.4.1.min.js" }, function () {
            chrome.tabs.executeScript(null, { file: "markStudents.js" });
        });
    });
});

【讨论】：

它工作了一秒钟，但它不再工作了。现在它说 $ 没有定义。
检查您的控制台并查看您是否没有拼写错误或为脚本输入错误路径
好吧 myScript.js 不在 HTML 文件中，只有 popup.js 和 jquery。一切似乎都拼写正确。
如果您共享的这个 html 是您拥有的唯一代码，并且两个脚本都在根路径上正确找到，我没有看到问题，请分享您的完整控制台错误屏幕截图以供参考
我编辑了帖子以获得我的其他脚本，并附上了错误的屏幕截图

【解决方案2】：

只需重新排序您的脚本标签并将 jQuery 放在您的 popup.js 之前。这样，当您尝试调用它时，它将被加载。

【讨论】：

【解决方案3】：

您可以使用此代码在您的 jquery 中包含另一个 jquery 文件：

$.getScript("file address");

像这样：

$.getScript("/assets/pages/scripts/ui-blockui.min.js");

【讨论】：