построить дерево DOM из строки без загрузки ресурсов (в частности, изображений)

Question

Итак, я получаю RSS-каналы через AJAX. После их обработки у меня есть html-строка, которой я хочу манипулировать, используя различные функции jQuery. Для этого мне нужно дерево узлов DOM.

Я могу разобрать строку HTML в функции jQuery ().
Я могу добавить его как innerHTML к некоторому скрытому узлу и использовать его.
Я даже пытался использовать нестандартный диапазон Mozilla.createContextualFragment ().

Проблема со всеми этими решениями заключается в том, что когда мой HTML-фрагмент имеет тег <img>, Firefox покорно извлекает любое изображение, на которое ссылается. Поскольку эта обработка является фоновым материалом, который не отображается пользователю, я хотел бы просто получить дерево DOM без браузера, загружающего все содержащиеся в нем изображения.

Возможно ли это с помощью JavaScript? Я не против, если это только для mozilla, так как я уже использую функции javascript 1.7 (которые пока только для mozilla)

Answer 1

Вы можете использовать DOM-парсер для управления узлами. Просто замените атрибуты src , сохраните их исходные значения и добавьте их позже.

Пример:

    (function () {
        var s = "<img src='http://www.google.com/logos/olympics10-skijump-hp.png' /><img src='http://www.google.com/logos/olympics10-skijump-hp.png' />";
        var parser = new DOMParser();
        var dom = parser.parseFromString("<div id='mydiv' >" + s + "</div>", "text/xml");
        var imgs = dom.getElementsByTagName("img");
        var stored = [];
        for (var i = 0; i < imgs.length; i++) {
            var img = imgs[i];
            stored.push(img.getAttribute("src"));
            img.setAttribute("myindex", i);
            img.setAttribute("src", null);
        }
        $(document.body).append(new XMLSerializer().serializeToString(dom));
        alert("Images appended");
        window.setTimeout(function () {
            alert("loading images");
            $("#mydiv img").each(function () {
                this.src = stored[$(this).attr("myindex")];
            })
            alert("images loaded");
        }, 2000);
    })();

Answer 2

Ответ таков:

var parser = new DOMParser();
var htmlDoc = parser.parseFromString(htmlString, "text/html");
var jdoc = $(htmlDoc);
console.log(jdoc.find('img'));

Если вы обратите внимание на свои веб-запросы, вы заметите, что они не выполняются, даже если строка html анализируется и переносится с помощью jquery.

Answer 3

Очевидный ответ - разобрать строку и удалить атрибуты src из тегов img (и аналогично для других внешних ресурсов, которые вы не хотите загружать). Но вы уже подумали об этом, и я уверен, что вы ищете что-то менее хлопотное. Я также предполагаю, что вы уже пытались удалить атрибут src после того, как jquery проанализировал строку, но перед добавлением ее в документ и обнаружил, что изображения все еще запрашиваются.

Я больше ничего не придумаю, но вам, возможно, не нужно делать полный анализ; эта замена должна делать это в Firefox с некоторыми оговорками:

thestring = thestring.replace("<img ", "<img src='' ");

Предостережения:

• Это похоже на работу в текущем Firefox. Это не означает, что последующие версии не будут по-разному обрабатывать дублированные атрибуты src.
• Это предполагает буквальную строку «предположение общего назначения, что строка может появиться в значении атрибута на достаточно ... интересной ... странице, особенно во встроенном обработчике onclick, например: <a href='#' onclick='$("frog").html("<img src=\"spinner.gif\">")'> (хотя в В этом примере ложная положительная замена безвредна.)

Это, очевидно, хак, но в ограниченной среде с достаточно известными данными ...