Javascript 输入更改时加载twitter配置文件_Javascript_Html_Jquery_Twitter

Javascript 输入更改时加载twitter配置文件

javascript html jquery twitter

Javascript 输入更改时加载twitter配置文件,javascript,html,jquery,twitter,Javascript,Html,Jquery,Twitter,我的应用程序中有一个部分，用户通过输入提供twitter帐户，现在我想在输入更改时显示配置文件以下是关于如何显示嵌入式Twitter配置文件的Twitter文档以下是我在JSFIDLE上的实时演示：这是我的解决方案：HTML <html lang="en"> <head> <script async src="https://platform.twitter.com/widgets.js" chars

我的应用程序中有一个部分，用户通过输入提供twitter帐户，现在我想在输入更改时显示配置文件

以下是关于如何显示嵌入式Twitter配置文件的Twitter文档

以下是我在JSFIDLE上的实时演示：

这是我的解决方案：HTML

<html lang="en">
   <head>
      <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>    
   </head>
   <body>
      <div class="tw-containeritter">
         <a class="twitter-timeline" href="" data-tweet-limit="1"></a>
      </div>
      <input id="twitterurl" placeholder="provide the twitter url" />
   </body>
</html>

现在，当用户提供概要文件URL时，概要文件不会显示

我需要做些什么来解决这个问题呢？

老实说，我不是JQuery方面的专家，但我成功了。我发现要更新DOM，应该使用事件删除


$（“#main”）.on（'input'，'#twitterurl'，函数（e）{
var twitterUrl=$（this.val（）；
$（'.tw containeriter'）。追加（“”）；
$（'.twitter timeline'）.attr（'href'，twitterUrl）；
$（'#twitterurl'）.blur（）；
setTimeout（函数（）{
log（“setTimeout twitter”）；
twttr.widgets.load（）；
}, 2000);
})

你说的“我想显示个人资料”是什么意思？用户提供的Poltorin Twitter个人资料仍然不明白。您需要重定向到此配置文件吗？或者你需要特定的账户数据吗？Poltorin，我只想使用Twitter时间线显示Twitter个人资料，（嵌入的Twitter个人资料）这里是文档

$("#twitterurl").on('change', function(e) {

    var twitterUrl = $(this).val();
    $(this).attr('href', twitterUrl);

    setTimeout(function() {

        console.log("setTimeout twitter");
        twttr.widgets.load();
    }, 2000);
})

<!DOCTYPE html>
<html lang="en">
   <head>
      <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>    
   </head>
   <body id="main">
      <div class="tw-containeritter"></div>
      <input id="twitterurl" placeholder="provide the twitter url" />
   </body>
</html>


$("#main").on('input', '#twitterurl', function(e) {
    var twitterUrl = $(this).val();
    $('.tw-containeritter').append("<a class='twitter-timeline' href='' data-tweet-limit='1'></a>");
    $('.twitter-timeline').attr('href', twitterUrl);
    $('#twitterurl').blur();

    setTimeout(function() {
        console.log("setTimeout twitter");
        twttr.widgets.load();
    }, 2000);
})