Настройка JS / CSS в виджете TrustPilot

Question

Я пытаюсь изменить виджет TrustPilot на своем сайте.

Базовая структура виджета TrustPilot:

#tp-widget_wrapper .tp-widget-wrapper
    #wrapper-top .wrapper-top
        #tp-widget-reviews-wrapper .tp-widget-reviews-wrapper hidden-element
            #tp-widget-reviews .tp-widget-reviews
                .tp-widget-review
                    .tp-widget-stars
                    .date

Я пытаюсь скрыть div .date.

То, что я до сих пор получил:

var trustpilot_children = document.getElementById("trustpilot_widget").childNodes;
var trustpilot_frame = trustpilot_children[0];
var date_tags = trustpilot_frame.document.getElementsByClassName("date");
date_tags.style.display = "none";

Однако я получаю ошибку:

Uncaught TypeError: Cannot read property 'getElementsByClassName' of undefined

var trustpilot_frame находит iframe, я просто могу 't получить доступ к чему-либо внутри него.

Редактировать

var trustpilot_children = document.getElementById("trustpilot_widget").childNodes;
var trustpilot_frame = trustpilot_children[0].contentDocument;
console.log(trustpilot_frame);
var date_tags = trustpilot_frame.getElementsByClassName("date");
console.log(date_tags);
date_tags.style.display = "none";

Консоль:

Редактировать 2

var trustpilot_children = document.getElementById("trustpilot_widget").childNodes;
var trustpilot_frame = trustpilot_children[0].contentDocument;
var style_tag = trustpilot_frame.createElement("style");
style_tag.textContent = ".date{display:none;}";
trustpilot_frame.getElementsByTagName("head")[0].appendChild(style_tag);
console.log(trustpilot_frame);

Консоль:

Редактировать 3

var trustpilot_children = document.getElementById("trustpilot_widget").childNodes;
var trustpilot_frame = trustpilot_children[0].contentDocument;
trustpilot_frame.onload = setTimeout(hide_dates, 10000);
function hide_dates(){

    // method 1
    var style_tag = trustpilot_frame.createElement("style");
    style_tag.textContent = ".date{display:none;}";
    trustpilot_frame.getElementsByTagName("head")[0].appendChild(style_tag);
    console.log(trustpilot_frame);

    // method 2
    var date_tags = trustpilot_frame.getElementsByClassName("date");
    console.log(date_tags);
    date_tags.style.display = "none";
}

Консоль показывает то же, что EDIT2 для домена ипервый РЕДАКТИРОВАТЬ для date_tags

https://codepen.io/phallihan/pen/OdwgGd

Answer 1

Я не хотел этого делать, но я скромный разработчик, и мой начальник настоял.Я не смог сделать это с помощью JS / CSS, поэтому мне пришлось заменить фрагмент на свой собственный слайдер и сохранить рецензии в виде изображений.

Answer 2

Чтобы получить документ iframe, вам нужно использовать document.getElementById('iframe').contentDocument, после чего вы сможете использовать getElementsByClassName

https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentDocument

Ваш обновленный код будет выглядеть так:

var trustpilot_children = document.getElementById("trustpilot_widget").childNodes;
var trustpilot_frame = trustpilot_children[0];
var date_tags = trustpilot_frame.contentDocument.getElementsByClassName("date");
date_tags.style.display = "none";

Обновление

Попробуйте выполнить приведенное ниже, чтобы дождаться загрузки iframe.

var trustpilot_children = document.getElementById("trustpilot_widget").childNodes;
var trustpilot_frame = trustpilot_children[0];
trustpilot_frame.onload = function() {
    var date_tags = trustpilot_frame.contentDocument.getElementsByClassName("date");
    date_tags.style.display = "none";
}