对iframe中的页面自动翻译
对iframe中的页面进行自动翻译。
这个场景比如,你使用了某个组件(别人开源的),这个组件中的某个展示功能会以iframe的形式弹窗显示出来,而iframe 中的内容是这个组件自己赋予的,你没法对这个组件的内容进行更改、加入 translate.js ,但是呢还需要对他也进行翻译,所以针对这种情况,推出了这个能力。
它可以自动监控你页面中动态渲染出的iframe,当iframe 中的网页资源都加载完毕后(iframe的 load 监听,也就是iframe打开的src网页,DOM渲染完,并且图片等资源都加载完后)自动对其植入translate.js 并触发翻译。
默认不设置的情况下,这个能力是不启用的。 如果要启用这个能力,可设置:
translate.element.iframe.use('http://xxxxx.com/translate.js');
注意,其中传入了一个参数,是 translate.js 的网址,你将 translate.js 文件上传到你服务器后,访问的网址, iframe中的页面会自动将这个url载入,也就是它会在iframe中的页面中,以这种方式引入:
<script type="text/javascript" src="http://xxxxx.com/translate.js"></script>
它会自动携带父页面中对translate.js所设置的非方法类型的参数自动设置进去。 也就是设置的非 function 类型的参数,都会自动带入设置到 iframe 中页面的 translate.js 中去。
注意
- 需要 translate.js v3.18.101.20251210 及以上版本
- 需要放到 translate.execute() 前面进行设置
- iframe中的页面如果能自己修改,强烈建议自己修改加入 translate.js 进去,而不是有它自动注入。比如VUE的页面,VUE的资源加载完毕后,主要就只是
<div id="app">而已,而vue页面它真正的内容是需要用js去绘制的,如果js异步加载,那么使用当前自动注入的方式,它是没法精确判定当vue渲染完毕执行的。 这在逻辑上就存在了不完美的情况。而启用了动态标签监控,vue多次渲染,他就会触发多次,接口请求排队异常的多,会造成视觉效果很差!