Есть ли способ уменьшить загрузку ресурсов (файлы изображений / CSS и JS) с помощью JavaScript?

Question

У меня есть HTML-страница на моем локальном хосте - get_description.html.

Фрагмент кода ниже является частью кода:

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

При нажатии кнопки src в iframe устанавливается на URL-адрес, введенный в текстовое поле. Страницы, извлеченные таким образом, очень большие с большим количеством связанных файлов. На странице меня интересует блок текста, содержащийся в элементе <div id="description">.

Есть ли способ уменьшить загрузку ресурсов, связанных на странице, которая загружается в iframe?

Я не хочу использовать curl, потому что данные доступны только зарегистрированным пользователям, и шаги, которые нужно выполнить с помощью curl, чтобы получить контент, слишком сложны. Iframe прост, поскольку я использую его в окне, которое отправляет нужные файлы cookie, чтобы идентифицировать запрос как поступивший от вошедшего в систему пользователя, но проблема в том, что очень расточительно получить почти 1 МБ данных, чтобы сохранить их 1 КБ и выкинуть остальное.

Редактировать

Если предложенный метод просто работает в Firefox, то все в порядке, поэтому я добавил тег firefox. Кроме того, вполне возможно, что ответ на самом деле относится к области дополнительных методов Firefox, поэтому я добавил и этот тег.

Проблема не в том, что я не могу получить то, что я ищу, скорее, проблема в том, что простой метод iframe расточителен.

Я знаю, что Firefox позволяет загружать только текст страницы. Если вы открываете страницу и нажимаете Ctrl + U, вы попадаете в окно «Просмотр источника страницы». Там ссылки ведут себя как обычно и являются кликабельными. Если щелкнуть ссылку в представлении источника, источник новой страницы загружается в просмотреть исходное окно, без загрузки связанных ресурсов, именно то, что я пытаюсь получить. Но я не знаю, как получить доступ к этому поведению.

Другим примером является дополнение Adblock. Это как-то убивает элементы, прежде чем они будут загружены. С простым javascript это невозможно. Потому что он срабатывает слишком поздно, чтобы вовремя вмешаться.

Answer 1

Политика Same Origin запрещает любой веб-странице доступ к содержимому любой другой веб-страницы в другом домене, поэтому в основном вы не можете этого сделать .

Однако этоПохоже, что в некоторых браузерах разрешен доступ к содержимому веб-страниц , если вы пытаетесь получить к нему доступ с локальной веб-страницы , что, как вам кажется,

Safari, IE 6/7/ 8 - это браузер, который позволяет локальной веб-странице делать это через XMLHttpRequest (источник: Справочник по безопасности браузера Google ), поэтому вы можете захотеть использовать один из этих браузеров, чтобы делать то, что вам нужно (обратите внимание, что в будущемверсии этих браузеров могут не позволять делать это больше).

Часть этого решения Я вижу только две возможности:

• Если с веб-страниц вам нужно извлечь контент из каким-то образом контролируется вами , вы можете создать более простой интерфейс, позволяющий другим веб-страницам получать необходимое вам содержимое (например, разрешать JSONP запросов).
• ЕслиWebстраницы, которые вам нужны для извлечения контента из , не контролируются вами единственное решение, которое я вижу, это извлекать входящий на сервер контент вход на сервер напрямую (я знаю, что вы не хотите этого делать, но яне вижу никакой другой возможности, если предыдущие, которые я упомянул, неосуществимы)

Надеюсь, это поможет.

Answer 2

Ваше описание звучит так, как будто вы выбираете страницы из одного домена (вы сказали, что вам нужно войти в систему и иметь учетные данные сеанса), поэтому вы пытались использовать асинхронный запрос через XMLHttpRequest ? Может возникнуть жалоба, если html на странице особенно испорчен, но вы все равно сможете получить необработанный текст через .responseText и извлечь то, что вам нужно, с помощью регулярного выражения.

Answer 3

На самом деле я уже видел запрос кросс-домена 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, чтобы сделать свое дело.Теперь я не могу сказать, что полностью понимаю, что он там делает, но, похоже, это работает и отвечает всем требованиям.Как только вы загрузите данные, я полагаю, что это просто вопрос фильтрации необходимых вам данных.

Если вы предпочитаете что-то, что работает на уровне браузера, могу я предложить инфраструктуру Jetpack Mozilla для облегченных расширений.Я еще не прочитал всю документацию, но она должна содержать API, необходимые для этого.

Answer 4

В 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>.