jquery .load() приносит больше данных, чем я прошу

#jquery

Вопрос:

Я делаю кросс-сайт, чтобы получить список меню от d1.test.com чтобы d2.test.com, и это работает…но проблема в том, что он также выводит другие данные за пределы нужного мне элемента. Поэтому в этой ситуации я получаю все, что есть в <header> теге, но $('#mainNav').load('https://d1.test.com header'); (что я запустил независимо в консоли, чтобы убедиться) также извлекаю из d1 какой-то другой контент, который находится далеко за пределами <header> тега.

  1. Это почему?
  2. Как мне получить только данные между начальным и конечным <header> тегами, как я ожидаю?

ETA: Вот html-код (который был запрошен в комментариях) на d1, который останавливает d2, плюс расположение trasparent.gif которого нет в теге заголовка:

  <div class="auxnav">
    <div class="wrapper">
        <a href="#skip-to-content">
            <img src="/images/Transparent.gif" alt="Skip to content." width="1" height="1">
        </a>
        <ul id="AuxNavigation" class="CMSListMenuUL">
        </ul>
    </div>
</div>
<header role="heading">
    <div class="wrapper">
        <nav>
        menu items here
        </nav>
    </div>
</header>
 

Комментарии:

1. Поскольку он не должен этого делать в первую очередь, нет никакого способа сказать ему, чтобы он этого не делал.

2. Можете ли вы показать пример d1.test.com ответа и указать, какие части содержимого извлекаются?

3. @Barmar S.fn.init [nav#mainNav.CMSListMenuUL] -это полный заголовок, а затем он вытягивает кучу вещей, подобных этому: Transparent.gif:1 GET https://d2.test.com/images/Transparent.gif 404 (Not Found) — «Transparent.gif» является относительной ссылкой на d1…

4. jQuery должен проанализировать весь возвращаемый HTML-код, чтобы извлечь ту его часть, которую необходимо вставить в DOM. Это может привести к тому, что он попытается извлечь источники изображений, даже если они не отображаются.

5. Если это просто вызывает ошибку в консоли, вы можете проигнорировать это. Это побочный эффект анализа всего HTML.

Ответ №1:

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

Это приводит к дополнительным сетевым накладным расходам, поэтому, если вы можете реорганизовать файлы сервера, чтобы разделить их на более конкретный файл без окружающих элементов, это может быть лучшим решением. Но пока вы можете просто игнорировать 404 ошибки консоли из изображений.