Edge及全版本IE浏览器中Facebook点赞按钮无法显示的解决求助
我在网站中添加了Facebook点赞与分享按钮代码,该代码可在Chrome和Firefox中正常显示,但在Microsoft Edge及所有版本的Internet Explorer中无法显示。
我的代码:
<div id="fb-root"></div> <script language="javascript" type="text/javascript"> (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "https://connect.facebook.net/it_IT/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> <script language="javascript" type="text/javascript"> //<![CDATA[ document.write('<fb:like href="https://www.facebook.com/mypage/" width="500" colorscheme="light" show_faces="true" font="tahoma" send="true" layout="standard" action="like"></fb:like> '); //]]> </script>
注:出于隐私考虑,代码中已将真实Facebook页面替换为"mypage"。
执行该脚本时,Facebook插件会在HTML中插入一个iframe,但在Edge和IE中该iframe内的HTML文档为空,而在其他浏览器中则包含点赞按钮。
在Edge的文件检查器中,该iframe出现如下警告:
'iframe[allow]' is not supported by Firefox for Android.
该警告较为异常,因为它是在Windows桌面版Edge浏览器中抛出的(并非Firefox或Android环境)。
解决方法:
替换为新版Facebook SDK
你当前使用的all.js是旧版SDK,已停止对Edge/IE的兼容支持。将加载SDK的脚本替换为最新版本:(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "https://connect.facebook.net/it_IT/sdk.js#xfbml=1&version=v18.0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));新版SDK会自动适配不同浏览器的渲染规则,解决iframe加载异常问题。
移除
document.write动态输出标签document.write在Edge/IE的严格渲染模式下可能导致DOM解析时序错误,直接在HTML中静态写入<fb:like>标签:<fb:like href="https://www.facebook.com/mypage/" width="500" colorscheme="light" show_faces="true" font="tahoma" send="true" layout="standard" action="like"></fb:like>这样SDK加载完成后会直接解析静态标签,避免动态写入的兼容性问题。
强制IE使用最新渲染引擎
在页面<head>中添加以下meta标签,确保IE不会切换到旧文档模式:<meta http-equiv="X-UA-Compatible" content="IE=edge">清除浏览器缓存
Edge和IE的缓存容易保留旧的SDK资源,清除缓存后重新加载页面,测试按钮是否正常显示。
内容的提问来源于stack exchange,提问作者A. Amori

