在输入更改时加载 twitter 配置文件
Posted
技术标签:
【中文标题】在输入更改时加载 twitter 配置文件【英文标题】：load twitter profile on input change 【发布时间】：2020-11-12 07:13:10 【问题描述】：我的应用中有一个部分，用户通过输入提供 Twitter 帐户，现在我想在输入更改时显示配置文件。
这里是关于如何显示嵌入式 Twitter 个人资料的 Twitter 文档，https://developer.twitter.com/en/docs/twitter-for-websites/timelines/overview
这是我在 jsfiddle 上的现场演示：
live demo
这是我的解决方案：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/… 【参考方案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);
)
【讨论】：
以上是关于在输入更改时加载 twitter 配置文件的主要内容，如果未能解决你的问题，请参考以下文章