Question

我遇到了一个问题，即我没有在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元素并尝试将其转换为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>

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

Answer 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加载后需要添加更多Twitter，则可以使用：

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

或者您可以根据自己的ID创建一个Twitter iframe，并传递div，bloquote等容器。

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

嵌入式推文无法在Firefox

1 个答案: