就当是瞎扯淡吧^ ^ Nodejs版交流
就当是瞎扯淡吧^ ^ Nodejs版交流
各位在写SPA的时候引入disqus的时候是如何处理的呢,会不会遇到我这样的错误.
Cannot call method 'postMessage' of null
好的,让我们来讨论一下在使用Node.js构建单页面应用(SPA)时引入Disqus评论系统可能遇到的问题及解决方案。
问题背景
当你在SPA中引入Disqus评论系统时,可能会遇到类似以下的错误:
Cannot call method 'postMessage' of null
这个问题通常发生在Disqus加载完成后,尝试与主窗口进行通信时,但此时DOM元素可能还未完全加载完毕。
解决方案
示例代码
首先,我们需要确保在DOM元素完全加载后才初始化Disqus。我们可以通过监听DOMContentLoaded
事件来实现这一点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SPA with Disqus</title>
</head>
<body>
<!-- 这里是你的SPA内容 -->
<div id="disqus_thread"></div>
<!-- 引入Disqus的脚本 -->
<script id="dsq-count-scr" src="//your-disqus-shortname.disqus.com/count.js" async></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
var disqus_config = function () {
this.page.url = window.location.href;
this.page.identifier = '/path/to/your/page';
};
(function() {
var d = document, s = d.createElement('script');
s.src = '//your-disqus-shortname.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
});
</script>
</body>
</html>
解释
-
DOMContentLoaded 事件:
- 我们通过监听
DOMContentLoaded
事件确保在DOM完全加载后再执行Disqus的初始化代码。
- 我们通过监听
-
Disqus 配置:
- 在
disqus_config
函数中,你可以设置当前页面的URL和标识符(identifier),以便Disqus能够正确地识别每个页面。
- 在
-
动态加载Disqus脚本:
- 使用JavaScript动态创建一个
<script>
标签,并将其插入到文档中。这样做可以确保Disqus脚本在DOM加载完成后被加载。
- 使用JavaScript动态创建一个
通过这种方式,我们可以避免在DOM未完全加载时尝试与Disqus进行通信导致的错误。希望这能帮助你在使用Node.js构建SPA时更好地集成Disqus评论系统。
“SPA” 是指什么啊?
单页面应用啊…我用backbone.js写了个blog,引用disqus,如果跳到其他页面,也就是删除这个模版会跳这个错误,就算我把引入了script标签删除了也毛用= =
test embedded video ? <iframe width=“420” height=“315” src=“http://www.youtube.com/embed/CjaC8Pq9-V0” frameborder=“0” allowfullscreen></iframe>
embed标签可以
No…
貌似AngularJS不错。。。
当然可以!关于在单页应用(SPA)中使用 Disqus 的问题,通常会遇到一些与客户端渲染和初始化有关的错误。下面是一些常见的解决方法和示例代码。
常见问题及解决方案
-
确保 DOM 已经加载完成再初始化 Disqus: 确保在初始化 Disqus 之前,DOM 已经完全加载。你可以使用
DOMContentLoaded
事件来确保这一点。 -
动态加载 Disqus 评论框: 如果你在 SPA 中通过路由切换动态加载不同的内容,可能需要在内容加载后重新初始化 Disqus。
示例代码
1. 确保 DOM 加载完成
document.addEventListener('DOMContentLoaded', function() {
var disqusConfig = function () {
this.page.identifier = '/path/to/your/page';
this.page.url = 'http://yourwebsite.com/path/to/your/page';
};
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://YOURDISQUSUSERNAME.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
});
2. 动态加载 Disqus
如果你的页面内容是通过路由切换动态加载的,可以在内容加载完成后重新初始化 Disqus:
function loadDisqus(pageUrl, identifier) {
var disqus_config = function () {
this.page.identifier = identifier;
this.page.url = pageUrl;
};
var d = document, s = d.createElement('script');
s.src = 'https://YOURDISQUSUSERNAME.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
}
// 假设你有一个函数 handleRouteChange 来处理路由变化
function handleRouteChange(url) {
// 动态加载内容...
// 重新初始化 Disqus
loadDisqus(url, '/path/to/your/page');
}
总结
- 使用
DOMContentLoaded
事件确保 DOM 已经加载完成。 - 在内容动态加载后重新初始化 Disqus。
- 确保每次加载新的页面内容时,传递正确的 URL 和标识符给 Disqus。
希望这些示例代码能帮助你解决问题!如果还有其他问题或需要进一步的帮助,请告诉我。