Question

如何通过AJAX加载页面加载下面的Twitter？

我在名为twitter.php

的网页上有推特小部件

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 30000,
  width: 455,
  height: 563,
  theme: {
    shell: {
      background: '#e70e6f',
      color: '#ffffff'
    },
    tweets: {
      background: '#ccc8cc',
      color: '#ffffff',
      links: '#08a9cd'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    behavior: 'all'
  }
}).render().setUser('gtteam').start();
</script>

html，

<a href="#" class="load">click to load</a> 

<div id="container"></div>

jquery，

$(document).ready(function(){

        $('.load').click(function(){

             $('#container').load('twitter.php');
             return false;
        });

    });

firebug上的错误消息，

TWTR未定义[打破此错误]（17超出范围16）

我怎样才能解决这个问题？

Answer 1

如果你想避免使用iframe，你应该能够将widget.js调用添加到你的母版页，然后在twitter调用中添加一个hold div和id参数，它应该可以工作。

// stick this in your index.html page <head>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>

// on the page called via ajax

<div id="twtr-widget"></div>
<script type="text/javascript">
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 6,
  interval: 6000,
  width: 300,
  height: 'auto',
  id: 'twtr-widget',
  theme: {

Answer 2

iframe是我认为的解决方案：

iframe.php，

<iframe src="twitter.php" marginheight="0" marginwidth="0" frameborder="0" 
style="border:0;height:600px;width:600px;" scrolling="no"   ></iframe>

twitter.php，

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 30000,
  width: 455,
  height: 563,
  theme: {
    shell: {
      background: '#e70e6f',
      color: '#ffffff'
    },
    tweets: {
      background: '#ccc8cc',
      color: '#ffffff',
      links: '#08a9cd'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    behavior: 'all'
  }
}).render().setUser('gtteam').start();
</script>

jquery的，

$(document).ready(function(){

    $('.load').click(function(){
        $('#container').load('iframe.php');
        return false;
    });

});

完美无缺。

Answer 3

看起来像same origin policy。您的脚本无法从其他域中提取其他脚本。

要解决这个问题，你可以简单地将twitter加载到页面中，而不是作为Ajax的一部分。

// stick this in your page <head>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>

// then this can be loaded via Ajax.
<script>
new TWTR.Widget({
  // ...
}).render().setUser('gtteam').start();
</script>

Answer 4

使用jQuery加载你的twitter小部件异步;使用getScript（）jQuery API下载并运行'widget.js'脚本 ...让红色推特小部件异步，准备好了吗？

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

'makeTwitterWidget（）'是您创建twitter实例的函数：

function makeTwitterWidget() {
new TWTR.Widget
    (
        {
            version: 2,
            type: 'profile',
            rpp: 3,
            interval: 3000,
            width: 'auto',
            height: 300,
            id: 'twtr-widget',
            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('gtteam').start();

}

You can make custom twitter widget at http://twitter.com/about/resources/widgets/widget_list

通过jquery ajax加载twitter feed

4 个答案: