2

感谢您抽出一点时间，

我已经访问了 twitter 网站，并按照他们的说明创建了一个嵌入式时间线。

如果我将生成的代码放在桌面上的一个简单的 html 页面上，一切都会按预期工作。当我在我的 SPA 应用程序中放置相同的代码时，我只会在网站上获得一个“跟我来”链接。SPA 应用程序基于 John Papa 示例构建。

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

IEhttp://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");

4

2 回答 2

2

我想出了一个解决方案，但不是把它拿下来，我希望它可以帮助下一个人：

  1. 将 twitter 小部件代码放入一个新的 html 文档中。
  2. 让该文档接收一个名为句柄的查询字符串
  3. 让那个 html 文档解析查询字符串并注入它。
  4. 创建一个绑定到具有您的 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>
于 2013-07-12T11:36:51.520 回答
1

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

于 2021-07-09T14:02:15.523 回答