Javascript 有没有办法动态加载本地JS文件?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10611796/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 02:08:53  来源:igfitidea点击:

Is there any way to load a local JS file dynamically?

javascriptgoogle-chrome

提问by Manishearth

For development purposes, I'd like to be able to easily load locally-stored scripts into the browser instead of having to copy-paste to the console.

出于开发目的,我希望能够轻松地将本地存储的脚本加载到浏览器中,而不必复制粘贴到控制台。

Creating a new <script>element isn't working, it gives a Not allowed to load local resource: file://....error (in Chrome).

创建新<script>元素不起作用,它会出现Not allowed to load local resource: file://....错误(在 Chrome 中)。

Also, creating a userscript won't work--I'd have to re-install it every time I make an edit.

此外,创建用户脚本将不起作用——每次进​​行编辑时我都必须重新安装它。

Is there an alternative way to easily load a local script via a bookmarklet/etc?

有没有其他方法可以通过书签/等轻松加载本地脚本?

回答by apsillers

In Chrome, you can create an extension that holds all of the local files that you need to load. It will make your files accessible via chrome-extension://...instead of file://...

在 Chrome 中,您可以创建一个扩展程序来保存您需要加载的所有本地文件。它将使您的文件通过chrome-extension://...而不是file://...

Make a file named manifest.jsonin a new folder and fill it with:

创建一个manifest.json在新文件夹中命名的文件并填充:

{
  "name": "File holder",
  "manifest_version": 2,
  "version": "1.0",
  "web_accessible_resources": ["test.js", "other.js", "yetanother.js"]
}

Then, put all the scripts you want to load in that new directory, and make sure they are included in the web_accessbile_reourcesmanifest list. Load the extension by going to chrome://extensions, enabling Developer Mode, and selecting the new folder with Load unpacked extension....

然后,将您要加载的所有脚本放在该新目录中,并确保它们包含在web_accessbile_reources清单列表中。通过转到chrome://extensions、启用Developer Mode和选择新文件夹来加载扩展Load unpacked extension...

Now you can access all the files in your extension directory using chrome-extension://[app_id]/[file_name], where "app_id" is the hash listed for the extension on the chrome://extensionspage. Note that because the protocols and hostnames differ from where you've doing your actual work (unless you decide to do all your development in the extension folder, which might be acceptable to you), the extension resources are cross-domain and can only be loaded via <script>tag.

现在,您可以使用 访问扩展目录中的所有文件chrome-extension://[app_id]/[file_name],其中“ app_id”是chrome://extensions页面上为扩展列出的哈希值。请注意,由于协议和主机名与您进行实际工作的位置不同(除非您决定在扩展文件夹中进行所有开发,这可能是您可以接受的),因此扩展资源是跨域的,并且只能是通过<script>标签加载。

Now from the console, you can do:

现在从控制台,您可以执行以下操作:

var s = document.createElement("script");
s.src = "chrome-extension://aefigdoelbemgaedgkcjpcnilbgagpcn/test.js";
document.body.appendChild(s);

(Assuming your file is test.jsand your app id is aefigdoelbemgaedgkcjpcnilbgagpcn.)

(假设您的文件是test.js并且您的应用程序 ID 是aefigdoelbemgaedgkcjpcnilbgagpcn。)

It's a quite bit to type, I know, but perhaps you can store the chrome-extension://[app_id]part as a shorthand variable?

我知道打字有点麻烦,但也许您可以将chrome-extension://[app_id]部分存储为速记变量?

回答by maerics

Sadly, Chrome doesn't allow you to load local files via AJAX; however, you can work around this limitation by launching the browser with the flag --disable-web-security(details vary per host operating system).

遗憾的是,Chrome 不允许您通过 AJAX 加载本地文件;但是,您可以通过启动带有标志的浏览器来解决此限制--disable-web-security(详细信息因主机操作系统而异)。

回答by mostafa amiri

you need to run local http server

你需要运行本地http服务器

this is a good document for this:

这是一个很好的文档:

https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server

https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server

回答by JDev

Have you tried a relative path from your page to your js file liek so...

src='/js/javascript.js'

你有没有试过从你的页面到你的 js 文件的相对路径,所以......

src='/js/javascript.js'