Facebook Like Button在IE上的bug
项目主要是欧美项目,所以大多数网站都要集成Facebook,Twitter和Email三个功能。随着Google大力推广Google+,而且现在图片分享也很火热。估计越来越多的网站会添加Google+和Pinterest功能。
但是从目前开放API来看。Facebook是做的最好一家,文档和示例都很丰富,所以开发者也愿意接入FaceBook,不过可惜国内无法正常访问。网站需要兼容IE7-10,Chrome,Firefox和苹果设备上Safari。
功能需求界面如下,点击图1的图标,弹出一个如图2的模式对话框。然后就有一些相关的信息,用户就把title和description分享出去。点击Like Button(这里使用的西班牙语)。用户可以输入评论,然后把内容分享到Facebook Timeline上。
(图1)
(图2)
点击Like Button应该出现的效果如下图:
(图3)
facebook开发者文档地址:http://developers.facebook.com/docs/reference/plugins/like/
在其他浏览器中都是正常的。但是在IE中显示不正常,这个Like Button有时出现,有时不出现。通过Facebook在线代码生成工具,操作步骤如下图:
在第二点中提到,未来适应老版本的IE,需要在html标签中添加xml命名空间,http://ogp.me/ns/fb#. 这个是很多开发者容易忘记的一点。但是我们遇到不是这个问题。因为我们使用的Javascript动态拼接最后一个html代码片段。但是我们只有用户点击了图1的icon,才出现模式对话框,此时才显示Like Button。就是说一开始这个button根本没有显示出来,当我们打开模式对话框,fb:like标签没有去重新解析,所以显示不了。
解决办法是,需要调用FB.XFBML.parse()方法,让浏览器重新去解析一下fb:like标签。
参考网址:http://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/
在我们项目中,还不能简单的在拼接html代码片段之后调用FB.XFBML.parse()方法。因为模式对话框没有打开,解析了也是没有用的。所以我们需要在打开模式对话框的函数里面,先调用FB.XFBML.parse()方法,然后再显示对话框。这样就可以在IE浏览器中正常的显示Like Button。
- RBAC新解:基于资源的权限管理(Resource-Based Access Control)
- 基于开源项目搭建属于自己的技术堆栈
- Redis整合Spring项目搭建实例
- SpringMVC+Hibernate +MySql+ EasyUI实现POI导出Excel(二)
- Nginx+Tomcat+Redis负载均衡Session共享实现超级简单(CentOS6.9系统 Java版本)
- Apache Ignite——新一代数据库缓存系统
- 微信JSSDK接入Java版--步骤及问题处理和解决
- 微信企业号回调模式配置讲解 Java Servlet+Struts2版本 echostr校验失败解决
- Android Material Design系列之RecyclerView和CardView
- 在Linux安装ASP.Net Core的运行时(Runtime)
- 使用xUnit为.net core程序进行单元测试(下1)
- Otto开发初探——微服务依赖管理新利器
- Apache Eagle——eBay开源分布式实时Hadoop数据安全方案
- Spring/Hibernate 应用性能优化的7种方法
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Kubernetes 升级填坑指南(一)
- 根据 PID 获取 K8S Pod名称 - 反之 POD名称 获取 PID
- 用python实现一个verilog网表Parser
- 经典 | Python实例小挑战—Part eight
- python的数字与字符串相互转换
- 坑!url中含有中文导致nginx 400。锅是tomcat的
- pytest文档43-元数据使用(pytest-metadata)
- Python | 面试的常客,经典的生产消费者模式
- LeetCode 87,因为题目晦涩而被点了1500+反对的搜索问题
- LeetCode 87,远看是字符串其实是搜索,你能做出来吗?
- Golang中的interface是干嘛的?从面向对象中的多态与接口开始说起……
- pandas | DataFrame基础运算以及空值填充
- C++设计模式笔记(08) - Factory Method工厂方法
- 【Code】GraphSAGE 源码解析
- Kafka常见的导致重复消费原因和解决方案