我正在使用聚合物入门套件2.0
（意思是<my-app></my-app>在index.html等内）：
|的的index.html
-------- \ my-app.html （自定义元素）
---------------- \ my-testView1.html （自定义元素）
---------------- \ my-testView2.html （自定义元素）
我需要在my-testView1.html和my-testView2.html页面上添加disqus注释（每个页面都有单独的线程）
我试图让它工作，并且在某一时刻chrome的控制台消息告诉我必须使用ajax方法（因为my-testView1.html和my-testView2.html都在{{1}内所以我的路由正在进行中，我想这就是为什么）而且它也给了我这个链接https://help.disqus.com/customer/portal/articles/472107-using-disqus-on-ajax-sites
<iron-pages>的结构：（我将example.com和myChannelID更改为实名）
my-testView1.html ...
<content select=".disqus1"></content>
</template>
<script>
Polymer({
is: 'my-testView1',
)};
</script>
<script>
var disqus_config = function () {
this.page.url = 'https://www.example.com/testView1';
this.page.identifier = '/testView1';
this.page.title = 'Test View1';
};
(function() {
var d = document, s = d.createElement('script');
s.src = 'https://MyChannelId.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
DISQUS.reset({
reload: true,
config: function () {
this.page.identifier = "/testView1";
this.page.url = "https://www.example.com/#!testView1";
}
});
</script>
</dom-module>
的结构（与第一个相同）：my-testView2.html
这里提到我这个问题的问题已在此处提出：Disqus comments don't work in a polymer custom element
在那里得到了一些帮助和指示，我设法达到了这一点。但我仍然无法使其与ajax一起工作，因此它会为每个页面加载单独的disqus线程。
也许它与 ...
<content select=".disqus2"></content>
</template>
<script>
Polymer({
is: 'my-testView2',
});
</script>
<script>
var disqus_config = function () {
this.page.url = 'https://www.example.com/testView2';
this.page.identifier = '/testView2';
this.page.title = 'Test View2';
};
(function() {
var d = document, s = d.createElement('script');
s.src = 'https://MyChannelId.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
DISQUS.reset({
reload: true,
config: function () {
this.page.identifier = "/testView2";
this.page.url = "https://www.example.com/#!testView2";
}
});
</script>
有关或者我必须在#!中插入它，但是如果我这样做，它只会打破布局，所以我把它放在一个单独的标签中，现在它ready: function() {}说。我不知道我在那里失踪了什么。
我只有50个声望赏金可供分享，但如果你知道如何让它工作，请你解释我如何解决它。
答案 0 :(得分：2)
<div id="disqus_thread">元素在页面中必须是唯一的，因为它是disqus库将在下载的线程中输入的地方。所以你应该在<iron-pages>标签之后添加它。
<div>
<iron-pages>
<view-1></view-1>
<view-2></view-2>
</iron-pages>
</div>
<div id="disqus_thread"></div>
然后，每次显示子页面时都必须致电DISQUS.reset()。您可以知道它，因为类iron-selected已添加到所选元素。因此，您可以侦听Polymer元素的attributeChange()回调，并检查它是否包含iron-selected类。如果确实如此，您可以使用要加载的线程的标识符调用DISQUS.reset()。
Polymer( {
is: 'view-1',
attributeChanged: function ( name, old, value )
{
if ( name == 'class' && this.classList.contains( 'iron-selected' ) )
{
//call DISQUS.reset() here
DISQUS.reset( {
reload: true,
config: function ()
{
this.page.identifier = "/testView1"
this.page.url = "https://www.example.com/testView1"
}
} )
}
}
} )
此外，由于您使用DISQUS.reset()，因此可以删除var disqus_config = ...
解决<div id=disqus_thread>元素的唯一性问题：
如果您想在右侧页面中插入，可以在调用appendChild()之前使用DISQUS.reset()移动它。例如，将它放在<div id='container'>元素中。
内部attributeChange()方法：
this.$.container.appendChild( document.getElementById( 'disqus_thread' ) )
在view-1 <template> ：
<template>
//Page content
<div id=container></div>
//Page footer
</template>
答案 1 :(得分：1)
创建一个html文件并将disqus代码放在那里：
<div id="disqus_thread"></div>
<script>
var disqus_shortname = 'YourDisqusId';
var disqus_identifier = '/view1';
var disqus_url = 'https://example.com/view1/';
var disqus_config = function () {
};
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'https://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
然后将iframe添加到链接该代码的自定义元素页面
<iframe src="../src/page1_disqus.html" style="width:100%; min-height:400px; border:0 none;"></iframe>
如果它只是在你的iframe中显示你的应用程序，那么将这个html文件放在你的src目录中但不是在单独的服务器上并使用共享链接而不是本地存储是个好主意{ {1}}
如果您需要将disqus放在多个页面上，只需创建另一个html文件，然后将其链接到需要以相同方式使用iframe的页面