twitter widget 仅在第一次加载时工作，然后失败

Question

我有一个使用 Play Framework 开发的网络应用程序。在那里我使用 Ajax 将大部分视图 html 页面加载到名为 'container' 的 div .

$( "#container" ).load("/contactUs"); // contactUs is the page which contains the widget

我有这个 html 页面，其中包含我的 Twitter 提要的小部件。

<div id= "twitter_div">
                <a class="twitter-timeline" href="https://twitter.com//XXXX" data-widget-id="XXXXXX">Tweets by @@XXXX</a>
            </div>

当我单击该页面以加载到容器时，它将加载并且 Twitter 提要将正确显示。那么 HTML 将是

<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" class="twitter-timeline twitter-timeline-rendered" allowfullscreen="" style="border: none; max-width: 100%; min-width: 180px; width: 331px;" title="Twitter Timeline" height="380"></iframe>

但是在我将另一个 html 页面加载到同一个容器 div 之后，如果我再次将 Twitter 页面加载到同一个 div 它就无法正确呈现。例如：

第一次通话$( "#container" ).load("/contactUs"); // working properly

然后调用$( "#container" ).load("/home");

然后又是$( "#container" ).load("/contactUs"); // not working properly

它仍然显示

 <div id= "twitter_div">
                <a class="twitter-timeline" href="https://twitter.com//XXXX" data-widget-id="XXXXXX">Tweets by @@XXXX</a>
            </div>

不是 Iframe 的隐藏 a 标签。

为什么会这样？

编辑

我的contactUS页面如下

   <script> $(document).ready(function() { 
           !function(d,s,id){var js,fjs=d.getElementsByTagName(s)   [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");

   });
 </script>
   <div id= "twitter_div">
            <a class="twitter-timeline" href="https://twitter.com//XXXX" data-widget-id="XXXXXX">Tweets by @@XXXX</a>
   </div>

编辑 2

我使用 Mouser 的解决方案解决了这个问题

所以现在我的主页更像下面。

<html>  
<head>
    <script>
        window.twttr = (function (d,s,id) {
            var t, js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
            js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
            return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
            }(document, "script", "twitter-wjs"));
    </script>
</head>
<body>
    <div id = "container" ></div>
</body>

我的 contactUS 页面就像，

 <script> $(document).ready(function() { 
      twttr.widgets.load();  
 });
 </script>
 <div id= "twitter_div">
        <a class="twitter-timeline" href="https://twitter.com//XXXX" data-widget-id="XXXXXX">Tweets by @@XXXX</a>
 </div>

Answer 1

我正在使用以下官方 Twitter 加载程序：

    //TWITTER 
    window.twttr = (function (d,s,id) {
    var t, js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
    js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
    return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
    }(document, "script", "twitter-wjs"));

查看参考资料window.twttr = (function (d,s,id)。您页面上的代码缺少此内容。

我的建议是将此加载器放入您的主页。每次将一些外部内容加载到名为 container 的 div 中时，请调用以下代码

twttr.widgets.load( $("#container")[0] );

现在 Twitter 应该在该元素中搜索 Twitter 元素并将它们正确解析为时间线。

twitter widget 仅在第一次加载时工作，然后失败

twitter widget only working in the first loading , then fails

javascript

html

css

twitter