Twitter 嵌入式时间线消失了答案

【问题标题】：Twitter Embedded Timeline DisappearsTwitter 嵌入式时间线消失了
【发布时间】：2014-04-09 14:47:19
【问题描述】：

我通过 Jquery 嵌入了一个 twitter 时间线，这样当用户点击一个按钮时，它会创建带有时间线的 div……当他再次点击它时，时间线就会消失。

这可行，但是当我再次单击该按钮时，它不想再次加载。所以我每页只能加载一次。

$("#TWT").click(function(e) {
        e.preventDefault(); 
        if(loadHtml == "empty") {
        $( "#authorName" ).load( "test.html" );
        loadHtml = "full";
        } else if(loadHtml == "full") {
            $("#tweetDiv").remove();
            loadHtml = "empty";
            }
    });

test.html 包含嵌入的内容，loadHtml 设置为空。

我的实际实现更复杂，但我已将其缩减到此，以便我可以看到有什么问题。包含 twitter 提要的 div 重新出现...但提要不再加载。

在不加载的情况下多次向页面提供嵌入式时间线是否存在问题？如果我刷新页面，它会再次起作用......只有一次。

PS：澄清一下——这不是 div 不再出现的问题。当我查看生成的 html 时，它显示得很好。只是推特不想再加载了。

【问题讨论】：

标签： javascript jquery twitter

【解决方案1】：

我刚刚遇到了类似的问题并解决了。您必须包含一些类似 twitter 提供的 javascript：

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

我通过注释 if() 语句解决了这个问题：

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

【讨论】：

【解决方案2】：

#tweetDiv 是#authorName 的父级吗？如果是这种情况， $("#tweetDiv").remove() 将导致 #authorName 也从 DOM 中删除，这意味着您的下一个 .load() 没有针对页面上的任何元素。

附带说明，如果您要显示/隐藏内容，我建议您使用 .show() 和 .hide()，它们在浏览器上的成本较低，因为它不会改变 DOM节点。

【讨论】：

感谢您的回复。不，#tweetDiv 不是#authorName 的父级。我也尝试过创建一个包含所有 twitter 嵌入代码的 var，然后将其放入（无负载）。因此，当我在其中放入文本时，div 仍然正确显示（除了 twitter 代码），只是 twitter 嵌入仅显示一次。