删除由iframe小部件提供支持的功能-不显示任何内容，css不起作用

Question

我有一个网站，并添加了一个聊天小部件，但希望在此小部件/ iframe的某些部分不显示任何内容。 该小部件已加载到带有.js文件和HTML触发器的iframe中。

我可以在Chrome开发者工具中使用此代码来摆脱我想要的东西，但无法在实际网站上使用它。

.ember-view .footer-note {
    display: none!important;
}

这里是代码，我不想显示

<div id="ember123" class="ember-view footer-note">⚡ by <a href="https://somelink.com/" class="product" target="_blank">the link</a>
</div>

加载所有页面后，maby 5秒后如何加载CSS代码？

我已经测试过了，但是不起作用：

$(window).load(function() {
$('head').append('<link rel="stylesheet" type="text/css" href="//www.linktoCSSwhereDisplayNoneIs.se/css/style.css">');
});

$('iframe').contents().find("div[comp='ember*']").remove();

和CSS

*[id^='ember-']{
display: none!important;
}
div[class^="ember"], div[class*=" ember"] {
    color:red 
}
.ember-view .footer-note {
    display: none!important;
}

Answer 1

可能我们可以尝试在iframe加载后附加样式。

$("#iframe-id").on("load", function () {
    $('head').append('<link rel="stylesheet" type="text/css" href="//www.linktoCSSwhereDisplayNoneIs.se/css/style.css">');
});