如何在浏览器的任何页面上直接运行 jQuery？答案

【问题标题】：How to run jQuery directly on any page in the browser?如何在浏览器的任何页面上直接运行 jQuery？
【发布时间】：2011-12-14 17:01:04
【问题描述】：

是否有某种程序化方式（或者可能是浏览器插件）允许用户在当前加载在浏览器中的网页上任意运行他们想要的任何 jQuery？

编辑：

我的动机是能够提前在页面上测试 jQuery 语法和命令，然后将它们添加到其源代码中，或者向我尝试过的页面的 web 管理员提出调整建议。

我一直在使用主站点的 jQuery 来运行测试。目前在 3.5.1 上：jQuery download page

【问题讨论】：

Chrome 中有一个插件，你可以使用 Greasemonkey for firefox。我不确定 IE
这里有浏览器内置的 JavaScript 控制台（通常是 Ctrl+Shift+J），或者FireBug，或者你可以在地址栏中输入javascript:alert('hi');。要加载 jQuery，您可以使用 jQuerify Bookmarklet。你到底想做什么（或阻止）？

标签： jquery browser plugins google-developer-tools web-console

【解决方案1】：

您可以使用 Chrome 的控制台来执行此操作。如果您使用的是 Chrome，请右键单击该页面，然后单击“检查元素”。转到“控制台”选项卡并尝试运行$ === jQuery。如果你没有收到错误并且结果是true，那么你就得到了 jQuery。

如果没有，请运行以下命令将 jQuery 添加到页面：

var body = document.getElementsByTagName("body")[0];
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js";
body.appendChild(script);

运行这些命令后，jQuery 应该被加载到任何网页并准备好在控制台中使用:)

上面的代码应该适用于任何带有 JavaScript 控制台的浏览器。

另外，还有一些用户脚本（如 Greasemonkey 和 FireQuery），如果页面中不包含 jQuery，它们会自动运行上述代码以注入 jQuery，以便您轻松编写脚本和破解其他人的页面。

【讨论】：

另外，你可以使用我的新用户脚本jQuerify。
您的 5 行代码对我来说非常有用。当我将您的 jQuerify 代码粘贴到我的 Chrome 控制台并执行它时，它不起作用。这些 cmets 不支持换行符，但这是我的控制台中出现的内容，以 jQuerify 底部的“document.getElementsByTagName”开头： document.getElementsByTagName("body")[0].appendChild(script); } true $ === jQuery ReferenceError: jQuery is not defined

【解决方案2】：

这使用了 Google CDN，它是 HTTPs 友好的、单行的和封装的：

(function(){var jQueryVersion="1";var a=document.createElement("script");a.src="//ajax.googleapis.com/ajax/libs/jquery/"+jQueryVersion+"/jquery.js";a.type="text/javascript";document.getElementsByTagName("head")[0].appendChild(a);})()

您可以指定 jQuery 的版本，例如jQueryVersion="2.0.2"。

所有版本都列在developers.google.com/speed/libraries/devguide。

【讨论】：

【解决方案3】：

FireQuery 是一个很棒的 Firebug 扩展，它可以为您包含 jQuery，然后您就可以在控制台中使用 jQuery。

“jQuerify：使您能够将 jQuery 注入任何网页”

【讨论】：

我知道有类似的答案，但我不知道谁先回答（请原谅我），我只是做出了选择......这是有帮助的方法。

【解决方案4】：

为了方便注入（并表明它的存在）jQuery in Chrome，甚至是无冲突HTTPS页面/strong> 模式到 Prototype （表明 Prototype 是否也存在于页面上）您可能更喜欢 jQuerify 扩展 (jQuerify for Chrome) 的质量由 数以千计的用户在几年的经验。一句话：“节省您的时间”。

【讨论】：

这个！不知道为什么它没有被评为更高，只是尝试了一下，它对于测试页面上的一行或 2 行绝对棒极了。谢谢！
感谢您的赞赏！我很高兴你喜欢它。
没问题，我希望我早点遇到这样的事情，因为选择器错误，我坐在那里挠头的次数，我坚持所有这些 console.log 行尝试和找出到底是什么坏了，当在实时网站上而不是在本地工作时，这可以节省大量时间，而不必重新上传文件和进行缓存刷新。

【解决方案5】：

我编写了一个小书签，用于检查文档中是否有 jQuery，如果它不存在则将其添加到 <head>，如果 jQuery 是通过脚本加载或已经存在于文档。只需将此代码添加到您的书签即可获得该功能：

javascript: (function() 
{
    var body = document.getElementsByTagName("body")[0];
    var head = document.getElementsByTagName("head")[0];
    var el = document.createElement('div');
    el.id = 'jqbkstatusnote';
    el.style.position = 'fixed';
    el.style.top = '10px';
    el.style.left = '10px';
    el.style.textAlign = 'center';
    el.style.color = '#fff';
    el.style.padding = '3px';
    el.style.fontWeight = 'bold';
    el.style.display = 'none';
    el.style.zIndex = '999999999';
    el.style.boxShadow = '0px 0px 0px 1px #fff, 3px 3px 1px rgba(0,0,0,0.5)';
    if (typeof jQuery != 'function')
    {
        var script = document.createElement('script');
        script.type = "text/javascript";
        script.src = "http://code.jquery.com/jquery-latest.min.js";
        head.appendChild(script);
        waitForJQ();        
    }
    else
    {
        el.style.border = '1px solid #522';
        el.style.backgroundColor = '#744';
        el.innerHTML = 'jQuery already exists in this document!';
        body.appendChild(el);
        jQuery('#jqbkstatusnote').fadeIn().delay(1000).fadeOut(function(){jQuery(this).remove();}); 
    }
    function waitForJQ() 
    {
        if (typeof jQuery != 'function')
        {
            window.setTimeout(waitForJQ, 100);
        }
        else
        {
            el.style.border = '1px solid #235';
            el.style.backgroundColor = '#457';
            el.innerHTML = 'jQuery added to document!';
            body.appendChild(el);
            jQuery('#jqbkstatusnote').fadeIn().delay(1000).fadeOut(function(){jQuery(this).remove();});
        }
    }
})();

【讨论】：

【解决方案6】：

对于 Firefox 中的开发，您可以使用 Firebug 和 FireQuery。

【讨论】：

【解决方案7】：

看看这个：

jQuery 书签生成器 http://benalman.com/projects/run-jquery-code-bookmarklet/

【讨论】：

【解决方案8】：

eval 执行您传递给它的任何字符串，但如果它的用法是“正确”，则为 contested。

eval('$(function() { alert("hello"); }');

将在文档就绪时显示警报（前提是在调用 eval 之前获取 jQuery）。

【讨论】：