Question

我有一个使用Play Framework开发的Web应用程序。在那里，我使用Ajax将大多数视图html页面加载到名为“容器”的div中。

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

我有这个html页面，其中包含我的twitter feed的小部件。

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

当我点击该页面加载到容器时，它将加载并且twitter feed将正确显示。然后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>

不是a的{{1}}标记。

为什么会这样？

修改

我的contactUS页面如下所示

Iframe

编辑2

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

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

   <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>

我的contactUS页面就像，

<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>

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小部件仅在第一次加载时工作，然后失败

1 个答案: