Как использовать tampermonkey (userscript), чтобы скрыть элемент на странице внутри iframe, который содержит react?

Как скрыть кнопку "Чат" на сайте foxford.ru во время просмотра вебинара, используя userscript в Tampermonkey для Chrome? Пытался получить доступ к элементу с помощью document.getElementByClassName("'chat__root__2zsMF'"), но не смог его найти. Как решить эту проблему?
  • 19 сентября 2023 г. 6:37
Ответы на вопрос 2
При работе с элементами внутри iframe, содержащего React, обычные методы доступа к элементам, такие как `getElementById` или `getElementsByClassName`, не всегда срабатывают из-за особенностей работы React.

Для решения данной проблемы, можно использовать метод `contentWindow`, чтобы получить доступ к содержимому iframe, а затем уже использовать методы доступа к элементам внутри него.

Вот как можно скрыть кнопку "Чат" на сайте foxford.ru во время просмотра вебинара:

```javascript
// ==UserScript==
// @name        Hide Chat Button on foxford.ru
// @namespace   Violentmonkey Scripts
// @match       https://foxford.ru/*
// @grant       none
// ==/UserScript==

(function() {
    'use strict';

    // Ждем, пока страница полностью загрузится
    window.onload = function() {
        // Получаем iframe, содержащий вебинар
        var iframe = document.getElementById('webinar-iframe');

        // Проверяем, что iframe существует
        if (iframe) {
            // Получаем содержимое iframe
            var iframeDocument = iframe.contentWindow.document;

            // Находим кнопку "Чат" внутри iframe и скрываем ее
            var chatButton = iframeDocument.getElementsByClassName('chat__root__2zsMF')[0];
            if (chatButton) {
                chatButton.style.display = 'none';
            }
        }
    };
})();
```

Прежде всего, мы ожидаем полной загрузки страницы с помощью `window.onload`, чтобы убедиться, что iframe уже существует. Затем мы используем `getElementById`, чтобы получить доступ к iframe с идентификатором `webinar-iframe`.

После этого мы получаем содержимое iframe с помощью `contentWindow.document` и внутри этого документа мы ищем элемент кнопки "Чат" с помощью `getElementsByClassName`. Если кнопка найдена, мы скрываем ее, устанавливая свойство `display` на `none`.

Сохраните данный код в userscript, установите его в Tampermonkey для Chrome и кнопка "Чат" должна скрыться при просмотре вебинара на сайте foxford.ru.
1. Для переформулирования можно использовать css селектор атрибутов [class^="chat__root__"], который проверяет начало имени класса. Это сделано для того, чтобы не привязываться к "непонятным буковкам" в конце, которые могут измениться при обновлении версии фронтенда.
2. Если фрейм находится на другом адресе, то нужно создать userscript для этого адреса и применить его там. Можно использовать @run-at document-start для правильного выполнения скрипта.
3. Можно добавить CSS правило для скрытия элемента с классом, начинающимся на "chat__root__". Можно использовать функцию addCss() для добавления стилей.
4. Если фрейм находится на том же адресе, то можно использовать MutationObserver для отслеживания загрузки фрейма. Когда фрейм загружен, нужно проверить, доступно ли его содержимое, и применить CSS стили к загруженному фрейму. 
5. Также можно добавить атрибут "us-processed" для пометки обработанных фреймов, чтобы избежать повторной обработки.
6. Функция isAccessibleFrame() проверяет, доступно ли содержимое фрейма, чтобы быть уверенным, что можно применить стили.
Похожие вопросы