如何修复原生JS集成Disqus时评论用户名颜色显示错误的问题

问题根源 #

Disqus 评论区通过跨域 iframe 加载，父页面的普通 CSS 规则无法穿透到 iframe 内部，JS 也无法直接操作 iframe 内的 DOM 元素，所以常规的样式修改方法会失效。

可行解决方案 #

方案1：使用Disqus后台自定义CSS（最稳定）

1. 登录Disqus后台，进入对应站点的「外观」设置页
2. 找到「自定义CSS」输入框，直接写入针对用户名的样式规则，示例如下：

/* 替换为你实际需要的色值，类名可参考你提供的CSS规则截图调整 */
.post-byline .author {
  color: #222222 !important;
}
/* 如果需要适配Auto主题的明暗模式，可追加媒体查询 */
@media (prefers-color-scheme: dark) {
  .post-byline .author {
    color: #eeeeee !important;
  }
}

3. 保存设置后清空缓存刷新页面即可生效。

方案2：通过postMessage动态注入样式

如果没有Disqus后台修改权限，可在你自己的页面中添加如下JS代码，通过Disqus支持的postMessage协议向iframe注入样式：

var disqusShortname = 'xxx'; // 替换为你自己的Disqus短名，和embed.js中的前缀一致

window.addEventListener('message', function(e) {
  if (e.origin !== `https://${disqusShortname}.disqus.com`) return;
  if (e.data.event === 'ready') {
    const disqusFrame = document.querySelector('iframe[src*="disqus.com/embed"]');
    disqusFrame.contentWindow.postMessage({
      event: 'render',
      css: '.post-byline .author { color: #222222 !important; }' // 替换为实际需要的样式
    }, `https://${disqusShortname}.disqus.com`);
  }
});

内容的提问来源于stack exchange，提问作者Edoardo Cortese