我正在尝试修改我网站上的 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 和第一个 EDIT 的 date_tags
最佳答案
要获取 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";
}
关于javascript - 在 TrustPilot 小部件中自定义 JS/CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54667750/