javascript - 如何在 HTTPS 网站上使用 Stumbleupon Badges？

Question

我正在尝试将 Stumbleupon 徽章添加到我们的网站，但 Stumbleupon 似乎不支持 HTTPS 及其 CSS。

使用此处找到的 Stumbleupon 发现工具，我选择了任何徽章: https://www.stumbleupon.com/dt/badges/create

然后我获得了徽章代码，如下所示:

<!-- Place this tag where you want the su badge to render -->
<su:badge layout="2"></su:badge>

<!-- Place this snippet wherever appropriate -->
<script type="text/javascript">
  (function() {
    var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true;
    li.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + '//platform.stumbleupon.com/1/widgets.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s);
  })();
</script>

尝试加载此代码时，它会将徽章显示为非样式化列表。通过研究代码，加载的 JavaScript 文件似乎调用了调用此文件的 CSS 加载位置: http://cdn.stumble-upon.com/css/badges_su.css?v=20120613

由于 JavaScript 文件是外部文件，因此它不提供将 CSS 强制为 HTTPS 的能力。

由于我们在 https://上加载我们的网站，因此在不允许混合内容的浏览器上会自动阻止从 http://加载的任何文件。

我已经联系了 Stumbleupon，他们显然已经意识到这个问题并且不打算解决它。 (他们似乎不想设置 SSL)

有没有其他人遇到过徽章的混合内容问题？如果有，有没有人找到解决方法？ (更喜欢代码解析而不是插件)

Answer 1

我正在使用支持 HTTPS 的链接缩短器，例如 https://goo.gl/ ，但我从未用徽章测试过。