https协议下分享插件的实现

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

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

实现js:

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

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

                                   

                                   

                                                                   

                                   

                                    更多

                                   

                             

                             

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

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

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

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

2）在当前模版页通过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，依托公众号才能实现，这个优化我们后面会用另一篇文章来讲述。