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

Question

我制作了一个 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 中？

控制台错误

Answer 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" });
        });
    });
});

Answer 2

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

Answer 3

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

$.getScript("file address");

像这样：

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

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

问题描述

3 个解决方案

解决方案1
1 已采纳 2020-01-26 03:29:14

解决方案2
0 2020-01-26 03:29:52

解决方案3
0 2020-01-26 05:07:00

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

问题描述

3 个解决方案

解决方案1 1 已采纳 2020-01-26 03:29:14

解决方案2 0 2020-01-26 03:29:52

解决方案3 0 2020-01-26 05:07:00

解决方案1
1 已采纳 2020-01-26 03:29:14

解决方案2
0 2020-01-26 03:29:52

解决方案3
0 2020-01-26 05:07:00