为什么脚本在Firebug的命令行中在一个站点上工作而在另一个站点上不工作？

我使用Firefox和Firebug的命令行在两个不同的站点上执行JavaScript：

1. https://graph.facebook.com/v2.3/172727819415642/albums?fields=id,name,cover_photo,photos%7Bname,source%7D&limit=1&access_token=xxxxx
2. http://www.iskcondesiretree.com/photo/album/list

这是代码：

(function() { function r() { a = $("body").text() console.log(a); }; var e = "1.6.4"; var t = false; if (!t) { t = true; var n = document.createElement("script"); n.src = "https://ajax.googleapis.com/ajax/libs/jquery/" + e + "/jquery.min.js"; n.onload = function() { r(); }; document.getElementsByTagName("head")[0].appendChild(n); }; })(); 

当我在站点1上的Firebug命令行中运行此代码时，它返回以下错误：

TypeError：$（…）。text（）不是函数

当我运行这个代码站点2它工作正常。 它显示了网站上的大量文字。

有趣的是，如果我将$更改$ jQuery它也可以在站点1上运行。

谁能告诉我们发生了什么？ 为什么Firebug对这两个站点的行为有所不同？

Answer 1

在页面加载到站点1时，Firebug的命令行已在内部使用美元符号。如果页面自行设置$变量，Firebug将尝试使用该变量而不是自己的$命令 ，这是这种情况在网站2上。

要避免任何此类冲突，您应该在要访问jQueryfunction时在命令行中使用jQuery而不是$ 。

您的代码将如下所示：

 (function() { function r() { a = jQuery("pre").text(); console.log(a); b = a.replace(/this is a nice car/g, "happy birthday"); console.log(b); }; var e = "1.6.4"; var t = false; if (!t) { t = true; var n = document.createElement("script"); n.src = "https://ajax.googleapis.com/ajax/libs/jquery/" + e + "/jquery.min.js"; n.onload = function() { r(); }; document.getElementsByTagName("head")[0].appendChild(n); }; })(); 

注意：上面的代码通过在发出请求之前检查t变量来避免双重加载jQuery。 并且删除了onreadystatechange和readystate的错误使用，因为它们仅适用于XmlHTTPRequest ，而不适用于附加的标记。

Answer 2

尝试将jquery函数放在document ready事件中。

这样的 –

 $(document).ready(function(){ // jQuery methods go here... }); 

这是为了防止在文档加载完成之前运行任何jQuery代码（准备就绪）。

Answer 3

在console ，试试

 document.write("
This is a nice car.
"); (function jq() { function r() { var a = jQuery("pre").text(); console.log(a); var b = a.replace(/this is a nice car/gi,"happy birthday"); console.log(b); }; var timeout; var check = window.jQuery; return !(check === undefined ? (function() { callback = function() { timeout = setTimeout(function() { clearTimeout(timeout); timeout = null; return !!window.jQuery ? r() : callback() }, 1000); }; var e = "1.6.4"; var url = "https://ajax.googleapis.com/ajax/libs/jquery/" + e + "/jquery.min.js"; var status = false; var head = document.getElementsByTagName("head")[0]; var script = document.createElement("script"); script.type = "application/javascript"; script.async = "async"; script.id = "jq"; script.onload = callback; script.src = url; head.insertBefore(script, head.firstChild); console.log("loading "+ script.src + " at " + new Date().toJSON()); }()) : r()); }()); 

Answer 4

你的代码在chrome下适合我。 只需在事件注册前将脚本标记附加到头部。

更新：在FireFox 37.0.2上测试

只需将以下内容粘贴到FireFox标准开发工具的控制台中即可。

 (function() { function performAction() { console.log("perform action called"); var $body = $("body"); $body.empty(); $body.append( $('
').append( $('').text("I like to drive cars"), $('
').html('the above vehicle will be replaced in 3 seconds!') ) ); setTimeout(function(){ var $iSentence = $("#jqHook i"); var iSentenceTXT = $iSentence.text(); var iSentenceTXT = iSentenceTXT.replace(/car/g, "motorbike"); $iSentence.fadeOut(function(){ $(this).html(iSentenceTXT).fadeIn(function(){ console.log('modification performed !'); }); }); },3000); }; var e = "1.6.4"; var t = false; var n = document.createElement("script"); n.src = "https://ajax.googleapis.com/ajax/libs/jquery/" + e + "/jquery.min.js"; document.getElementsByTagName("head")[0].appendChild(n); n.onload = n.onreadystatechange = function() { if (!t && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete")) { performAction(); }; }; })();