在最新的chrome中,如果打开的网页不是使用的https,则会地址拦左侧提示不安全,由于有强迫症,所以开启了https。当开启https后发现,有的网页不会显示那个绿色的小锁的安全图标。通过查看资料,发现是因为网页中使用了多说社会评论组件,评论组件中使用的用户头像和表情都是使用的http而不是https,通过查看多说的开发文档,并没有看到关于这个问题的解决办法,所以感觉多说对这个支持的不是特别好。
由于没看到官方的解决办法,所以只有自己解决了。通过查看页面中加载的头像,确实是使用的http:
由于头像本身支持https,所以只需将头像地址改为https即可,可以通过下面步骤修改:
1、将引用多说服务器上的js文件 embed.js下载到本地并通过如下方式引入:
<script type="text/javascript" src="js/embed.js"></script>
2、由于下载的js文件是压缩的,所以需要转成可读格式的文件以后于修改,可经过第三方网站进行格式化,如:http://tool.oschina.net/codeformat/js/
3、在embed.js文件中找到如下内容:
avatarUrl: function(e) { return e.avatar_url || rt.data.default_avatar_url },
将其修改为:
avatarUrl: function(e) { if (e.avatar_url) { e.avatar_url = e.avatar_url.replace(/^http:\/\//, 'https://'); } else if (rt.data.default_avatar_url) { rt.data.default_avatar_url = rt.data.default_avatar_url.replace(/^http:\/\//, 'https://'); } return e.avatar_url || rt.data.default_avatar_url },
修改完成以后,再次刷新页面,发现原来的头像地址由http变成了https
以为修改到这样就修改完了,其实还没有。当试图去评论框进行评论的时候,当页面加载表情时,突然现地址拦中绿色的锁消失了。通过查看加载表情的请求发现,原来表情使用的链接的协议都是http:
所以为了支持表情,还需要将表情中的链接转为https。
要修改表情中的链接,同样需要修改embed.js文件。打开文件,找到如下内容:
function t(t, s) { var i = 0 === e.indexOf("微博") ? "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/" + s.replace("_org", "_thumb") : S.STATIC_URL + "/images/smilies/" + s; "WordPress" === e && (t = " " + t + " "), a += '<li><img src="' + i + '" title="' + _(t) + '" /></li>' }
将其修改为:
function t(t, s) { var i = 0 === e.indexOf("微博") ? "https://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/" + s.replace("_org", "_thumb") : S.STATIC_URL + "/images/smilies/" + s; "WordPress" === e && (t = " " + t + " "), a += '<li><img src="' + i + '" title="' + _(t) + '" /></li>' }
此时,重新刷新一下页面,再次触发评论框中的表情,发现表情的链接已转为https:
本以为这次真的修改完了,当去试图用表情评论一下,当评论后一刷新页面,发由那个小锁又没有。又经过仔细查找,发现原来是加载的评论里面的表情还是使用http协议:
通过查看embed.js源代码,找到了加载评论内容的地址,将下面内容
if (t += "<p>", s.parents.length >= i.max_depth && (!i.show_context || i.max_depth > 1) && s.parent_id && lt[s.parent_id] && (t += '<a class="ds-comment-context" data-post-id="' + s.post_id + '" data-parent-id="' + s.parent_id + '">' + z.reply_to + u(lt[s.parent_id].toJSON().author.name) + ": </a>"), t += s.message + '</p><div class="ds-comment-footer ds-comment-actions', s.vote > 0 && (t += " ds-post-liked"), t += '">', t += s.url ? et.timeAnchor(s.created_at, s.url) : et.timeText(s.created_at), "duoshuo" == s.source ? (t += '<a class="ds-post-reply" href="javascript:void(0);"><span class="ds-icon ds-icon-reply"></span>' + z.reply + "</a>" + et.likePost(s) + '<a class="ds-post-repost" href="javascript:void(0);"><span class="ds-icon ds-icon-share"></span>' + z.repost + '</a><a class="ds-post-report" href="javascript:void(0);"><span class="ds-icon ds-icon-report"></span>' + z.report + "</a>", s.privileges["delete"] && (t += '<a class="ds-post-delete" href="javascript:void(0);"><span class="ds-icon ds-icon-delete"></span>' + z["delete"] + "</a>")) : ("qqt" == s.source || "weibo" == s.source) && (t += '<a class="ds-weibo-comments" href="javascript:void(0);">' + z.comments, s.type.match(/\-comment$/) || (t += '(<span class="ds-count">' + s.comments + "</span>)"), t += '</a><a class="ds-weibo-reposts" href="javascript:void(0);">' + z.reposts, s.type.match(/\-comment$/) || (t += '(<span class="ds-count">' + s.reposts + "</span>)"), t += "</a>"), t += "</div></div></div>", i.max_depth > 1 && (s.childrenArray || s.children) && "weibo" != s.source && "qqt" != s.source) { t += '<ul class="ds-children">'; var c = lt.getJSON(s.childrenArray || s.children); if (c) for (var s, d = -1, p = c.length - 1; p > d;) s = c[d += 1], console.log(s) t += et.post({ post: s, options: i }); t += "</ul>" }
修改为
if (t += "<p>", s.parents.length >= i.max_depth && (!i.show_context || i.max_depth > 1) && s.parent_id && lt[s.parent_id] && (t += '<a class="ds-comment-context" data-post-id="' + s.post_id + '" data-parent-id="' + s.parent_id + '">' + z.reply_to + u(lt[s.parent_id].toJSON().author.name) + ": </a>"), t += s.message.replace(/http:\/\/img.t.sinajs.cn/, 'https://img.t.sinajs.cn') + '</p><div class="ds-comment-footer ds-comment-actions', s.vote > 0 && (t += " ds-post-liked"), t += '">', t += s.url ? et.timeAnchor(s.created_at, s.url) : et.timeText(s.created_at), "duoshuo" == s.source ? (t += '<a class="ds-post-reply" href="javascript:void(0);"><span class="ds-icon ds-icon-reply"></span>' + z.reply + "</a>" + et.likePost(s) + '<a class="ds-post-repost" href="javascript:void(0);"><span class="ds-icon ds-icon-share"></span>' + z.repost + '</a><a class="ds-post-report" href="javascript:void(0);"><span class="ds-icon ds-icon-report"></span>' + z.report + "</a>", s.privileges["delete"] && (t += '<a class="ds-post-delete" href="javascript:void(0);"><span class="ds-icon ds-icon-delete"></span>' + z["delete"] + "</a>")) : ("qqt" == s.source || "weibo" == s.source) && (t += '<a class="ds-weibo-comments" href="javascript:void(0);">' + z.comments, s.type.match(/\-comment$/) || (t += '(<span class="ds-count">' + s.comments + "</span>)"), t += '</a><a class="ds-weibo-reposts" href="javascript:void(0);">' + z.reposts, s.type.match(/\-comment$/) || (t += '(<span class="ds-count">' + s.reposts + "</span>)"), t += "</a>"), t += "</div></div></div>", i.max_depth > 1 && (s.childrenArray || s.children) && "weibo" != s.source && "qqt" != s.source) { t += '<ul class="ds-children">'; var c = lt.getJSON(s.childrenArray || s.children); if (c) for (var s, d = -1, p = c.length - 1; p > d;) s = c[d += 1], console.log(s) t += et.post({ post: s, options: i }); t += "</ul>" }
这样,在加载评论内容的时候,如果评论中有表情,则加载表情的时候会将表情链接中的http替换成https。至此,多说社会评论框组件支持https的修改已完成,这次是真的完成了!!!!!!!!!!!!!!!!!