How to fiddle on any web page

Fifth Attempt

As you see, even if yepnope seems to use some unorthodox method, we get exactly what we were looking for: ordered execution. And the error is definitely gone !

Now, let’s get rid of the noise. I’m only interested in browsing the thesaurus, so all other stuff around it is just noise to me.

My fifth 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});
        remove_noise();
        
        //---
        
        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 10.55.57

No errors in the console. No useless decoration. All done. You can even expand children and it just work!

Oops, no. Too soon.

Screen Shot 2014-06-05 at 10.58.14

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 *