Question

并感谢您花一点时间，

我已经访问了Twitter网站并根据他们的指示创建了一个嵌入式时间线。

如果我将生成的代码放在桌面上的简单html页面上，则所有代码都按预期工作。当我在SPA应用程序中放置相同的代码时，我只在网站上找到“关注我”链接。 SPA应用程序基于John Papa的例子。

没有抛出javascript错误。我猜测问题的核心可能与路由有关，如果我直接导航到我嵌入时间线的页面，则代码按预期运行。

即。 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（一个或多个）; js.id = ID; js.src = P + “：//platform.twitter.com/widgets.js”; fjs.parentNode.insertBefore（JS，FJS）;}} （文件， “脚本”， “推 - WJS”）;

Answer 1

我想出了一个解决方案，但我希望它可能对下一个人有所帮助，而不是将其解决：

将推特小部件代码放入新的html文档中。
让该文档包含一个名为handle
让html文档解析查询字符串并将其注入。
创建一个绑定到具有您的twitter句柄的observable的iframe，并将该句柄作为查询字符串参数传递。

iFrame数据绑定：

 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>

Answer 2

Twitter 脚本在加载后只检查一次 DOM。 SPA 会动态更改 DOM，因此您必须告诉 Twitter 脚本再次扫描 DOM：

const twttr = window.twttr
twttr.widgets.load()

如果脚本已经加载（通常是 https://platform.twitter.com/widgets.js），那么 twttr 对象在全局命名空间中可用。

以下是相关文档：https://developer.twitter.com/en/docs/twitter-for-websites/javascript-api/guides/scripting-loading-and-initialization

嵌入式时间线小部件在SPA中不起作用

2 个答案: