Chrome控制台行为

Question

我通过控制台jquery注入：

var jq = document.createElement('script');

jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";

document.getElementsByTagName('head')[0].appendChild(jq);

jQuery.noConflict();

然后我使用一些jquery命令

$('.first').position()
document.elementFromPoint(xPosition, yPosition).click();

模拟后，在浏览器中点击页面，重新加载。而且$('.first')总是返回[]；但是在页面上有很多带有'first‘类的标签。看起来控制台正在等待更新？不然呢？

Answer 1

appendChild正在将一个脚本元素加载到DOM中，然后该脚本标记将下载设置为其src属性的文件。但是这个下载需要时间。它是异步的。

var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);

因此，当您尝试在javascript中立即访问jQuery时，该文件尚未下载。想象一下，下载文件花了一个小时。在使用该代码之前，您需要等待文件已完成下载的通知。有许多方法可以考虑这一点，比如使用间隔来检查全局变量是否存在，但我认为最简单的方法是使用onload事件。

var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
jq.onload = function(){
  //do stuff using jquery
}
document.getElementsByTagName('head')[0].appendChild(jq);