Как отложить fetch() до тех пор, пока веб-сайт не завершит загрузку динамического контента

У меня есть расширение для хрома. Всякий раз, когда пользователь нажимает кнопку расширения, он загружает источник следующего URL-адреса: «smmry.com/(URL-адрес текущей активной вкладки пользователя)»

Я использую следующий код javascript для загрузки источника URL-адреса в виде html-файла. Этот код в настоящее время запускается всякий раз, когда пользователь нажимает кнопку моего расширения (переменный URL-адрес является гипотетическим URL-адресом, который может загрузить мое расширение. В этом случае пользователь фактически будет просматривать cnn.com/(path_to_news_article), но расширение будет загружаться : smmry.com/https://www.cnn.com/(path_to_news_article)):

let URL = 'https://smmry.com/https://www.cnn.com/2018/04/01/politics/ronald-kessler-jake-tapper-interview/index.html#&SM_LENGTH=7'
    fetch(URL)
        .then((resp) => resp.text())
        .then(responseText => {
           download("website_source.html", responseText)
        })

function download(filename, text) {

    var element = document.createElement('a');
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    element.setAttribute('download', filename);

    element.style.display = 'none';
    document.body.appendChild(element);

    element.click();

    document.body.removeChild(element);
}

Вот источник веб-страницы: https://smmry.com/https://www.cnn.com/2018/04/01/politics/ronald-kessler-jake-tapper-interview/index.html#&SM_LENGTH=7

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

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

Как я могу убедиться, что запрос fetch() загружает содержимое веб-сайта только после того, как веб-сайт https://smmry.com закончит подведение итогов статьи https://www.cnn.com/2018/04/01/politics/ronald-kessler-jake-tapper-interview/index.html.

Изменить: мой файл manifest.json.

{
"manifest_version": 2,
"name": "Summarizer",
"version": "1.0",

"description": "Summarizes webpages",

"permissions": [
    "tabs",
    "downloads",
    "*://*.smmry.com/*"
],

"icons": {
    "48": "icons/border-48.png"
},

"browser_action": {
    "browser_style": true,
    "default_popup": "popup/choose_page.html",
    "default_icon": {
        "16": "icons/summarizer-icon-16.png",
        "32": "icons/summarizer-icon-32.png"
    }
}
}

javascript web-scraping google-chrome-extension fetch-api dynamic-content
person Roymunson    schedule 02.04.2018    source источник
comment
Просто сделайте задержку, пока отображается розовая полоса загрузки.   -  person omegastripes    schedule 02.04.2018
comment
Вот что я хочу сделать, но я не знаю, как   -  person Roymunson    schedule 02.04.2018

Ответы (2)


arrow_upward
0
arrow_downward

Я думаю, вы ищете document.onload

Возможно, вам нужно сделать что-то вроде этого:

document.onload = () => { 
    let URL = 'https://smmry.com/https://www.cnn.com/2018/04/01/politics/ronald-kessler-jake-tapper-interview/index.html#&SM_LENGTH=7'

    fetch(URL)
    .then((resp) => resp.text())
    .then(responseText => {
       download("website_source.html", responseText)
    })

    const download = (filename, text) => {

    const element = document.createElement('a');
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    element.setAttribute('download', filename);

    element.style.display = 'none';
    document.body.appendChild(element);

    element.click();

     document.body.removeChild(element);
    }
};

загрузка будет ждать страницы, а затем вы можете сделать выборку

person Miguel Angel    schedule 02.04.2018
comment
Использование .onclick, .onload или чего-либо еще является плохой практикой и приводит к плохо продуманному коду, которым трудно управлять; а также ограничение вас одним прослушивателем событий на событие. Вместо этого попробуйте прикрепить свои события с помощью addEventListener, например: developer.mozilla.org/en/DOM /element.addEventListener - person CertainPerformance; 02.04.2018
comment
@CertainPerformance Кажется, мне нужно использовать addEventListener("load", function(){…}), но что бы я также прикрепил к прослушивателю событий? Я пишу этот код для веб-расширения Firefox/Chrome. - person Roymunson; 02.04.2018
comment
@Roymunson Это хорошая привычка использовать addEventListener везде, даже если вы думаете, что вам сойдет с рук использование свойства on*. Что, если какой-то другой скрипт на странице также следует плохим практикам и переназначает сам document.onload? Лучше просто везде использовать addEventListener и забыть об этом - person CertainPerformance; 02.04.2018
comment
@CertainPerformance Я буду использовать addEventListener. Я просто не уверен, как реализовать это в моем коде в этом конкретном случае. - person Roymunson; 02.04.2018

arrow_upward
0
arrow_downward

Используя addEventListener и немного очистив код:

function main(){
  const URL = 'https://smmry.com/https://www.cnn.com/2018/04/01/politics/ronald-kessler-jake-tapper-interview/index.html#&SM_LENGTH=7'
  fetch(URL)
    .then(resp => resp.text())
    .then(responseText => download("website_source.html", responseText));

  function download(filename, text) {
    const element = document.createElement('a');
    element.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(text);
    element.setAttribute('download', filename);
    element.style.display = 'none';
    document.body.appendChild(element);
    element.click();
    element.remove();
  }
}
document.addEventListener('DOMContentLoaded', main);
person CertainPerformance    schedule 02.04.2018
comment
Это не сработало. Я попытался использовать следующий URL-адрес: https://smmry.com/https://www.newyorker.com/magazine/1946/08/31/hiroshima?intcid=mod-most-popular#&SM_LENGTH=7 Если вы перейдете по этому URL-адресу, вы заметите, что веб-сайту требуется много времени для создания резюме статьи. Мой код предназначен для веб-расширения Chrome, которое загружает источники веб-страниц с базовым доменом smmry.com (даже когда пользователь в данный момент просматривает другую вкладку, например newyorker.com). Таким образом, я думаю, проблема в том, что eventListener вызывает main, когда загружается мое расширение (а не указанный URL). - person Roymunson; 02.04.2018
comment
Я добавил редактирование в начало своего исходного сообщения, которое более четко объясняет мою проблему. - person Roymunson; 02.04.2018
comment
Ваша ссылка, кажется, создает сводку почти сразу для меня? Дело в том, что сводки, которые не сохранены в их базе данных, уже не отображаются в загруженном HTML? Может быть, вы хотите создать setTimeout()? - person CertainPerformance; 03.04.2018
comment
Я знаю, что все сводки, отображаемые на веб-сайте, сохраняются в HTML, потому что, когда я вручную перешел по этой ссылке и скачал ее, сводка была там. Но когда я использую fetch() и получаю источник веб-сайта, сводки там нет. Чтобы создать setTimeout(), я должен просто добавить его в начале функции main? - person Roymunson; 03.04.2018
comment
Но когда я использую fetch() и получаю исходный код веб-сайта, сводки там нет ‹ это не упоминалось в вашем вопросе и, похоже, это реальная проблема, которую вы пытались решить. Я вижу сводку в простом HTML, но ваш ответ пустой или не соответствует действительности? Если это так, это проблема CORS. - person CertainPerformance; 03.04.2018
comment
ответ от fetch() успешно извлекает источник веб-страницы, за исключением части с кратким описанием. Я не знаю, является ли это проблемой CORS, потому что я установил разрешения в своем manifest.json (я добавлю его в свой пост через секунду), а расширение Chrome (иногда, но непоследовательно) загружает источник веб-страницы с сводкой внутри него. - person Roymunson; 03.04.2018