通过jquery加载twitter feed ajax

如何通过AJAX加载页面加载下面的twitter？通过jquery加载twitter feed ajax

我有一个名为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页面上twitter的小部件，

<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; 
     }); 

    });

对萤火虫的错误信息，

TWTR没有定义[打破这个错误]（17超出范围16）

我怎样才能解决这个？

来源

2011-10-28 laukok

的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; 
    }); 

});

完美运作。

来源

2011-10-28 13:09:04 laukok

看起来像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>

来源

2011-10-28 00:58:27 numbers1311407

感谢。尝试它，但仍然无法正常工作... – laukok

虽然我得到了不同的永恒循环错误，但是...'部件... 6460501（第12行）尝试在已清除的范围内运行编译并运行脚本 [Break On This错误] if（！window.twttr）{window.twttr = {}}（fun ... cument.attachEvent（“onclick”，A）}}}）（）;' – laukok

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

// 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: {

来源

2011-12-24 09:45:00 Lorentz

谢谢！不需要iframe –

如何在不使用iframe的情况下执行此操作？你能进一步解释吗？ – Kalanamith

这帮了我很多，谢谢！ +1 – gen

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

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

来源

2012-04-10 12:06:16 BTE

通过jquery加载twitter feed ajax

回答

相关问题