百度分享异步加载问题、分页,无效果解决[通俗易懂]

百度分享异步加载问题、分页,无效果解决[通俗易懂]使用百度分享的时候,如果所涉及到的html部分是后加载进来的,如ajax等异步请求成功后,加载进来,那么百度分享就有可能出现错误。我在使用的时候,遇到了两个问题。在这里记录一下。1、无法把所需要分享的内容传值到百度分享里。  百度分享的配置里有两个值,bdText,bdDesc,这两个内容,分别分享标题和内容。  内容是异步加载进来的,所以在百度分享相关代码是在加载成功后运

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用
使用百度分享的时候,如果所涉及到的html部分是后加载进来的,如ajax等异步请求成功后,加载进来,那么百度分享就有可能出现错误。

我在使用的时候,遇到了两个问题。在这里记录一下。

1、无法把所需要分享的内容传值到百度分享里。

    百度分享的配置里有两个值,bdText,bdDesc,这两个内容,分别分享标题和内容。

    内容是异步加载进来的,所以在百度分享相关代码是在加载成功后运行的。但是,在使用中,始终无法将想分享的内容,传值给bdText,bdDesc。

    后来,在百度分享的api里发现了一个事件:onBeforeClick,在分享前的点击事件。于是我就先获取鼠标所在元素,然后在onBeforeClick事件里,根据鼠标所在元素定位获取到所需要分享的内容,进行传值。

2、分页时,百度分享无效。

   当点击到第二个及以后时,百度分享无效。通过百度查,网上 hupan508给出了解决方案。因为百度分享执行后,会创建全局的window.__bd_share_main,所以   需要在 ajax请求完成后执行一下:window.__bd_share_main.init(); 根据这个解决方案,最终解决了问题。

var ele;
var bdTitle;
var bdAbstract;

  $(document).mouseover(function (e) {
        ele = e.target;
    });
    //设置分享
    function beforeShareClick(cmd, config, bdTitle, bdAbstract) {
        
        // 根据ele,获取 bdTitle, bdAbstract的值
        
        
        //设置 config
        if (shareTitle) {
            config.bdText = bdTitle;
            config.bdDesc = bdAbstract;

        }
        return config;
    }

    //百度分享代码,放入 ajax请求成功后执行
    function baiduShare(){
        if(window._bd_share_main){          //先执行初始化bdshare
            window._bd_share_main.init();
        }                                     

        window._bd_share_config = {
            common: {
                onBeforeClick: beforeShareClick,
                bdText: bdTitle,
                bdDesc: bdAbstract,
                bdUrl: window.location.href
            }
        };
        with (document)0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion=' + ~(-new Date() / 36e5)];
    }

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/184643.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 代理模式proxy_网络代理设置

    代理模式proxy_网络代理设置代理模式 Proxy动机模式定义实例结构要点总结笔记动机在面向对象系统中,由于某种原因(比如对象创建的开销很大,或者某些操作需要安全控制,或者需要进程额外的访问等),直接访问会给使用者,或者系统结构带来很多麻烦.如何在不是去透明操作对象的同时来管理/控制这些对象特有的复杂性?增加一层间接曾是软件开发中常见的解决方式模式定义为其他对象提供一种代理以控制(隔离,使用接口)对这个对象的访问实例朴素客户端要去使用process 但是process周围需要做很多事情class ISubject{p

  • 了解ACL—通配符掩码「建议收藏」

    了解ACL—通配符掩码「建议收藏」学习ACL,搞懂ACL就不能不搞定wildcardmask,通配符掩码。说简单点,通配符掩码就是0为绝对匹配,必须严格匹配才行,而1为任意,从某种意义上讲,如果一个8位上有一个1字符,那也只有两种方式,0或者1,但是如果进行组合,那么方式就多了。举例说明吧。一般我们在应用上都是进行地址块的匹配,怎么讲呢?就是说:1)对某个ABC类网进行匹配或者教通配符屏蔽2)对某个子网应用ACL。…

  • 再见PowerDesigner,这款国人开源的数据库设计工具Chiner真香

    再见PowerDesigner,这款国人开源的数据库设计工具Chiner真香再见PowerDesigner,这款国人开源的数据库设计工具Chiner真香当我们在项目开发初期时,往往需要设计大量的表,此时使用数据库设计工具就会比较高效!今天给大家推荐一款国人开源的数据库设计工具chiner,界面漂亮,功能强大,希望对大家有所帮助!回顾PowerDesigner相信平时工作中,大家或多或少会使用PowerDesigner来设计数据库,感觉这款工具界面有点古老,界面看着就具年代感,有时候用起来也比较重,来看下之前使用它设计数据库的效果。最近体验了一把chiner,设计数据库

  • python pyquery_python3解析库pyquery

    python pyquery_python3解析库pyquerypyquery是一个类似jquery的python库,它实现能够在xml文档中进行jQuery查询,pyquery使用lxml解析器进行快速在xml和html文档上操作,它提供了和jQuery类似的语法来解析HTML文档,支持CSS选择器,使用非常方便1、pyquery安装pip方式安装:$pipinstallpyquery#它依赖cssselect和lxml包pyquery==1.4.0-…

  • MP算法和OMP算法及其思想

    MP算法和OMP算法及其思想

    2021年11月28日
  • navicat15.0.22注册激活码【在线注册码/序列号/破解码】

    navicat15.0.22注册激活码【在线注册码/序列号/破解码】,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号