$.get() удаленный HTML вызывает нежелательные запросы к ресурсам этой страницы

#javascript #jquery #dom

Вопрос:

Я извлекаю HTML удаленной страницы и возвращаю HTML для просмотра мета-тегов, и я замечаю неожиданные неудачные запросы для всех удаленных ресурсов в HTML другой страницы всякий раз, когда я присваиваю это переменной.

 $.get(url, function(data, status) {
  var dt = $(data);
}

К тому времени, когда я назначил эту переменную, она запускает все эти удаленные запросы.

Как я могу избежать того факта, что присвоение этих данных переменной в DOM, похоже, вызывает запрос для каждого изображения или ресурса на этой удаленной странице!

1. Я не могу воспроизвести это. Это весь соответствующий код?

2. Возможно $.get(`${url} head`, function(data) { console.log(data) })

3. Я использую процесс CORS-anywhere для передачи данных, но URL-адрес будет выглядеть как локальный URL-адрес, передающий удаленный URL-адрес, который возвращает этот ответ //myhost:8081/medium.com/@blogpage Я подозреваю, что когда я присваиваю этот HTML переменной, она является частью DOM, которая затем запускает нежелательные запросы. Но я, конечно, должен иметь возможность фильтровать этот текст без этого?

4. var title = dt.filter(‘title’).text(); var description = dt.filter(«meta[name=’description’]»).attr(‘content’); Это все, что я пытаюсь запустить

Ответ №1:

Когда вы это делаете $(data) , jQuery завершает синтаксический анализ HTML и вызывает запросы к ресурсам.

Чтобы обойти это, используйте синтаксический анализатор DOM, чтобы ресурсы не извлекались.

 const myHTMLSource = `
<html>
  <head>
    <meta name="title" content="Foo Bar">
    <meta name="description" content="FOO FOO">
    <meta name="keywords" content="bar, egg, bacon">
    <meta name="robots" content="index, follow">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="English">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
  </head>
  </body>
    <h1>Test</h1>
    <img src="http://placekitten.com/200/300" />
  </body>
</html>`;

const parser = new DOMParser();
const testDoc = parser.parseFromString(myHTMLSource, "text/html")
const metaTags = testDoc.querySelectorAll("meta");
console.log(metaTags.length);

Поскольку его спрашивают, как использовать in в запросе jQuery Ajax, он просто использует данные:

 var request = $.ajax({
  url: url,
  method: "GET",
  dataType: "text"
}).done(function( data ) {
  const parser = new DOMParser();
  const testDoc = parser.parseFromString(data, "text/html")
  const metaTags = testDoc.querySelectorAll("meta");
  console.log(metaTags.length);
}).fail(function( jqXHR, textStatus ) {
  alert( "Request failed: "   textStatus );
});

1. Где это получает HTML из удаленного файла?

2. @mplungjan Серьезно? Гм, он использует data переменную, которая имеет исходный код HTML.

3. Итак, OP говорит, ЧТО ПОЛУЧЕНИЕ html приводит к тому, что запросы внутри результата выполняются при выполнении $(data) . Итак, проблема заключается не в использовании $(data) , а в необработанном HTML, но это означает какое-то разделение </head> ПЕРЕД созданием фрагмента DOM

4. jQuery выполняет HTTP-запросы, когда он анализирует DOM

5. Да, это проблема ОП. Смотрите Мой ответ для предлагаемого решения

Ответ №2:

Итак, вы утверждаете: ПОЛУЧЕНИЕ результатов html в запросах внутри результата выполняется при выполнении $(data) . Таким образом, проблема заключается НЕ в использовании $(data) , а в необработанном HTML, но это означает какое-то разделение </head> ПЕРЕД созданием фрагмента DOM

Попробуйте это:

Раскомментируйте комментарии и удалите строку, которую я использую для тестирования

 //$.get(url, function(data, status) { // uncomment
//  const dt = data.split("</head>")[0]
  const fragment = document.createElement("div");
// fragment.innerHTML = dt;

// test
  fragment.innerHTML = `<html>n<head>n<meta name="title" content="Foo Bar">n<meta name="description" content="FOO FOO">n<meta name="keywords" content="bar, egg, bacon">n<meta name="robots" content="index, follow">n<meta http-equiv="Content-Type" content="text/html; charset=utf-8">n<meta name="language" content="English">n<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>`; 

  [...fragment.querySelectorAll("meta")]
    .forEach(meta => {
      console.log([...meta.attributes]
        .map(attr => `${attr.nodeName}: ${attr.nodeValue}`))
  })
//}}