嵌入式推文不会在 Firefox 中呈现答案

【问题标题】：Embedded tweet does not render in Firefox嵌入式推文不会在 Firefox 中呈现
【发布时间】：2016-06-30 16:04:41
【问题描述】：

我面临一个问题，即我没有在 Firefox 中呈现嵌入的推文，尽管它在 Chrome 中呈现。

我想为用户提供通过其链接预览推文并将其呈现在 Iframe 中的可能性（我有几个原因），因此我将以下代码块插入到我的 Iframe onload 中：

<blockquote class='twitter-tweet'><a hidden='true' href='LINK_TO_TWEET'></a></blockquote>
<script src='//platform.twitter.com/widgets.js' async='' charset='utf-8'></script>

它成功插入到 iframe 中，它加载了 twitter.js，它找到了 blockquote.twitter-tweet 元素并尝试将其转换为推文，但我却生成了错误块：

<body>
<iframe id="twitter-widget-0" class="twitter-tweet twitter-tweet-rendered" frameborder="0" scrolling="no" allowtransparency="true" allowfullscreen="true" style="position: absolute; visibility: hidden; display: block; width: 0px; height: 0px; padding: 0px; border: medium none;">...</iframe>
<blockquote class="twitter-tweet twitter-tweet-error" lang="en-US" cards="hidden" dnt="true" data-twitter-extracted-i1467296456320670416="true">
<iframe id="rufous-sandbox" frameborder="0" scrolling="no" allowtransparency="true" allowfullscreen="true" style="position: absolute; visibility: hidden; display: none; width: 0px; height: 0px; padding: 0px; border: medium none;">...<iframe>
</body>

控制台没有错误。有人有想法吗？...

【问题讨论】：

标签： firefox tweets

【解决方案1】：

将此脚本插入 iframe 文档的头部

<script>
  window.twttr = (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0],
          t = window.twttr || {};
        if (d.getElementById(id)) return t;
        js = d.createElement(s);
        js.id = id;
        js.src = "https://platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore(js, fjs);

        t._e = [];
        t.ready = function(f) {
            t._e.push(f);
        };

        return t;

    }(document, "script", "twitter-wjs"))
</script>

如果您需要在 iframe 加载后添加更多推特，您可以使用：

yourIframe.contentWindow.twttr.widgets.load();

或者您可以根据您的 id 创建一个 twitter iframe，并传递一个容器，如 div、bloquote 等。

yourIframe.contentWindow.twttr.widgets.createTweet(idTweet, containerHTML);

【讨论】：