zoukankan      html  css  js  c++  java
  • jQuerify Bookmarklet

    Reference: jQuerify
    Bookmarklet
    ,
    Updated jQuery Bookmarklet
    and
    Better, Stronger, Safer jQuerify Bookmarklet

    What is jQuerify Bookmarklet?

    A jQuerify Bookmarklet is a hyperlink that can be dragged into your bookmarks (or
    favorites) toolbar. Then, when you’re on a page that doesn’t have jQuery, all you
    have to do is click on the bookmarklet and you’ll be ready to play around with jQuery
    on that page through the browser’s console.

    This a simple jQuerify from the first article:

        <a href="javascript:var%20s=document.createElement('script');s.setAttribute('src',%20'http://jquery.com/src/jquery-latest.js');document.getElementsByTagName('body')[0].appendChild(s);alert('thank you for using jquery!');void(s);">
            jQuerify</a>
        

    The source code:

        <a href="javascript:var%20s=document.createElement('script');
        s.setAttribute('src',%20'http://jquery.com/src/jquery-latest.js');
        document.getElementsByTagName('body')[0].appendChild(s);
        alert('thank you for using jquery!');void(s);">jQuerify</a>
        

    Note: %20 here is the encode value of white space:

        decodeURIComponent("%20") === " "; // true
        

    Actually, when you click on the hyperlink or bookmarklet, you actually execute a
    piece of JavaScript code:

        var s=document.createElement('script');
        s.setAttribute('src', 'http://jquery.com/src/jquery-latest.js');
        document.getElementsByTagName('body')[0].appendChild(s);
        alert('thank you for using jquery!');
        

    The second article jQuerify Bookemarklet:

        <a href="javascript:(function(){var%20s=document.createElement('script');s.setAttribute('src','http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js');if(typeof%20jQuery!='undefined'){var%20msg='This%20page%20already%20using%20jQuery%20v'+jQuery.fn.jquery;}else{document.getElementsByTagName('head')[0].appendChild(s);var%20msg='This%20page%20is%20now%20jQuerified';}var%20el=document.createElement('div');el.style.position='fixed';el.style.height='30';el.style.width='200';el.style.margin='0%20auto%200%20auto';el.id='jq-kswedberg';el.style.top='0';el.style.left='40%';el.style.padding='5px%2010px%205px%2010px';el.style.backgroundColor='#f99';el.innerHTML=msg;var%20b=document.getElementsByTagName('body')[0];b.appendChild(el);window.setTimeout(function()%20{jQuery('#jq-kswedberg').fadeOut('slow',function(){jQuery(this).remove()});},2500);})();">
            jQuerify</a>
        

    The source code:

        (function() {
            var s = document.createElement('script');
            s.setAttribute('src', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js');
            if (typeof jQuery != 'undefined') {
                var msg = 'This page already using jQuery v' + jQuery.fn.jquery;
            } else {
                document.getElementsByTagName('head')[0].appendChild(s);
                var msg = 'This page is now jQuerified'
            }
            var el = document.createElement('div');
            el.style.position = 'fixed';
            el.style.height = '30';
            el.style.width = '200';
            el.style.margin = '0 auto 0 auto';
            el.id = 'jq-kswedberg';
            el.style.top = '0';
            el.style.left = '40%';
            el.style.padding = '5px 10px 5px 10px';
            el.style.backgroundColor = '#f99';
            el.innerHTML = msg;
            var b = document.getElementsByTagName('body')[0];
            b.appendChild(el);
            window.setTimeout(function() {
                jQuery('#jq-kswedberg').fadeOut('slow', function() {
                    jQuery(this).remove()
                });
            }, 2500);
        })();
        

    There script code works well, but i want to improve it.

    Because after we have loaded the jQuery library, we can show the message with the
    help of jQuery.

    My modified version:

         (function() {
            function showMessage(msg) {
                var msgNode = $("<span />").html(msg).css({
                    "background-color": "#F99",
                    "padding": 10,
                    "position": "fixed",
                    "top": 0
                }).appendTo("body");
                msgNode.css("left", ($("html, body").width() - msgNode.width()) / 2);
    
                window.setTimeout(function() {
                    msgNode.fadeOut("slow", function() {
                        $(this).remove();
                    });
                }, 2000);
            }
    
            var script = document.createElement("script");
            script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js");
            if (typeof (jQuery) != "undefined") {
                showMessage("This page already using jQuery v" + jQuery.fn.jquery);
            } else {
                document.getElementsByTagName("head")[0].appendChild(script);
                script.onload = function() {
                    showMessage("This page is now jQuerified");
                };
            }
        })();
        

    This is my verson of jQuerify:

        <a href='javascript:(function() {function showMessage(msg) {var msgNode = $("<span/>").html(msg).css({"background-color": "#F99","padding": 10,"position": "fixed","top": 0}).appendTo("body");msgNode.css("left", ($("html, body").width() - msgNode.width()) / 2);window.setTimeout(function() {msgNode.fadeOut("slow", function() {$(this).remove();});}, 2000);}var script = document.createElement("script");script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js");if (typeof (jQuery) != "undefined") {showMessage("This page already using jQuery v" + jQuery.fn.jquery);} else {document.getElementsByTagName("head")[0].appendChild(script);script.onload = function() {showMessage("This page is now jQuerified");};}})();void(0);'>
            My version of jQuerify</a>
        

    Everything seems ok until i move to IE, the message of “This page is now jQuerified”
    disappears.

    The reason is that script tag doesn’t support onload event.

    I have to set interval to check whether the jQuery has been loaded.

    Final version:

        (function() {
            function showMessage(msg) {
                var msgNode = $("").html(msg).css({
                    "background-color": "#F99",
                    "padding": 10,
                    "position": "fixed",
                    "top": 0
                }).appendTo("body");
                msgNode.css("left", ($("html, body").width() - msgNode.width()) / 2);
    
                window.setTimeout(function() {
                    msgNode.fadeOut("slow", function() {
                        $(this).remove();
                    });
                }, 2000);
            }
    
            var script = document.createElement("script");
            script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js");
            if (typeof (jQuery) != "undefined") {
                showMessage("This page already using jQuery v" + jQuery.fn.jquery);
            } else {
                document.getElementsByTagName("head")[0].appendChild(script);
                var timer = window.setInterval(function() {
                    if (typeof (jQuery) != "undefined") {
                        showMessage("This page is now jQuerified");
                        window.clearInterval(timer);
                    }
                }, 200);
            }
        })();
        
        <a href='javascript:(function() {function showMessage(msg) {var msgNode = $("<span/>").html(msg).css({"background-color": "#F99","padding": 10,"position": "fixed","top": 0}).appendTo("body");msgNode.css("left", ($("html, body").width() - msgNode.width()) / 2);window.setTimeout(function() {msgNode.fadeOut("slow", function() {$(this).remove();});}, 2000);}var script = document.createElement("script");script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js");if (typeof (jQuery) != "undefined") {showMessage("This page already using jQuery v" + jQuery.fn.jquery);} else {document.getElementsByTagName("head")[0].appendChild(script);var timer = window.setInterval(function() {if (typeof (jQuery) != "undefined") {showMessage("This page is now jQuerified");window.clearInterval(timer);}}, 200);}})();void(0);'>
            My Final version of jQuerify (support IE and Firefox)</a>
        

    How to use it?

    Just drag the link to your bookmark or favorites list. When you want to add jQuery support to a page, click the bookmarklet.

  • 相关阅读:
    emacs 编程入门 函数
    boost库介绍
    jquery css attr
    html 相对定位 绝对 定位 css + div
    我常用的grep
    我常用的tar
    C#皮肤的用法(皮肤资源+使用实例下载)
    C#资源文件操作示例 创建资源和读取资源
    黄聪:c#中高效的excel导入sqlserver的方法
    黄聪:Delphi 中的 XMLDocument 类详解(2) 记要
  • 原文地址:https://www.cnblogs.com/sanshi/p/1510367.html
Copyright © 2011-2022 走看看