感谢您抽出宝贵的时间,
我已访问 Twitter 网站并按照他们的指示创建了一个嵌入式时间线。
如果我将生成的代码放在桌面上的一个简单的 html 页面上,一切都会按预期工作。当我将相同的代码放入 SPA 应用程序时,我只能在网站上看到一个“关注我”链接。 SPA 应用程序基于 John Papa 示例构建。
没有抛出 JavaScript 错误。我猜测问题的核心可能与路由有关,b/c 如果我直接导航到嵌入时间线的页面,代码将按预期工作。
即http://localhost:50000/App/views/shared/pillar.html
但是,我还有一个谷歌日历小部件,并且可以按预期工作。 在 Chrome、FF、IE 中对此进行了测试。行为是相同的。
关于我如何进一步诊断这个问题有什么想法吗?或者我的方法完全错误?我只是想将最新的 n 条推文添加到基本上是一个博客中。没什么太花哨的。
<a class="twitter-timeline" href="https://twitter.com/PoundingCode" data-widget-id="313336765203218432">Tweets by @PoundingCode</a>
<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);}} (文档,“脚本”,“twitter-wjs”);
最佳答案
我找到了一个解决方案,但我没有把它记下来,而是希望它可以帮助下一个人:
- 将 Twitter 小部件代码放入新的 html 文档中。
- 让该文档接受一个名为句柄的查询字符串
- 让该 html 文档解析查询字符串并注入(inject)它。
- 创建一个绑定(bind)到具有您的 Twitter 句柄的可观察对象的 iframe,将该句柄作为查询字符串参数传入。
iFrame 数据绑定(bind):
iframe data-bind="with: twitter, attr: { src: '../App/views/shared/twitter.html?handle=' + twitter() }" style="height:622px;" seamless="seamless"
推特页面
<body>
<a class="twitter-timeline" href="https://twitter.com/" + get('handle') data-widget-id="313336765203218432" ></a>
<script>
function get(name) {
if (name = (new RegExp('[?&]' + encodeURIComponent(name) + '=([^&]*)')).exec(location.search))
return decodeURIComponent(name[1]);
}
!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>
</body>
关于twitter - 嵌入式时间轴小部件在 SPA 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17548161/