Chrome 控制台行为答案

【问题标题】：Chrome console behaviourChrome 控制台行为
【发布时间】：2016-09-22 07:46:44
【问题描述】：

我通过控制台 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') 总是返回[]；但是在页面上有很多带有“第一”类的标签。控制台似乎在等待更新？还是什么？

【问题讨论】：

这是一个奇怪的行为，因为position() 返回一个包含集合中第一个元素的位置的对象，或者undefined。从来没有一个数组。示例：jsfiddle.net/korwm03L。另外，xPosition 和 yPosition 来自哪里？
@RoryMcCrossan，它来自 $('.first').position()。手动从 xPosition 和 yPosition 中的函数返回的简单输入坐标。
jQuery.noConflict(); 不会报错？
@passion，效果很好。
@A191919 我在我的 chrome 中运行它，告诉我jQuery undefined ...这怎么可能，我猜它是异步的。

标签： javascript jquery google-chrome google-chrome-devtools

【解决方案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);

【讨论】：