Скрипт Tampermonkey дает разные результаты в зависимости от того, как страница открывается и отображается?(Содержание одинаковое) - PullRequest
Новая
       10

Скрипт Tampermonkey дает разные результаты в зависимости от того, как страница открывается и отображается?(Содержание одинаковое)

0 голосов
/ 06 июня 2019

У меня есть usercript (Tampermonkey в Chrome), который запускается либо при открытии страницы пользователем, либо может открывать страницу в отдельном окне (где затем запускается соответствующий скрипт). Когда страница открывается пользователем, все работает как положено.

Однако, когда страница открывается в другом окне, эта функция иногда не обрабатывает текст должным образом.

Код: 

function processTableRows() {
  var regex = new RegExp(/(.*?)(\d{7})/);
  var texts = document.querySelectorAll(".table__row");
  var out = [];
  texts.forEach(text=> {
    var fixMonth = text.innerText.replace(/(\d*)月/, function(p1) {
      const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
      return monthNames[(parseInt(p1) - 1)];
    }).replace(regex,
             "example.com/page.html?id=$2\n$1");
    out.push(fixMonth);
  });
 return out;
}

Пример страницы с текстом (перед сценарием): 

05 6月 2019  8989898
Some text

Some more text

Когда пользователь открывает страницу , и пользовательский скрипт, и код в консоли выдают ожидаемый результат: 

example.com/page.html?id=8989898
05 Jun 2019     
Some text

Some more text

Однако, когда он запускается в отдельном окне, он возвращает (и скрипт TM, и консоль запускаются): 

05 Jun 2019
example.com/page.html?id=8989898

Some text

Some more text

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

EDIT: Дополнительная информация, полученная после комментариев, которые были ниже:

Когда страница запускается в новом (всплывающем) окне, она становится маленькой и оригинальный текст выглядит так: 

05 6月 2019
8989898
Some text
Some more text

Однако, когда окно больше (например, когда пользователь посещает его), оно выглядит следующим образом: 

05 6月 2019  8989898
Some text

Some more text

1 Ответ

1 голос
/ 08 июня 2019

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

  1. Время.Страница загружается медленнее или быстрее в зависимости от различных факторов, часто кешируется.Таким образом, скрипт может сработать до того, как контент, который он ищет, будет представлен / закончен.
    Используйте waitForKeyElements или MutationObserver для компенсации.Ищите вокруг предыдущих вопросов, где это было покрыто.

  2. AJAX .На самом деле страница не выполняет нормальную загрузку HTML, но использует javascript для (пере) написания «новой» страницы.
    Опять же, waitForKeyElements или MutationObserver полезны для таких страниц.И, опять же, рассмотрено в предыдущих вопросах.

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

  4. Код, чувствительный к визуализации .Если ваш скрипт использует позиционирование, стиль CSS, размеры элементов и т. Д .;оно может сломаться просто, когда окно имеет другой размер, или когда страница занимает различное время для рендеринга.

В этом случае код вопроса, по-видимому, имеет вариант причины 4. Он использует innerText и innerText изменяет свои результаты в зависимости от пробела и видимости .(innerText также медленнее, чем textContent.)

Решение состоит в том, чтобы использовать textContent вместо innerText.

Вот демонстрация, показывающая, как двасвойства могут отличаться: 

srcNode = $(".variableDiv")[0];
$("#TC").text (srcNode.textContent);
$("#IT").text (srcNode.innerText);
.variableDiv {border: 1px solid gray; margin-bottom: 1em;}
td, th {border: 1px solid gray;  padding: 0.2ex 1ex;}
table {border-collapse: collapse;}

Source Div:

    Chuck Norris has two speeds: 
Walk, and Kill.

    Hidden Text


 textContent 
  
innerText

IIRC, разные браузеры могут также изменять результаты innerText по скрытому переполнению и / или окклюзионным элементам, но я не проверял это.

...