在输入更改时加载 twitter 配置文件答案

【问题标题】：load twitter profile on input change在输入更改时加载 twitter 配置文件
【发布时间】：2020-11-12 07:13:10
【问题描述】：

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

这里是关于如何显示嵌入式 Twitter 个人资料的 Twitter 文档，https://developer.twitter.com/en/docs/twitter-for-websites/timelines/overview

这是我在 jsfiddle 上的现场演示：

这是我的解决方案：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>

这里是js

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

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

    setTimeout(function() {

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

现在当用户提供个人资料 URL 时，个人资料不会显示

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

【问题讨论】：

“我想显示个人资料”是什么意思？
Poltorin Twitter 个人资料由用户提供
还是不明白。您需要重定向到此个人资料吗？还是您需要特定的帐户数据？
Poltorin，我只想使用 Twitter 时间线显示 Twitter 个人资料，（嵌入式 Twitter 个人资料）这里是 docs developer.twitter.com/en/docs/twitter-for-websites/timelines/…

标签： javascript html jquery twitter

【解决方案1】：

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

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

【讨论】：