How to fiddle on any web page

Fourth Attempt

You’ve probably noticed already that the last error in the console comes and goes. It depends on wether the javascript files get loaded from their remote location or from the browser’s cache. The error only appears in the former case, and it means that even if the script tags are getting appended in order, they are not getting executed in order, unless they don’t need to be downloaded at all.

This becomes interesting. To get rid of that error, we must guarantee that all scripts are always executed in order. Any combination of $.getScript(url, callback) won’t work because one of its features is that “The callback is fired once the script has been loaded but not necessarily executed.

For this task I used then yepnope.js, a JavaScript library which instead “always executes things in the order they are listed“. So the plan is to remove all the scripts from the downloaded HTML, pretty much like we did with jQuery, and then make yepnope load and execute them in order.

My fourth attempt (open in jsFiddle):

$(function() {
    
    $.proxyGet('http://disco-tools.eu/disco2_portal/terms.php', function(data) {
        
        convert_relative_urls_to_absolute();
        var remote_scripts = remove_scripts();
        $('body').append(data);
        remote_scripts.shift();  // ignore jQuery
        yepnope({load: remote_scripts});
        
        //---
        
        function remove_scripts() {
            var remote_scripts = [];
            data = data.replace(/<scriptb[^>]*></script>|<scriptb[^>]*/>/g, function(all) {
                var url = all.match(/bsrc[^=]*=[^"]*"([^"]+)"/i)[1];
                if (url) {
                    remote_scripts.push(url);
                }
                return '';
            });
            return remote_scripts;
        }
        
        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.51.30

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 *