How to fiddle on any web page

Once you have a nice jQuery plugin for accessing any URL, it’s only natural that you start fiddling around with some web page here and there.

Lately I wanted to dominate the http://disco-tools.eu/disco2_portal/terms.php beast.. ehm.. page, which is home to the official European thesaurus of skills and competences. It’s a good starting point for projects related with education in Europe, but also worldwide. Even if it is far from perfect, it’s translated to many European languages (English, German, French, Czech, Hungarian, Italian, Lithuanian, Polish, Slovak, Spanish, Swedish) and it organizes around 9000 terms in each language.

Screen Shot 2014-06-05 at 11.13.33

My target is to be able to browse the thesaurus from the Result frame of jsFiddle.

First Attempt

I already showed that YQL is not the best choice for getting this URL, due to its inability to let stuff come through without correcting it before. So, I will still use my own proxy.

My first attempt (open in jsFiddle):

$(function() {
    
    $.proxyGet('http://disco-tools.eu/disco2_portal/terms.php', function(data) {
        
        $('body').append(data);
                
    }, 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(/
/gi,"r").replace(/
/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.19.50

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 *