JavaScript запускается как последний скрипт после загрузки страницы - PullRequest
Новая
       43

JavaScript запускается как последний скрипт после загрузки страницы

0 голосов
/ 24 января 2019

Мне было интересно, возможно ли редактировать содержимое встроенного js, который запускает и генерирует dom-контент. Как, например, код комментария fb js или код аналитики.

Можно ли запустить функцию как последнюю функцию, которая запускается на сайте, чтобы я мог внести изменения в отображаемый контент, созданный встроенным скриптом. Давайте рассмотрим пример: 

<div id="fb-root"></div>
                <script>(function(d, s, id) {
                  var js, fjs = d.getElementsByTagName(s)[0];
                  if (d.getElementById(id)) return;
                  js = d.createElement(s); js.id = id;
                  js.src = \'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2\';
            fjs.parentNode.insertBefore(js, fjs);
        }(document, \'script\', \'facebook-jssdk\'));</script>

Когда этот код отображает, он генерирует поле для комментариев, которое выглядит следующим образом: enter image description here

Можно ли запустить скрипт после того, как контент был сгенерирован. И скажем, изменить элемент span в сгенерированном выводе?

Редактировать: Я НЕ ЗАИНТЕРЕСОВАН В РЕШЕНИЯХ CSS. Я ЗНАЮ CSS, Я СПЕЦИАЛЬНО ЗАПРОСИЛА О JAVASCRIPT. НЕ CSS

Ответы [ 2 ]

0 голосов
/ 24 января 2019

Если вы можете решить, какой className или CSS-селектор для частей Facebook вы хотите изменить. Вы можете напрямую изменить таблицу стилей для них.

Ниже приведен небольшой фрагмент, демонстрирующий это. Если мы притворимся, что имя класса .test - это селектор CSS в этом плагине Facebook, вы можете изменить цвет, как показано ниже. SetInterval, конечно, не нужен, он только показывает, что он меняется в реальном времени. 

let cssEntry;

for (const s of document.styleSheets) {
  for (const r of s.cssRules)  {
    if (r.selectorText === ".test") {
      cssEntry = r;
    }
  }
}

let c = 0;
const colors = ["red", "green", "blue"];

setInterval(() => {
  cssEntry.style["background-color"] = colors[(c++)%3];
}, 1000);
.test {
  color: white;
  background-color: black;
}
<div class="test">
  <p>This should be white text on black background<p>
  <p>But in a few seconds should change between red / green / blue every second by directly changing the CSS inside the loaded stylesheet</p>
</div>
0 голосов
/ 24 января 2019

Разве вы не можете просто использовать css для этого? !important может помочь в этих ситуациях ...

Если нет, вы можете использовать плагин jQuery Live Query , но я думаю, что он немного устарел ... 

$('.theElementSelector').livequery(function() {
  //your code to change appearance of controls
});

Или вы можете использовать DOMNodeInserted (что также устарело / устарело): 

$('body').on('DOMNodeInserted', '.theElementSelector', function(e) {
  //your code to change appearance of controls
});

Лучшее решение - использовать MutationObserver.

Еще один inserttionQuery : 

insertionQ('theElementSelector').every(function(element){
    //callback
});
...