DUX5.1分享模块页面元素缺失的解决办法

说说百度分享

百度分享是百度公司推出的一款提供地址收藏、分享以及发送的按钮工具,可以随意分享到很多的社交站点。以上是百度百科的原话,我在浏览官网的时候留意到官方最新的资讯在2012年,估计有好长时间不更新了,如果从2012年算起的话可以说是上古时代的产品了,已经逐渐被百度边缘化了。也许当初也是跟风推出的,后来不盈利逐渐给pass掉了。

小绿锁消失了

恩,你没有看错,我可爱的小绿锁竟然消失了。前几天在部署环境的时候用到了一款WP主题大前端DUX(5.1),很多人都知道这个主题。在部署完测试的时候,加载文章页面的时候我发现有一些网页元素缺失,打开控制台强制刷新缓存,发现console标签下有一些很奇怪的错误,定位了一下,查了些资料,发现是百度分享的js核心文件被Chrome给拦截掉了,原因是HTTPS页面引入了HTTP资源,Chrome会认为是不安全的脚本,所以给Block掉。没错就是那个神奇的按钮,地址栏最右侧,点击小盾牌,允许加载不安全的脚本,页面显示正常了,不过我可爱的小绿锁跟我料想的一样消失了,在此之前很多次都遇到过这种问题。

DUX5.1页面元素缺失
Chrome浏览器console控制台错误
可爱的小绿锁消失了


转到WP后台,发现DUX 5.1主题是有分享模块的,分享模块就调用了百度分享的代码,的确有一些HTTP的js资源,直接改成HTTPS就好了,重新缓存了下页面,显示又显示不正常了。于是,尝试直接访问了下百度分享的资源(HTTPS),不安全的证书。吐槽一下,在百度的众多产品都启用HTTPS的时候,这个边缘化的产品竟然连HTTPS都不启用,毕竟不让你更新,换一换证书,这么大的公司证书的钱总会是有的吧,不得不说这个产品已经被遗忘在角落了。
百度共享没有配置有效的HTTPS证书

为什么小绿锁会消失

简单来说就是当一个HTTPS页面想要加载HTTP js资源的话,Chrome是不允许加载的,也是出于安全考虑。当你允许加载的时候,你的小绿锁会消失掉,不要问我为什么,安全!

让小绿锁回到你身边

怎么办?强行本地加载!资源肯定是能拖下来,不过我很懒,就尝试着搜索了一下,有肯定是有的,这么多的站点,肯定有人要用到百度分享吧,肯定有人也遇到这样的问题吧。我是一个伸手党,找到了解决方案,也在github上找到了百度分享的js资源,开始搞吧。

  1. 将JS核心文件从Github上下载下来,解压,上传(我使用的winscp)到网站根目录(能访问到就行!)。

    • Github百度分享核心js文件
      上传百度分享代码
  2. 修改分享代码,修改https://bdimg.share.baidu.com/static/api/js/share.js改为本地代码//bdshare/static/api/js/share.js加载,大功告成!

这里有参考

  1. 百度分享不支持https的解决方案 - 细语呢喃
  2. GitHub - hrwhisper/baiduShare: 百度分享不支持Https的解决方案

题外话:需要大前端主题DUX5.1的小伙伴请联系我QQ私信我。

知识共享许可协议
本作品采用知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议进行许可。

Last modification:January 7th, 2019 at 03:32 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment