嵌入式时间轴部件不能在SPA工作

我已经去过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){

变种JS，FJS = d.getElementsByTagName（S）[0]，p值=/^ HTTP：/测试（d.location）的 'http'： 'https' 时，如果（d？！的getElementById（ID））{JS = d.createElement（一个或多个）; js.id = id; js.src = p +“：//platform.twitter.com/widgets.js”; fjs.parentNode.insertBefore（js，fjs）;}} （document，“script”，“twitter-wjs”）;

来源

2013-07-09 James Fleming

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

把Twitter的插件代码到一个新的HTML文档。
将那个文件取入一个叫做句柄的查询字符串
让那个html文件解析查询字符串并注入它。
创建绑定到具有您的twitter句柄的observable的iframe，并将该句柄作为querystring参数传入。

的iFrame的数据绑定：

iframe data-bind="with: twitter, attr: { src: '../App/views/shared/twitter.html?handle=' + twitter() }" style="height:622px;" seamless="seamless"

的Twitter页面

<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-12 11:36:51

嵌入式时间轴部件不能在SPA工作

回答

相关问题