Question

我有一个网站，我无法访问源代码，但我可以使用Javascript操作它。我有一个名为main.js的文件，它已被包含在我可以访问的包含的最后，我想在该文件中运行我的自定义Javascript代码。我有一个.JS文件，我的服务器上有一个名为helloWorld()的函数，我希望在任何$(document).ready()回调触发之前加载该函数，因为我的网站上有一个$(document).ready()函数页面/页面使用此功能。

自定义.JS文件：

function helloWorld()
{
alert("Hello World");
}

服务器上的

main.js文件（可访问）：

//All the JS code that the website uses
..

// My custom javascript code that includes my custom .JS file
$.getScript("helloWorld.js", function()
{
   // Use anything defined in the loaded script...
});

现在我希望在页面加载时以及在任何helloWorld()函数触发之前加载$(document).ready()。我知道在页面加载时加载此.JS文件可能会减慢页面加载速度。是否有防弹方式确保我的自定义javascript函数将在任何$(document).ready()之前加载？如果有任何其他方式我可以实现这一点，请告诉我。期待您的建议。

Answer 1

看起来我找到了解决问题的方法。我不会建议它，但这是在DOMContentLoaded事件触发之前从另一个脚本加载外部脚本的唯一方法。

解决方案

由于您的main.js脚本位于文档的<head>中，因此可以确保它将在DOM的任何后续部分之前加载和执行。鉴于此，您可以使用同步XMLHttpRequest加载脚本并执行。

这种技术有一些优点和缺点：

优点：您可以在DOMContentLoaded之前加载和执行任何脚本，也可以按顺序加载和执行多个脚本。
缺点：您的文档将被冻结，直到请求完成为止。

同样糟糕，如果您的脚本不是很大，它不会对加载时间产生很大影响。我们仍然可以做到。

实施

首先，请确保您的custom.js脚本通过始终可以访问的链接提供，以便您的请求不会失败。另外，请确保您的main.js脚本没有async或defer属性，以便始终在<head> DOMContentLoaded之前执行 <script src="main.js" defer></script> <script src="main.js" async></script>  <script src="main.js"></script>事件

main.js

现在您已经准备好了，在XMLHttpRequest脚本中，您需要：

创建并初始化同步send()对象，并GET content.js个<script>脚本请求。
创建一个.responseText元素，并将请求的结果（存储在请求对象的<head>属性中）放入其中。
将脚本附加到<script>以使其在加载DOM之前运行。

另外，如果您还希望在执行后立即删除脚本（因此用户无法看到），您可以：

运行代码后从文档中删除onload。您需要为此监听function事件。

此外，如果要使代码完全匿名运行，可以将其包装在匿名main.js内，以防止从全局范围访问它。

以下是您在(function() { // Create the request and the script var xhr = new XMLHttpRequest(), s = document.createElement('script'); // Send the request to retrieve custom.js xhr.open('GET', 'path/to/custom.js', false); xhr.send(); // Listen for onload, and remove the script after execution s.addEventListener("load", function(e) { s.parentElement.removeChild(s); }); // Load the code inside the script and run it in the head s.textContent = xhr.responseText; document.head.appendChild(s); })();文件中需要执行的操作的快速示例：

custom.js

现在你的DOMContentLoaded脚本将（匿名）在<td>之前运行，任务完成！

Answer 2

据我所知，有多种方法可以做到这一点，但最好的方法是使用诸如Require.js或CommonJS之类的东西来解析你的依赖关系，连接它们，并发布生成的连接的javascript文件（或许多，如果你可以将你的应用分为多个部分）。

不太好的方法是使用主脚本通过添加脚本标记来加载其他脚本，这样就可以确保它在那里加载其他脚本。

确保我的.JS文件每次都加载到其他人之前

2 个答案:

解决方案

实施