How to fiddle on any web page

Sixth Attempt

Above is what you get in the console after clicking the first three nodes. While the first two of them really expanded (changing from plus to minus), the last one (aesthetic sensitivity) did not.

Hm, well.. it seems some relative URLs still need to be converted to absolute. But they must be in the scripts, because all the URLs in the page are already converted. In fact, if we look at the last file onLoad.js, we soon discover a pattern like this:

$.getJSON("ajax/ajaxCalls.php", ...

That is what is causing us troubles, and the pattern occurs again and again also in the other scripts. To solve this problem, the plan is to intercept all ajax calls and if they entail a URL containing ajax/ajaxCalls.php then we redirect them to $.proxyGet().

My sixth attempt (open in jsFiddle):

$(function() {
    
    $.proxyGet('http://disco-tools.eu/disco2_portal/terms.php', function(data) {
        
        $.ajaxSetup({
            beforeSend: useProxyWhenNeeded()
        });
        
        convert_relative_urls_to_absolute();
        var remote_scripts = remove_scripts();
        $('body').append(data);
        remote_scripts.shift();  // ignore jQuery
        yepnope({load: remote_scripts});
        remove_noise();
        
        //---
        
        function useProxyWhenNeeded() {
            var reqno = 0;
            return function( jqXHR, settings ) {
                var url = settings.url;
                console.log('Request ' + (++reqno) + ': ' + settings.type + ' ' + url + ' .');
                if (url.indexOf('ajax/ajaxCalls.php') == 0) {
                    url = 'http://disco-tools.eu/disco2_portal/' + url;
                }
                var needs_proxy = url.indexOf('http://disco-tools.eu/disco2_portal/ajax/ajaxCalls.php') == 0;
                if (needs_proxy) {
                    console.log('Proxying ' + url + ' .');
                    //debugger;
                    $.proxyGet(url, settings.success, $.extend(my_proxy, { 
                        filter: function(data) {
                            return data ? JSON.parse(data) : null;
                        }
                    }));
                    return false;
                }
            }
        }
        
        function remove_noise() {
            $('.mainNavi, .subNavi, #SpalteMitte, #SpalteRechts, .searchWrapper, .footer, .bannerWrapper, .contentHeader').remove();
        }
        
        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 11.02.32

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 *