javascript - 注入(inject) CSS 以从屏幕截图 API (url2png.com) 中删除模式/弹出窗口

Question

我正在尝试构建一个应用程序，它将接受 url 的 CSV 文件并显示网页的屏幕截图。但是，我遇到了屏幕截图返回的问题，其中包含阻止网站内容的整页模式/弹出窗口。我使用的 API ( url2png.com) 允许 CSS 注入(inject)或用户代理参数。我试过像这样使用注入(inject) CSS 文件，但它没有正常运行。

.ju_overlay {
    display: none;
}

#modalcontent {
    display: none;
}

.shopify-section-popup-subscription {
    display: none;
}

.modal-backdrop {
    display: none;
}

有谁知道删除模态框/阻止它们加载的有效方法？

Answer 1

在我们的谈话中发现，url2png 似乎要么在网站的 CSS 之前附加您的 CSS(因此优先级较低)，要么是 specificity您的规则集的优先级不如站点的 CSS。虽然使用 !important 通常是一种不好的做法，但在网络抓取中，尤其是在您打算强制执行这些规则的情况下，这将是最好的方法。

所以只需更改声明以包含 !important 就可以了:

.ju_overlay {
    display: none !important;
}

#modalcontent {
    display: none !important;
}

.shopify-section-popup-subscription {
    display: none !important;
}

.modal-backdrop {
    display: none !important;
}