Client Side Proxy using YQL

Proxy using YQL service to retrieve all the pages using Yahoo Pipelines, process it as JSON and render on page. This proxy also normalizes img tags with relative src values and routes all anchors through itself.

by dzejkej

HTML

<script src="https://raw.github.com/padolsey/jQuery-Plugins/master/cross-domain-ajax/jquery.xdomainajax.js"></script>
<label for="url">URL:</label><input id="url" name="url" type="text" placeholder="http://">
<hr>
<div id="page">
</div>

CSS

#page {
    margin-top: 20px;
}

JavaScript

function loadPage(url, path) {

    $.ajax({
        url: url,
        type: 'GET',
        success: function(data) {

            // load the content of the page
            var page = $('<div />').html(data.responseText);

            // normalize image links (only those that are local)
            page.find('img').not('[src^="http://"]').not('[src^="//"]').attr('src', function() {
                return path + $(this).attr('src');
            });

            // route links through loadPage()
            page.find('a').click(function(e) {
                e.preventDefault();

                loadPage($(this).attr('href'), path);
            });

            $('#page').html(page);
        }
    });

}

$(function() {

    $('#url').change(function() {
        var url = $('#url').val(),
            // extract base of the url (not the page itself) if possible
            path = (url.match("https?://(.+/)[^/]+$") || [null, url])[1];

        // load the input's URL
        loadPage(url, path);
    });

});