Is there a way to reduce resource loading (image / CSS and JS files) using Javascript?

Question

I have an HTML page on my local get_description.html- 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 srciframe is set to the URL entered in the text box. The pages extracted in this way are very large with lots of linked files. On the page, I am interested in the block of text contained in the element <div id="description">.

Is there a way to reduce the loading of resources related to the page that loads in the iframe?

I do not want to use curl, because the data is available only to registered users, and the steps that need to be done with curl to get the content are too complicated. Iframe is simple because I use it in a window that sends the necessary cookies to identify the request as coming from the logged in user, but the problem is that it is very wasteful to get almost 1 MB of data to save them 1 KB and throw out the rest.

edit

If the proposed method only works in Firefox, then this is normal, so I added the Firefox tag. In addition, it is possible that the answer actually belongs to the field of additional methods of Firefox, so I added this tag.

The problem is not that I cannot get what I am looking for, but rather the problem is that a simple method is iframewasteful.

, Firefox . Ctrl + U, " ". , , , , . , .

Adblock. - , . Javascript . , .

Answer 1

jQuery .load : http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/

, ,

$('#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!

. ( BBC - , )

-, YQL, jQuery, . , , , , , . , , , .

-, , Mozilla Jetpack . , API, .

Answer 2

- - , .

, , - , -, , , .

Safari, IE 6/7/8 - , - XMLHttpRequest (: Google), , , ( , ).

:

• -, , - , , - (, JSONP).
• -, , , , , ( , , , , , )

, .

Answer 3

AJAX , jQuery , JavaScript.

<iframe> , <div>:

<div id="description_container"></div>

:

$(function() {
  $("#get_description_button").click(function() {
    $("#description_container").load($("input").val() + " #description");
  });
});

.load(), : .load("url selector"), , , #description_container.

---

jQuery, , , , , , , , , AJAX, <iframe>.

Answer 4

Your description sounds like you are selecting pages from the same domain (you said you need to log in and have credentials for the session), so try using the async request through XMLHttpRequest ? He may complain that the html on the page is particularly confused, but you can still get the source through .responseText and extract everything you need with a regular expression.