1

我有弹出式聊天，来自twitch.tv，嵌入在我的网页中，在<iframe>.
我目前有这个用户脚本来改变一些颜色：

// ==UserScript==
// @name           Twitch Font Color Fix
// @namespace      void
// @description    Replaces Spring Green, among other, equally cryptic font colors from the chat on www.twitch.tv, with darker versions of the original color.
// @match          http://www.twitch.tv/*
// @include        http://www.twitch.tv/*
// @version        1.0
// ==/UserScript==

var springStyle = document.createElement("style");

springStyle.type = "text/css";
springStyle.textContent = '*[style*="#00FF7F"]{color: #007F3F !important;}*[style*="#9ACD32"]{color: #568000 !important;}*[style*="#00FF00"]{color: #007F00 !important;}';

document.head.appendChild(springStyle);


这可行，但我想将颜色更改合并到我的网站中，这样就不需要用户脚本。我怎样才能做到这一点？

顺便提一句：

  1. 我试图通过启用它<script src="blabla.js"></script>。它没有用。
  2. $(document).ready(function () {});也没有工作。
4

1 回答 1

0

您不能使用页面的 javascript 更改跨域 iframe 的 CSS。 这是为了帮助防止跨站点脚本 (XSS)攻击。

以下是可能的解决方法，从最好到最坏：

  1. 如果目标（聊天）站点有API，请使用 API 。您的页面不会加载 iframe，并且可以完全控制聊天的显示方式。您的页面使用 API 来获取和（可选）发布聊天消息。

    优点： 完全控制显示的内容和发布的内容。
    缺点： 许多网站没有 API，或者 API 没有提供所需的功能。

  2. 复制站点的 AJAX 调用。 有时，找出您想要的特定功能的获取和发布并不难。而且，有时目标站点甚至通过其身份验证方法和跨域资源共享 (CORS) 策略来支持这种方法。

    优点： 可以和 API 一样好，而且支持这个的站点比拥有 API 的站点要多。
    缺点： 可能根本不可能（来自网页），具体取决于站点如何进行身份验证或处理跨域请求。需要进行一些挖掘才能确定 AJAX 交互。

  3. 使用您自己的服务器拦截页面，然后重新发布。这允许您更改源以指向不同的 CSS 文件。有关更多信息，请参阅此答案。

    优点： 可以改变CSS，最少的编码。
    缺点： 由于跨域问题，通常不起作用。

  4. 为您的用户提供用户脚本、时尚脚本或扩展（附加组件），以更正样式。

    优点： 几乎总是有效。易于编码。用户知道样式更改并默认同意/同意它们。用户可以控制并更信任您。 缺点： 用户必须安装并运行您的脚本以及为其编写脚本的扩展（如果有）。

简而言之，您当前的用户脚本方法很可能是唯一的方法。但是，更开明的站点可能支持上面的第一个三种解决方法之一。

另请注意，颜色、字体等可能是网站品牌标识的一部分。 更改其外观可能不是一个好主意，因为您的用户可能会将特定外观与该站点相关联并更加信任它。

如果您“搞乱品牌”，您的用户可能会对您的网站和/或聊天内容持怀疑态度。他们可能会明智地开始怀疑你还改变了什么。更改聊天外观也有（小）可能性违反服务条款。

于 2013-06-08T16:28:09.110 回答