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

百度分享异步加载问题、分页,无效果解决[通俗易懂]使用百度分享的时候,如果所涉及到的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)];
    }

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

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

(0)
上一篇 2022年10月8日 上午10:36
下一篇 2022年10月8日 上午10:46


相关推荐

  • 大数据平台建设路径

    大数据平台建设路径数字化转型这几年成为了集团公司或大型企业寻求业务突破的重要手段,而且各行各业都不乏成功案例,例如金融行业的建设银行、招商银行、平安保险等,还有一些生动的例子,例如百丽鞋业。而国外的经典案例就是亚马逊和特斯拉。集团客户动静都很大,首先要做咨询规划,必须跟上投入和管理配套,然后可以开始平台建设,最终开始应用,赋能各业务线和产品线。从技术的角度,一个完整的大数据平台通常会三期建设。先看下图:蓝色部分是第一期内容,绿色部分是第二期内容,橙色部分是第三期内容。第一步,先建设大数据基础平台。首要满足的是数据汇聚

    2022年4月30日
    43
  • PHP连接数据库学习手册

    PHP连接数据库学习手册范例 nbsp 1 Select nbsp 指令任务 连结到 nbsp Access nbsp 的 nbsp NorthwindDSN 然后在每一列显示头 2 个字段 Northwind nbsp 北风数据库 在 ODBC 设定的 DSN 是 Access 的标准范例数据库 在这个范例中 我们建立一个 nbsp ADOConnectio nbsp 对象 它代表了和数据库的连结 连结是以 nbsp PConnect nbsp 函数来初始化的 然后会持续的连结着 任何时候我们要查询数据库时

    2026年3月18日
    2
  • python浪漫表白源码(附带详细教程)_python网站开发实例

    python浪漫表白源码(附带详细教程)_python网站开发实例本文实例为大家分享了python七夕浪漫表白的具体代码,供大家参考,具体内容如下fromturtleimport*fromtimeimportsleepdefgo_to(x,y):up()goto(x,y)down()defbig_Circle(size):#函数用于绘制心的大圆speed(1)foriinrange(150):forward(size)right(0….

    2025年12月3日
    2
  • python解释器安装步骤_怎么安装python解释器

    python解释器安装步骤_怎么安装python解释器Python目前已支持所有主流操作系统,在Linux,Unix,Mac系统上自带Python环境,在Windows系统上需要安装一下,超简单。1、下载python首先,根据你的Windows版本(64位还是32位)从Python的官方网站下载Python3.7对应的64位安装程序或32位安装程序(网速慢的同学请移步国内镜像),然后,运行下载的EXE安装包:2、运行Python安装成功后,打开命令…

    2022年7月22日
    17
  • elasticsearch面试必考(亲身经历的问题)

    作者:手留余香|转自:Java架构沉思录|原文面试题es写入数据的工作原理是什么啊?es查询数据的工作原理是什么啊?底层的lucene介绍一下呗?倒排索引了解吗?面试官心理分析问这个,其实面试官就是要看看你了解不了解es的一些基本原理,因为用es无非就是写入数据,搜索数据。你要是不明白你发起一个写入和搜索请求的时候,es在干什么,…

    2022年4月4日
    158
  • 最全中文停用词表(可直接复制)

    最全中文停用词表(可直接复制)最全的停用此表整理词表名词表文件中文停用词表cn_stopwords.txt哈工大停用词表hit_stopwords.txt百度停用词表baidu_stopwords.txt机器智能实验室停用词库scu_stopwords.txt以上停用词表链接:https://github.com/goto456/stopwords以下是我常用的1893个停用词,可直接复制!”#$%&'()*+,—……….

    2022年6月17日
    46

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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