如何使disqus注释javascript代码在聚合物自定义元素中工作
How to make a disqus comments javascript code to work in a polymer custom element
我使用的是聚合物入门工具包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都在<iron-pages>
所以有路由,我想这就是为什么),它也给了我这个链接https://help.disqus.com/customer/portal/articles/472107-using-disqus-on-ajax-sites
my-testView1.html
的结构:(我将example.com和myChannelID更改为实名)
...
<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
的结构(与第一个相同):
...
<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>
把我带到这一点的问题已经在这里问过了:Disqus注释不能在聚合物自定义元素中工作在一些帮助和指导下,我设法达到了这一点。但是我仍然不能使它与ajax一起工作,这样它就可以将单独的磁盘线程加载到每个页面。
也许它与#!
有关,或者我必须将它插入ready: function() {}
中,但如果我这样做,它只是破坏了布局,所以我把它放在一个单独的标签中,现在它显示为DISQUS is not defined
。我不知道我错过了什么。
我只有50个声望赏金来分享,但是如果你知道如何使它工作,你可以告诉我如何修复它
<div id="disqus_thread">
元素在页面中必须是唯一的,因为它是磁盘库将插入下载线程的地方。所以你应该把它添加到<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>
元素的唯一性问题:
如果你想把它插入到右页里面,你可以在调用DISQUS.reset()
之前使用appendChild()
来移动它。例如,把它放在<div id='container'>
元素中。
Inside attributeChange()
method:
this.$.container.appendChild( document.getElementById( 'disqus_thread' ) )
view-1 <template>
:
<template>
//Page content
<div id=container></div>
//Page footer
</template>
另一个可能的解决方案是:
创建一个html文件,并将diss代码放入其中:
<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目录中,而是放在一个单独的服务器上使用共享链接,而不是本地存储../src/
如果你需要在多个页面上放置磁盘,只需创建另一个html文件,然后将其链接到需要使用iframe的页面
- 如何使用javascript独立地为聚合物自定义元素的每个实例的lightdom设置样式
- 聚合物 - 访问自定义元素内的 DOM 输入元素
- 聚合物种子-自定义元素依赖关系
- 自定义元素之间的聚合物双向结合[包括示例]
- 聚合物:创建一个“;一般的“;自定义元素
- jQuery破坏Meteor中自定义聚合物事件的“细节”
- 聚合物自定义元素和聚合物手势
- 如何在没有事件的自定义聚合物元素之间进行讨论
- 修改聚合物的采样器基架以加载自定义元素而不是 iframe
- 聚合物自定义元素阴影 DOM 问题
- 获取嵌套在聚合物纸张对话框中的自定义Web组件内内容的客户端高度
- 自定义元素中的聚合物 IronFormElementBehavior
- 聚合物,访问自定义元素/命名空间问题
- 在自定义聚合物元素中使用 jquery toggle()
- 如何在聚合物中的自定义元素中成功查询选择器
- 聚合物查询选择器在聚合物元素中找不到自定义聚合物元素
- 聚合物在我的自定义函数之后注册所有元素
- 如何为自定义聚合物元素创建方法并在主应用程序中调用它
- 我可以在我的自定义聚合物元素中使用jquery吗?
- 如何将属性从自定义聚合物元素绑定到 angularjs