How to fiddle on any web page

Third Attempt

Wow, much much better. Only one more error to take care of. Please notice that the page has downloaded its own jQuery 1.7.2, while before converting relative URLs to absolute, the current jQuery was 1.x (edge). I don’t like that very much, so I think we should downgrade jsFiddle‘s jQuery version to jQuery 1.7.2 (to be sure the page will find the same version) and at the same time we should remove from the page the script tag for jQuery 1.7.2. Let’s do it.

My third attempt (open in jsFiddle):

$(function() {
    
    $.proxyGet('http://disco-tools.eu/disco2_portal/terms.php', function(data) {
        
        remove_jquery_script()
        convert_relative_urls_to_absolute();
        $('body').append(data);
        
        //---
        
        function remove_jquery_script() {
            data = data.replace('<script src="javascript/jQuery_1.7.2.js" type="text/javascript"/>', '');
        }
        
        function convert_relative_urls_to_absolute() {
            data = data
                .replace(/ href="(?!(https?|#))/g,             ' href="http://disco-tools.eu/disco2_portal/')
                .replace(/ src="(?!https?)/g,                   ' src="http://disco-tools.eu/disco2_portal/')
                .replace(/ data-ajaxurl="(?!https?)/g, ' data-ajaxurl="http://disco-tools.eu/disco2_portal/');
        }
                
    }, my_proxy);

});


$.proxyGet=function(a,b,c){if(null!==a&&!/^(https?:|//)/.test(a))throw new SyntaxError("Expected a URL.");a&&0===a.indexOf("//")&&(a=window.location.protocol+a);var d={url:"http://query.yahooapis.com/v1/public/yql?q="+encodeURIComponent('select * from html where url="--URL--" and compat="html5" and xpath="*"')+"&format=xml",cleanup:function(a){return(a=a.results&&a.results[0])?a=a.replace(/&#xD;/gi,"r").replace(/&#xA;/gi,"n"):null},filter:null};c=$.extend(d,c||{});var e=c.url.replace("--URL--",encodeURIComponent(a))+"&callback=?";$.getJSON(e,function(a){$.isFunction(b)&&($.isFunction(c.cleanup)&&(a=c.cleanup(a),$.isFunction(c.filter)&&(a=c.filter(a))),b(a))})};

var my_proxy = {
    url: 'http://andowebsit.es/proxy/?url=--URL--&code=...',
    cleanup: function (data) {
        data = data.result;
        return (data ? data : null);
    }
};

produced this result:

Screen Shot 2014-06-05 at 10.42.40

which is the same as for the second attempt, but our fiddle is much cleaner inside.

2 Replies to “How to fiddle on any web page”

  1. Well, all of the above is true and should work not only in jsFiddle but also in any other Online JavaScript IDE [1]. But if you have Google Chrome, forget about all those tricks and use its Custom JavaScript Snippets [2] feature instead. It just works. It’s like having the power you get when developing extensions right from the console.

    1: http://en.wikipedia.org/wiki/Online_JavaScript_IDE
    2: https://developer.chrome.com/devtools/docs/authoring-development-workflow#snippets

Leave a Reply

Your email address will not be published. Required fields are marked *