欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

监视DOM树属性的更改

程序员文章站 2022-09-03 22:30:22
最近客户反映页面会有乱码的情况,查看后发现只有英文大写字母乱了 谷歌浏览器有翻译功能,在翻译成中文后会出现这种情况。 之前lang=“en”,如果浏览器设置了总是询问,在检测到是en后会提示是否翻译。发现在翻译后,html的lang会变化,然 ......

最近客户反映页面会有乱码的情况,查看后发现只有英文大写字母乱了

监视DOM树属性的更改监视DOM树属性的更改

 

 谷歌浏览器有翻译功能,在翻译成中文后会出现这种情况。

<html id="html" lang="zh-cn">
之前lang=“en”,如果浏览器设置了总是询问,在检测到是en后会提示是否翻译。
发现在翻译后,html的lang会变化,然后就想到监测lang的属性变化,在翻译后在给它改回来。

但是在翻译后修改,lang属性值确实是修改回来了,但是码还是乱的,只能退而求其次在翻译后提示用户

<!doctype html>
<html id="html" lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link href="<%= base_url %>static/style.css" rel="stylesheet">
  </head>
  <body>
    <noscript>
      <strong>we're sorry but statement doesn't work properly without javascript enabled. please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
  <script type="text/javascript">
    var mutationobserver = window.mutationobserver || window.webkitmutationobserver || window.mozmutationobserver;
    var element = document.queryselector('#html');
    var observer = new mutationobserver(function(mutations) {
      mutations.foreach(function(mutation) {
        if (mutation.attributename === "lang" && mutation.target.classname) {
          element.removeattribute('lang');
          element.removeattribute('class');
          this.$unitemsg('翻译可能会导致部分文字乱码',"warning",0);
        }
      });
    });

    observer.observe(element, {
      attributes: true,  //configure it to listen to attribute changes,
      attributefilter: ['lang']
    });
  </script>
</html>

mutationobserver()创建并返回一个新的 mutationobserver 它会在指定的dom发生变化时被调用。

observe()配置mutationobserver在dom更改匹配给定选项时,通过其回调函数开始接收通知