Javascript Twitter嵌入式时间线回调
我一直在对Twitter的嵌入式时间表进行大量研究。我一直在试图弄清楚是否有可能知道时间线何时完成加载并显示在页面上。这一点,但尚未得到实施。我已经走到了死胡同,我希望有人能帮我找到解决办法。以下是我到目前为止的发现: 添加嵌入式时间线的代码:Javascript Twitter嵌入式时间线回调,javascript,twitter,Javascript,Twitter,我一直在对Twitter的嵌入式时间表进行大量研究。我一直在试图弄清楚是否有可能知道时间线何时完成加载并显示在页面上。这一点,但尚未得到实施。我已经走到了死胡同,我希望有人能帮我找到解决办法。以下是我到目前为止的发现: 添加嵌入式时间线的代码: <a class="twitter-timeline" href="https://twitter.com/twitterapi" data-widget-id="YOUR- WIDGET-ID-HERE">Tweets by @twi
<a class="twitter-timeline" href="https://twitter.com/twitterapi" data-widget-id="YOUR- WIDGET-ID-HERE">Tweets by @twitterapi</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
!函数(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=“//platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}(文档,“脚本”,“twitter wjs”);
运行脚本时会发生什么情况:
widget.js的,但添加了回调。我无法让它工作
对于日志问题,我很抱歉,但我希望有人能够提供帮助。谢谢。即使已经过了1个月,我也要在这里发布我的解决方案,以防万一有人再次找到这篇文章,我要做的就是投票,直到iframe的宽度大于1,作为回调的指标
if ($('.twitter-timeline').length) {
//Timeline exists is it rendered ?
interval_timeline = false;
interval_timeline = setInterval(function(){
console.log($('.twitter-timeline').width());
if ($('.twitter-timeline').hasClass('twitter-timeline-rendered')) {
if ($('.twitter-timeline').width() > 10) {
//Callback
clearInterval(interval_timeline);
DoWhatEverYouNeedHere();
}
}
},200);
}
当您复制并粘贴从Twitter获得的代码时,您必须替换此代码:
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
!函数(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http://.test(d.location)''http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+“://platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}(文档,“脚本”,“twitter wjs”);
为此:
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";js.setAttribute('onload', "twttr.events.bind('rendered',function(e) {doSomething()});");fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
!函数(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http://.test(d.location)''http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+“://platform.twitter.com/widgets.js”;js.setAttribute('onload',“twttr.events.bind('rendered',',函数(e){doSomething());”;fjs.parents.insertBefore,;“脚本”,“推特wjs”);
当然,上面调用的doSomething函数是在加载和渲染嵌入的时间线时运行的回调函数
另外,我猜这个解决方案在InternetExplorer中不起作用,因为它不支持脚本元素的onLoad事件
最后,您可以在中看到我解决此问题的方法。您可以尝试使用Javascript工厂而不是属性绑定。createTimeline方法返回一个承诺,以便您可以在那里链接加载后活动。
请参阅twitter文档:
根据您尝试执行的操作,检查宽度可能不起作用,如果发生这种情况,请尝试检查高度的值。我必须这样做才能使我的东西起作用。刮板是如何工作的?我看了看,您正在通过脚本从另一个域访问IFrame的内容,这会导致安全错误。这是一个很酷的想法,我我只是想知道你是否做了一些额外的事情来解决这个问题。@Andy,scraper不会尝试从另一个域访问IFrame。Twitter小部件包括一个动态创建IFrame的脚本,但它不会直接从另一个域加载它,所以你在尝试刮取IFrame时不会出现任何安全错误。我不知道de>twttr.events.bind
。它似乎也在正确的时间触发。对于任何想知道哪些事件可绑定的人,您可以在此处找到有关所有事件的信息:。此外,只有IE8及以下版本不支持脚本的onload事件。IE9+支持(请参阅)。
twttr.widgets.createTimeline(
"YOUR-WIDGET-ID-HERE",
document.getElementById("container"),
{
height: 400,
chrome: "nofooter",
linkColor: "#820bbb",
borderColor: "#a80000"
}
)
.then(function(){
DoSomething();
});