网页ajax请求触发自动翻译

使用方式

  1. translate.request.listener.start();

本功能是可以监听当前网页中所有的ajax请求,比如正常的 xmlhttprequest 请求以及 fetch 。
当请求结束后,自动触发 translate.execute(); 进行翻译。
注意,这行在 translate.execute(); 前面后面都行

场景说明

在某些框架,比如 vue、react 等框架中,它的渲染跟普通的html中使用 document.getElemementById('xxx').innerHTML = ''; 是不大一样的,而且如果出现ajax请求动态渲染页面时,有些朋友碰到过偶尔某个位置会出现漏掉翻译的情况,针对这种情况,特别还是框架各种各样的时候,这种调试是很麻烦的,主要是这个框架还不懂的时候。
但是有一点是,这些基本都是通过ajax请求,拿到结果后渲染页面完成后出现的漏翻译。

更多设置

ajax请求完毕后等待多长时间自动翻译

ajax请求完毕后,等待多长时间自动翻译,单位是毫秒,设置方式为:

  1. translate.request.listener.delayExecuteTime = 500;

注意,这行要放在 translate.request.listener.start(); 前面
如果不设置,这里默认是200,也就是ajax请求结束后等待200毫秒再去执行 translate.execute() ,因为ajax请求后还有渲染页面的过程,这也是这个延迟的作用。你的项目越庞大,渲染速度越慢,这里的数相应的也要调整的越大,因为翻译必须是要在你页面渲染完毕后,执行翻译才能将其翻译过来,如果限制行了翻译,后再进行的渲染,那肯定就翻译不到你动态渲染的部分,也就会造成了漏翻译的情况。

设置自动触发翻译的最小间隔时间

针对ajax请求,两次触发的最小间隔时间,单位是毫秒,这里默认是800毫秒。最小填写时间为 200毫秒

  1. translate.request.listener.minIntervalTime = 800;

如果某个页面中ajax请求非常多,而且非常频繁,比如1秒就有100个ajax请求,如果要触发100次翻译,那这频率也太恐怖了,会被翻译接口屏蔽的,这也是这个设置的作用,它限定了你 800 (不设置默认是800)毫秒只能触发一次翻译,也就是你800毫秒内不管有多少次请求,都只会触发一次翻译,超过800毫秒后,下一个800毫秒内也是如此,每个800毫秒的时间段最多只会触发一次翻译。

注意,这行要放在 translate.request.listener.start(); 前面
如果不设置,这里默认是 800

设置哪些ajax请求的url会触发自动翻译

自定义是否会被触发的方法判断
返回值 return true; 默认是不管什么url,全部返回true,表示会触发翻译自动执行 translate.execute; ,如果你不想让某个url触发翻译,那么你可以自行在这个方法中用代码进行判断,然后返回false,那么这个url将不会自动触发翻译操作。

  1. translate.request.listener.trigger = function(url){
  2. //这里 url 这个参数是当前ajax请求的url,当这个ajax请求完成时才会触发此处
  3. //返回值为boolean 类型,默认是不管什么url,全部返回true,表示会触发翻译自动执行 translate.execute; ,如果你不想让某个url触发翻译,那么你可以自行在这个方法中用代码进行判断,然后返回false,那么这个url将不会自动触发翻译操作。
  4. return true;
  5. }

注意,这行要放在 translate.request.listener.start(); 前面
这个如果不设置,默认是:

  1. translate.request.listener.trigger = function(url){
  2. return true;
  3. }

注意

需要 translate.js v3.0.8.20240302 及更高版本