【问题标题】：Customizing the JS/CSS in a TrustPilot widget在 TrustPilot 小部件中自定义 JS/CSS
【发布时间】：2019-07-07 03:25:33
【问题描述】：

我正在尝试修改我网站上的 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";
}

对于 dom，控制台显示与 EDIT2 相同，对于 date_tags 显示第一个 EDIT

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

【问题讨论】：

你确定“trustpilot_widget”是一个ID吗？对我来说，这是一个 CLASS，id 是“trustbox”。
@HéloïseChauvel 嘿，是的，我认为那只是我自己的容器 div，但我不记得我已经完全改变了我这样做的方式。
好吧，以防万一您没有注意到。您终于设法编辑小部件的 CSS 了吗？因为我尝试了下面的解决方案，但它对我不起作用。
我实现了访问 iframe 元素，但我收到一个 DOMException 提示，由于同源策略，可以编辑 iframe。所以我认为编辑 Trustpilot 小部件 CSS 是不可能的。为了以防万一，我已向支持人员发送了请求，如果他们回复，我会及时通知您。
@HéloïseChauvel 是的，我也尝试过，但无法管理它，它可能是故意的，但公平地说，就像 trustpilot 是为了显示信任，所以允许人们可能会弄乱他们的分数不是会发生的

标签： javascript html css dom trustpilot

【解决方案1】：

要获取 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";
}

【讨论】：

感谢您的回答。现在我得到Uncaught TypeError: Cannot set property 'display' of undefined 我得到console.log(date_tags) 得到HTMLCollection [] length: 0
@PaddyHallihan trustpilot_frame.contentDocument 返回什么，因为它可能是跨源问题。 iframe 在不同的域中不是很友好。
我没有收到跨源错误并返回文档，但它在控制台中显示为空，请参阅上面的编辑
因为我可以展开文档但头部和正文显示为空，我开始认为我应该创建一个样式元素并将其附加到头部？
@PaddyHallihan 试试上面的更新，我认为当你检查元素时 iframe 还没有完成加载。

【解决方案2】：

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

【讨论】：