从 ajax 加载的 html 加载 twitter 小部件？答案

【问题标题】：Load twitter widget from ajax-loaded html?从 ajax 加载的 html 加载 twitter 小部件？
【发布时间】：2012-07-03 21:56:10
【问题描述】：

我正在尝试使用一个非常标准的 twitter 搜索小部件，直接来自 twitter 网站：

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'search',
  search: '$AAPL',
  interval: 6000,
  title: 'AAPL',
  subject: '',
  width: 250,
  height: 300,
  theme: {
    shell: {
      background: '#8ec1da',
      color: '#ffffff'
    },
    tweets: {
      background: '#ffffff',
      color: '#444444',
      links: '#1985b5'
    }
  },
  features: {
    scrollbar: false,
    loop: true,
    live: true,
    hashtags: true,
    timestamp: true,
    avatars: true,
    toptweets: true,
    behavior: 'default'
  }
}).render().start();
</script>

它正在像这样加载：

$(".linktosymbol").bind("ajax:success", function(event, data, status, xhr) {
    $(".symboldetails").html("");
    var target = $("#" + $(this).attr('data-target'));
    target.html(data);
});

但它从未出现过，它似乎只是让屏幕空白并永远继续加载。想法？

【问题讨论】：

您是否尝试读取参数“数据”、“状态”和“xhr”，它们在说什么。如果您使用 chrome，您可以将它们放入控制台。 console.log(data);console.log(status);console.log(xhr);
是的，这些都可以。它返回 HTML 就好了——当它运行 twitter javascript 时，事情就变得一团糟。

标签： jquery ajax twitter

【解决方案1】：

有同样的问题。问题是 Twitter JS 使用 document.write 创建标记，这仅在生成文档时有效。否则它将创建一个新文档。

提示：调试时，使用http://twitter.com/javascripts/widgets/widget.js的原始代码会更容易。

<div id="twtr-widget"></div>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 6000,
  width: 500,
  height: 300,
  id: 'twtr-widget',
  theme: {
    shell: {
      background: '#333333',
      color: '#ffffff'
    },
    tweets: {
      background: '#000000',
      color: '#ffffff',
      links: '#4aed05'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('Znarkus').start();
</script>

这是我的解决方案。添加id 参数，Twitter 会将标记添加到具有该ID 的元素（这就是顶部div 的用途）。

注意：我在使用他们的脚本的缩小版本时遇到了问题，所以我改用了http://twitter.com/javascripts/widgets/widget.js。

【讨论】：

【解决方案2】：

$('#Twitter').click(function (e) {
  $.getScript
    (
      "http://widgets.twimg.com/j/2/widget.js",
      function () {
         makeTwitterWidget();
       }
     ); 
});

function makeTwitterWidget() {
new TWTR.Widget
    (
        {
            version: 2,
            type: 'profile',
            rpp: 3,
            interval: 3000,
            width: 'auto',
            height: 300,
            id: 'twtr-widget', // id of DIV
            theme:
        {
            shell:
                {
                    background: '#ff0000',
                    color: '#ffffff'
                },
            tweets:
                {
                    background: '#ffffff',
                    color: '#000000',
                    links: '#ff0000'
                }
        },
            features:
            {
                scrollbar: false,
                loop: true,
                live: true,
                hashtags: true,
                timestamp: true,
                avatars: false,
                behavior: 'default'
            }
        }
    ).render().setUser('sohelelite').start();
}

【讨论】：

【解决方案3】：

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 6000,
  width: 250,
  height: 300,
  theme: {
    shell: {
      background: '#333333',
      color: '#ffffff'
    },
    tweets: {
      background: '#000000',
      color: '#ffffff',
      links: '#4aed05'
    }
  },
  features: {
    scrollbar: true,
    loop: false,
    live: true,
    hashtags: true,
    timestamp: true,
    avatars: true,
    behavior: 'all'
  }
}).render().setUser('roby_jazz').start();
</script>

【讨论】：

即使你的答案可能绝对正确，解释你的答案也很重要！