Question

I have a html page on my localhost – get_description.html.

The snippet below is part of the code:

<input type="text" id="url"/>
<button id="get_description_button">Get description</button>
<iframe id="description_container" src="#"/>

When the button is clicked the src of the iframe is set to the url entered in the textbox. The pages fetched this way are very big with lots of linked files. What I am interested in the page is a block of text contained in a <div id="description"> element.

Is there a way to mitigate downloading of resources linked in the page that loads into the iframe?

I don’t want to use curl because the data is only available to logged in users and the steps to take with curl to get the content is too complicated. The iframe is simple as I use this on a box which sends the right cookies to identify the request as coming from a logged in user, but the problem is that it is very wasteful to get nearly 1 MB of data to keep 1 KB of it and throw out the rest.

Edit

If the proposed method just works in Firefox it is fine, so I added Firefox tag. Also, it is possible that the answer actually is from the realm of Firefox add-on techniques, so I added that tag as well.

The problem is not that I cannot get at what I’m looking for, rather, the problem is the easy iframe method is wasteful.

I know that Firefox does allow loading only the text of a page. If you open a page and press Ctrl+U you are taken to ‘view page source’ window, There links behave as normal and are clickable, if you click on a link in source view, the source of the new page is loaded into the view source window, without the linked resources being downloaded, exactly what I’m trying to get. But I don’t know how to access this behaviour.

Another example is the Adblock add-on. It somehow kills elements before they get loaded. With plain Javascript this is not possible. Because it only is triggered too late to intervene in good time.

Answer 1

Actually I’ve seen Cross Domain jQuery .load request before, here: http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/

The author claims that codes like these found on that page

$('#container').load('http://google.com'); // SERIOUSLY!

$.ajax({
    url: 'http://news.bbc.co.uk',
    type: 'GET',
    success: function(res) {
        var headline = $(res.responseText).find('a.tsh').text();
        alert(headline);
    }
});

// Works with $.get too!

would work. (The BBC code might not work because of the recent redesign, but you get the idea)

Apparently it is using YQL wrapped into a jQuery plugin to do the trick. Now I cannot say I fully understand what he is doing there but it appears to work, and fits the bill. Once you load the data I suppose it is a simple matter of filtering out the data that you need.

If you prefer something that works at the browser level, may I suggest Mozilla’s Jetpack framework for lightweight extensions. I’ve not yet read the documentations in its entirety but it should contain the APIs needed for this to work.