Дождаться полной загрузки страницы после перехода
Целевой сайт для расширения Яндекс.Музыка. Когда первый раз загружаешь страницу или обновляешь ее, дождаться полной загрузки можно через код:
window.onload = function(){}
Но когда сайт уже загрузился и ты выполняешь переходы по разделам, он не обновляется целиком. Шапка остается неизменной, а остальное содержимое обновляется внутри будто отдельный фрейм или вкладка. И событие полной загрузки не срабатывает.
Как отследить полную загрузку после таких "внутренних" переходов по сайту?
Вариант с отслеживанием изменения адреса не подходит, потому что он меняется моментально, загрузка к этому времени еще не заканчивается.
Ответы (1 шт):
На данный момент пришел к решению через таймер.
background.js сообщает о завершении загрузки (не полной)
// background.js
chrome.tabs.onUpdated.addListener(
function (tabId, changeInfo, tab) {
if (changeInfo.status == 'complete') {
chrome.tabs.sendMessage(tabId, {
event: 'complete'
})
}
}
);
content.js получив сообщение запускает функцию fillContent(). Она идентифицирует адрес страницы и вызывает таймер waitPageFullLoaded(), который будет ждать появления уникального для данной страницы элемента. После появления, таймер удаляется и вызывается callback-функция, которая уже делает требуемую задачу на полностью загруженной странице.
// content.js
chrome.runtime.onMessage.addListener(
function (request, sender, sendResponse) {
if (request.event == 'complete') {
fillContent()
}
});
function fillContent() {
url = location.href.split('/')
if (url.length == 7 && url[5] == 'playlists') {
waitPageFullLoaded('.page-playlist__tracks-list', modifyPagePlaylist)
}
else if (...) { ...}
}
function waitPageFullLoaded(uniqueClass, callback) {
let timerId = setInterval(function () {
if (document.querySelector(uniqueClass) != null) {
clearInterval(timerId)
callback()
}
}, 500)
}