检测GoogleChrome翻译

我已经将 Google 翻译栏添加到我们的网站,但是由于布局的工作原理,如果主导航上的翻译比英语长,则将一些链接向下推到下一行并开始覆盖其他元素。我有一些 Javascript 可以检测翻译栏是否正在使用,并使菜单和搜索框的包含 div 变宽以进行补偿,而这确实会影响布局,到目前为止,它比覆盖页面的一部分更可取。

我已经将 Google 翻译栏添加到我们的网站,但是由于布局的工作原理,如果主导航上的翻译比英语长,则将一些链接向下推到下一行并开始覆盖其他元素。我有一些 Javascript 可以检测翻译栏是否正在使用,并使菜单和搜索框的包含 div 变宽以进行补偿,而这确实会影响布局,到目前为止,它比覆盖页面的一部分更可取。

然而,Chrome 现在已经翻译内置到浏览器中,如果有人使用这个,他们显然不会使用嵌入式版本,所以我无法检测到它来应用我的宽度修复。

24

也许尝试使用 js 来检测菜单内容是否已更改,然后应用新样式。

UPDATE

当 Chrome 翻译页面时,它会向页面添加几个元素:

两个script元素到head标记

全局对象window.google

class = "translated-ltr"tohtmltag div id="goog-gt-tt"tobodytag

您可以查看 DOM 中的更改,以了解内容何时翻译:

document.addEventListener('DOMSubtreeModified', function (e) {
    if(e.target.tagName === 'HTML' && window.google) {
        if(e.target.className.match('translated')) {
            // page has been translated
         } else {
            // page has been translated and translation was canceled
        }
   }
}, true);
8

我知道这太晚了……这不是一个 JS 解决方案……但是,如果您只需要确保在显示 Google Translate 栏时可以对页面上的元素进行样式设置,则可以使用 CSS。Translate 代码在 body 标记中添加了一个类“translated-ltr”(如果语言是从右到左而不是像英语那样从左到右,则为“translated-rtl”)。

所以你可以使用 CSS 类:

.translated-ltr .nav, .translated-rtl .nav {}

根据需要替换正确的类 / ID 为您的项目。

希望这有帮助!

7

截至 2019 年,上面选择的答案似乎并不完全有效,但是我已经能够使用以下修改版本来跟踪<html>元素(document.documentElement)的类名更改翻译或使用“显示原始”时:

var observer = new MutationObserver(function (event) {
    if(document.documentElement.className.match('translated')) {
        alert("Page translate");
    } else {
        alert("Page untranslate");
    }
});
observer.observe(document.documentElement, {
  attributes: true,
  attributeFilter: ['class'],
  childList: false,
  characterData: false
});

但是,重要的是要注意,这将在页面翻译开始时,在实际更改单个内容之前触发。

如果您需要执行一个取决于翻译文本特征的操作(例如,检查它现在是否溢出了 div),那么您需要跟踪具有文本内容的元素的更改,以查看它们是否已被翻译,同时还使用上面的代码设置一个标志来确定更改是翻译的结果,还是还原到原始文本。

4

我刚刚在 Google Chrome,Yandex Browser 和 Microsoft Translate Extension 中的detecting automatic machine-translations上写了一篇文章。我还没有弄清楚如何检测 Naver Whale 浏览器,这是最后一个具有内置页面翻译功能的浏览器。

它的简短和甜蜜正在关注以下 DOM 标记:

!!document.querySelector("html.translated-ltr, head.translated-rtl, ya-tr-span, *[_msttexthash]");

您可以从域名列表(在链接的文章中找到)中检测基于 Web 的代理翻译服务。

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(830)
我应该使用CSS或SVG来显示形状吗
上一篇
如何从另一个php文件调用一个php文件的函数并将参数传递给它
下一篇

相关推荐

  • vscode code命令:# 如何使用 VSCode 命令

    VSCode Code命令是Visual Studio Code的一个内置命令,用于在本地和远程服务器上执行代码。它可以让你在不同的系统上运行代码,而不需要安装任何软件。…

    2023-01-22 09:55:35
    0 89 14
  • cv糖醋排骨是弯的吗弯曲的美味

    cv糖醋排骨不是弯的,它是一种制作方法,通常用来制作排骨。代码:…

    2023-01-30 08:19:31
    0 35 63
  • cv树洞柒夜事件CV树洞中的秘密与惊奇

    cv树洞柒夜事件是一个有趣的计算机视觉活动,它提供了一种新的方式来利用计算机视觉技术来探索和发现景观。它始于2020年7月,由一群热爱计算机视觉的研究者和开发者发起,他们希望通过使用机器学习技术来探索景观中的精彩之处。cv树洞柒夜事件的目标是使用机器学习技术来探索景观中的精彩之处,并利用这些发现来改善景观设计。参与者需要使用机器学习技术来探索景观,并利用这些发现来改善景观设计。参与者可以使用Python,OpenCV,TensorFlow等技术来完成任务,并将其发布在GitHub上。…

    2023-01-08 12:49:50
    0 53 40
  • cv小随:如何利用CV技术提升求职成功率

    示例示例cv小随是一种基于计算机视觉的智能技术,它可以帮助用户自动识别图像中的物体、场景和行为,从而实现自动化的图像处理。cv小随可以用于多种应用场景,如图像搜索、图像分类、图像识别、图像检测等。…

    2023-01-01 11:12:42
    0 24 60
  • win10可以安装cad2007吗:CAD2007是否可以在Win10上安装?

    不可以,因为CAD2007不支持Windows 10系统。如果想要安装CAD2007,需要安装在Windows XP或者Windows 7系统上。…

    2023-01-20 02:04:42
    0 38 17
  • iban code是什么意思一种国际银行帐户号码标准

    IBAN(International Bank Account Number)代码是一种国际标准的银行账户号码,用于在不同国家之间进行国际转账。它由一串字母和数字组成,通常由2至4个字母开头,后面跟着一串数字。…

    2022-12-30 09:24:47
    0 32 17
  • cv 机器视觉:如何利用机器视觉技术提高图像处理效率

    CV(Computer Vision)机器视觉是一门研究计算机如何理解和处理图像的学科,它旨在使计算机能够以人类般的方式识别和理解图像。它主要应用于图像处理、图像分析、计算机视觉等领域,广泛应用于机器人、自动驾驶、医疗影像分析等领域。…

    2023-01-23 11:32:51
    0 13 39
  • mac 开发c++:Mac 下开发 C++ 的入门指南

    示例示例Mac OS X 是一个强大的操作系统,可以用来开发 C++ 应用程序。下面是一个简单的 C++ 程序的代码示例:#include…

    2023-01-02 10:39:58
    0 75 97

发表评论

登录 后才能评论

评论列表(5条)