通过 javascript 为 YouTube Stream Chat iframe 自定义 CSS 样式

Question

我使用简单的 iframe 将 YouTube 流式实时聊天嵌入到网站中。聊天布局中有一些我想自定义颜色的元素。为了达到这个目的，我试图向我的网站添加一个 javascript 代码并将 css 样式附加到 iframe 的头部。以下示例都不起作用，我不知道为什么，它什么也没改变。我唯一能看到的是样式不会添加到 iframe 的头部，没有控制台错误消息或类似的。如有任何提示，我将不胜感激。

我的 testet 嵌入：

<iframe name="chat_iframe" id="chat_iframe" allowfullscreen="" frameborder="0" height="675" src="https://gaming.youtube.com/live_chat?v=0x0C6F8iuJA&theme=dark&embed_domain=stream-team.eu" width="320"></iframe>

Javascript 对我不起作用的示例（在页脚中进入我的网站）

示例 1：

<script type="application/javascript">
    var head = jQuery("#chat_iframe").contents().find("head");
    var css = '<style type="text/css">' +
              '.paper-icon-button-0{display:none};' +
              '</style>';
    jQuery(head).append(css);
</script>

示例 2：

<script type="application/javascript">
    var $head = $("chat_iframe").contents().find("head");                
    $head.append($("<link/>", 
    { rel: "stylesheet", href: "https://stream-team.eu/chat.css", type: "text/css" }));
</script>

示例 3：

<script type="application/javascript">
    var cssLink = document.createElement("link");
    cssLink.href = "https://stream-team.eu/chat.css"; 
    cssLink.rel = "stylesheet"; 
    cssLink.type = "text/css"; 
    frames['chat_iframe'].document.head.appendChild(cssLink);
</script>

作为CSS，我尝试了几种测试方式

.paper-icon-button-0 {
    display: none!important;
}

Answer 1

由于安全限制，如果 iframe 显示的内容来自运行 JavaScript 的同一域，则您只能使用 JavaScript 访问 iframe 的内容。

否则，如何阻止黑客在 iframe 中加载某些网站并在用户尝试登录时窃取用户的登录信息或在用户尝试购买时窃取他们的信用卡号？