Javascript: Выполнение действий после загрузки следующей страницы?

Question

Я в настоящее время строит расширение Google, и это то, что я иду:

ли что-то на awesome.page1.html автоматически нажмите Next Page. Когда новая страница загрузится, заполните текстовое поле формы.

Моя проблема в том, что, хотя я знаю, как заполнять текстовое поле, я не совсем знаю, как сказать ему, чтобы заполнить его, как только страница2 загрузилась. Он продолжает пытаться сделать все, на странице 1.

Это то, что я пытаюсь, но это не работает:

function addEffect() { 
    document.getElementsByClassName("effect1 shine")[0].click(); 
    document.getElementsByClassName("nextPage BigButton")[0].click(); 
    nextStep(); 
} 

function nextStep() { 
    if(document.getElementsByClassName("myformTextField imageName") != undefined) { 
     alert('Page 2 is up.'); 
    } 

    else { 
     alert('Page 1 is still up.'); 
     setTimeout("nextStep()", 250); 
    } 
} 

Я использую предупреждение только для тестирования, и я постоянно получаю «Страница 2 вверх ", хотя он все еще находится на стр. 1. Я проверяю, находится ли элемент, который присутствует только на странице 2. Как я могу убедиться, что страница2 поднята?

Answer 1

Самый простой способ, с которым я решил пойти, - это совпадение содержимого скрипта.

Что я сделал, так это создание двух отдельных файлов javascript в моем расширении: 1.js и 2.js. Когда awesome.page1.html загружает его, он будет запускать 1.js, а при загрузке page2.html он запустит 2.js.

Все, что я делал в своем манифесте.JSON-файл состоит в следующем:

"content_scripts":[ 
     {"matches": ["http://awesome.page1.com/*"], "js": ["1.js"]}, 
     {"matches": ["http://page2.com/*"], "js": ["2.js"]}] 

Answer 2

Ну, ваш код здесь:

document.getElementsByClassName("myformTextField imageName") 

возвращает пустой массив, когда он не находит ничего, что не undefined. Поэтому ваше первое условие if всегда будет истинным, независимо от того, найдет ли он ваш товар или нет.

Вместо этого проверьте длину возвращенное getElementsByClassName или использовать querySelector и проверить нулевой

if (document.getElementsByClassName("myformTextField imageName").length) { ... } 

// Or.. 
if (document.querySelector('.myformTextField.imageName') !== null) { ... } 

Answer 3

вы должны попытаться пользователь Jquery и $(document).ready(handler)

это действительно лучшая практика для того, чтобы страница загружается до того, как она попытается выполнить ваши команды http://api.jquery.com/ready/

Answer 4

Основная эмиссия e вы столкнетесь с тем, что переменные JavaScript, включая функции, не сохраняются с одной страницы на другую. Иными словами, вы не можете написать функцию на одной странице и выполнить ее на странице, которая ее заменяет.

Вы можете передать переменную URL или установить cookie для сохранения данных - или сохранить настройки на своем сервере, но прямой подход JavaScript не будет работать.

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