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

时间:2011-12-14 17:01:05

标签: jquery plugins browser

是否有一些编程方式或浏览器插件允许用户在浏览器中当前加载的网页上随意运行他们想要的任何jQuery?

修改

我的动机是能够在页面上提前测试jQuery语法和命令,然后将它们添加到源代码或建议调整我试验过的页面的webadmin。

8 个答案:

答案 0 :(得分:22)

您可以使用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,以便您轻松编写脚本并破解其他人的页面。

答案 1 :(得分:13)

这使用Google CDN,它的HTTP友好,单行,并且包装:

(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

答案 2 :(得分:4)

FireQuery是一个很棒的Firebug扩展,可以包含jQuery,从那里你可以在你的控制台中使用jQuery。

“jQuerify:允许您将jQuery注入任何网页”

答案 3 :(得分:2)

我编写了一个书签,用于检查文档的jQuery,如果它尚不存在则将其添加到<head>,如果jQuery是通过脚本加载的,或者已经存在,则显示通知(使用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();});
        }
    }
})();

答案 4 :(得分:2)

为了方便注入(并表明它已经存在) jQuery in Chrome ,甚至进入 HTTPS 页面 no-conflict < / strong>模式到原型(表示原型是否也存在于页面上)您可能更喜欢 jQuerify 扩展名(jQuerify for Chrome)的质量已被证明在多年的经验期间,数千名用户。用一句话说:“节省您的时间”。

答案 5 :(得分:0)

要在firefox中进行开发,您可以将FirebugFireQuery一起使用。

答案 6 :(得分:0)

检查出来:

jQuery Bookmarklet Generator http://benalman.com/projects/run-jquery-code-bookmarklet/

答案 7 :(得分:-1)

eval执行您传递的任何字符串,但如果其使用“正确”,则为contested

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

将在文档就绪时显示警告(前提是在调用eval之前获取jQuery)。