3

我正在尝试修改我网站上的 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，我无法访问其中的任何内容。

编辑

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 相同的 dom 和第一个 EDITdate_tags

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

4

2 回答 2

4

要获取您需要使用的 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";
}
于 2019-02-13T10:25:33.150 回答
-1

我不想这样做，但我是一个卑微的开发人员，我的老板坚持。我无法通过 JS/CSS 做到这一点，所以最终不得不用我自己的滑块替换片段并将评论保存为图像。

于 2019-02-25T11:23:53.113 回答