https协议下分享插件的实现

      分享，就是让更多的人知道，传播出去，是众多平台的基础功能，这样的功能一般都会被大神们集合成组件，供开发人员使用，可高效复用。本文就针对分享的几种情况，汇总下怎么引用，复杂的情况怎么解决？

情况一：http访问协议直接增加如下js即可。

实现js:

<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"slide":{"type":"slide","bdImg":"0","bdPos":"right","bdTop":"100.1099853515625"},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到：","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>

情况2：https协议下怎么引用？

如果像第一种情况引用的话，https协议下的跨域问题就过不去，应对之策是把分享api组件copy到自己的工程目录下，并在分享模版界面增加如下代码：

<div class="bdsharebuttonbox" data-tag="share_1">

                                    <a class="bds_weixin" data-cmd="weixin"></a>

                                    <a class="bds_qzone" data-cmd="qzone"></a>

                                    <a class="bds_tsina" data-cmd="tsina"></a>                               

                                    <a class="bds_sqq" data-cmd="sqq"></a>

                                    <a class="bds_more" data-cmd="more">更多</a>

                                    <a class="bds_count" data-cmd="count"></a>

                              </div>

                              <script>

                                window._bd_share_config = {

                                  "common" : {

                                  "bdSnsKey" : {},

                                  "bdText" : "",  //分享时的标题

                                  "bdMini" : "2",

                                  "bdMiniList" : false,

                                  "bdPic" : "", //此处为分享时自带的图片

                                  "bdStyle" : "0",

                                  "bdSize" : "32",

                                  "bdUrl" : '', //此处为后台要进行分享的内容的定义

                                  "bdDesc":'',  //分享时的文本摘要

                                  },

                                  "share" : {}

                                };

                                //此处为需要引入的百度分享的js文件

                                with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='/项目名/static/api/js/share.js'];

                                </script>

分享参数根据自己项目的实际情况添加。

情况3：https协议下引入百度分享插件后，和当前模版页中的js冲突，这是最令人头疼的事。

解决方案：通过iframe来实现。

1)把情况2中的模版引用代码单独放到一个html中，比如命名为fenxiang.html

2)在当前模版页通过iframe来调用，<iframe src="/static/api/fenxiang.html" frameborder="0" width="500px;" height="500px;"></iframe>

注：根据具体页面显示情况，还要相应的调整该模版页面样式。

3)这个时候，父类页面和子类页面的传参就成了问题。

可以通过 var parentWindow = window.parent;//获得父类页面document信息。

然后通过parentWindow.document.getElementsByClassName、parentWindow.document.getElementsByTagName、parentWindow.document.getElementsByID方法，配合document属性操作，获取想要的值。

值得注意的是，  "bdUrl" : '', //此处为后台要进行分享的内容的定义，

目前分享页面在新的框架iframe里，默认bdUrl分享获取的是当前页，而实际上我们分享的是父类页面，

可以通过var  bdUrl=parentWindow.location.href;//获取父类页面url地址。

在插件分享配置window._bd_share_config = {中的bdUrl，如下表达： "bdUrl" :  bdUrl, //此处为后台要进行分享的内容的定义

通过以上三种情况的结合，大部分分享组件的引用问题都可以解决，对于腾讯分享规则的改变，要微信里带图片，必须要使用腾讯的jssdk，依托公众号才能实现，这个优化我们后面会用另一篇文章来讲述。