谷歌分段翻译功能在Chrome等浏览器跳转空白页如何修复
这个故障是Chrome、Safari等基于Chromium或WebKit内核的浏览器,对谷歌翻译旧版分段翻译API生成的跳转逻辑做了安全限制导致的,按以下步骤修改即可兼容全平台:
修改步骤
- 更新原有翻译初始化脚本,添加跳转拦截逻辑
完整脚本内容如下:
<script> // 拦截谷歌翻译触发的空白页跳转 window.open = (function(open) { return function(url) { if (url === 'about:blank#blocked') return; return open.apply(window, arguments); }; })(window.open); // 原有翻译初始化逻辑保留 function googleSectionalElementInit() { new google.translate.SectionalElement({ sectionalNodeClassName: 'goog-trans-section', controlNodeClassName: 'goog-trans-control', background: '#f4fa58' }, 'google_sectional_element'); } // 阻止翻译按钮默认跳转 document.addEventListener('click', function(e) { if (e.target.closest('.trans-trigger')) { e.preventDefault(); } }); </script> <!-- IF S_USER_LANG eq 'pl' --> <script src="//translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl=pl"></script> <!-- ELSEIF S_USER_LANG eq 'ru' --> <script src="//translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl=ru"></script> <!-- ELSEIF S_USER_LANG eq 'en' --> <script src="//translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl=en"></script> <!-- ELSEIF S_USER_LANG eq 'sl' --> <script src="//translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl=sl"></script> <!-- ELSEIF S_USER_LANG eq 'de' --> <script src="//translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl=de"></script> <!-- ELSEIF S_USER_LANG eq 'it' --> <script src="//translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl=it"></script> <!-- ENDIF -->
- 调整脚本放置位置
将上述完整脚本块移动到页面</body>标签闭合之前的位置,不要放在<head>标签内或<body>刚打开的位置,确保脚本执行时页面上的翻译控制节点已经渲染完成。 - 修改模板中的翻译按钮代码
替换原有a标签的javascript:void(0)伪协议,避免浏览器安全拦截,修改后代码如下:
<div class="goog-trans-section">{postrow.MESSAGE}<br /><br /><a href="#" class="trans-trigger"><span class="goog-trans-control"></span></a></div>
修改完成后即可在Chrome、Safari、Opera等浏览器正常使用分段翻译功能,原有Firefox下的兼容表现不受影响。
内容的提问来源于stack exchange,提问作者Vogelek23
相关产品推荐
相关产品推荐

