页面内嵌谷歌翻译

wpyok168

已于 2024-10-12 11:40:27 修改

阅读量468

点赞数 5

文章标签：前端数据库 linux

于 2024-10-12 09:06:45 首次发布

本文链接：https://blog.csdn.net/wpyok168/article/details/142868635

版权

页面内嵌谷歌翻译

<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://translate.google.com/translate_a/element.js?&cb=googleTranslateElementInit"></script>
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
      pageLanguage: 'en', 
      //指定要翻译的语言选项，不指定默认全部
      //includedLanguages: 'zh-TW,zh-CN,en,ja,th,vi,ko,id' , gaTrack: true,
      layout: google.translate.TranslateElement.InlineLayout.SIMPLE
    }, 'google_translate_element');
    //$('select.goog-te-combo').attr('title','translate');
}
</script>


</head>
<body>

<h1>My Web Page</h1>

<p>Hello everybody!</p>

<p>Translate this page:</p>
<div id="google_translate_element"></div>





<p>You can translate the content of this page by selecting a language in the select box.</p>

</body>
</html>

进阶参阅
https://github.com/ChinaGodMan/UserScripts/tree/main/Script%20details/translate-only-chinese

<!DOCTYPE html>
<html lang="en-US"><head>
<script src="https://translate.google.com/translate_a/element.js?&amp;cb=googleTranslateElementInit"></script>
<style id="m25iv5xj.bn">
      html,body{
        top: 0!important;
      }
      #google_translate_element {
        display: none;
      }
      .buttonContainer {
        width: 6em;
        position: fixed;
        bottom: 30px;
        z-index: 10000000;
        user-select: none;
        overflow: hidden;
        text-align: center;
        font-size: 13px;
        line-height: 2em;
        border-radius: 1em;
        box-shadow: 1px 1px 3px 0 #888;
        opacity: .5;
        transition: all .3s;
      }
      .recoverPage, .translateButton {
        float: left;
        width: 50%;
        box-sizing: border-box;
      }
      .recoverPage {
        border-radius: 1em 0 0 1rem;
        background-color: #fff;
      }
      .translateButton {
        color: #fff;
        border-radius: 0 1rem 1rem 0;
        background-color: #55b9f3;
      }
      .buttonContainer:hover {
        opacity: 1;
        transform: translateX(0);
      }
      .recoverPage:active, .translateButton:active {
        box-shadow: 1px 1px 3px 0 #888 inset;
      }
      /* 隐藏移动端顶部栏 */
      [id=":1.container"].skiptranslate {
        display: none;
      }
      /* 隐藏 PC 端顶部栏 */
      [id=":2.container"].skiptranslate {
        display: none;
      }
    </style>
<script>
      function googleTranslateElementInit() {
        new google.translate.TranslateElement(
          {
            pageLanguage: 'auto',
            includedLanguages: 'zh-CN',
            layout: /mobile/i.test(navigator.userAgent) ? 0 : 2
          },
          'google_translate_element'
        )
        // 清除图片的请求，加快访问速度
        let img = [].slice.call(document.querySelectorAll('#goog-gt- img,#google_translate_element img'))
        img.forEach(function (v) {
          const a = v
          a.src = ''
          let b = a.outerHTML.replace(/<img(.*?)>/, () => {
            return '<span id="lb"' + RegExp.$1 + '></span>'
          })
          const c = document.createElement('div')
          c.innerHTML = b
          a.parentNode.insertBefore(c.children[0], a.parentNode.children[0])
          a.remove()
        })
        // 获取设备信息
        const device = navigator.userAgent.indexOf('Mobile')
        // 按钮容器
        const buttonContainer = document.createElement('div')
       buttonContainer.setAttribute('class', 'notranslate buttonContainer')
        document.body.appendChild(buttonContainer)
        // 恢复按钮
        const recoverPage = document.createElement('div')
        recoverPage.setAttribute('id', 'recoverButton')
        recoverPage.setAttribute('class', 'notranslate recoverPage')
        recoverPage.innerText = '恢复'
        buttonContainer.appendChild(recoverPage)
        // 点击恢复原网页
        recoverPage.onclick = () => {
          let recoverIframe = null
          if (~device) {
            // 移动端
            const recoverDocument = document.getElementById(':1.container').contentWindow.document
            recoverDocument.getElementById(':1.restore').click()
          } else {
            // PC端
            const recoverDocument = document.getElementById(':2.container').contentWindow.document
            recoverDocument.getElementById(':2.restore').click()
          }
        }
        // 翻译按钮
        if (~device) {
          // 移动端
          let translateLang
          const translateTimer = setInterval(() => {
            translateLang = document.querySelector('.goog-te-combo')
            if (translateLang) {
              clearInterval(translateTimer)
              // 添加翻译按钮
              const translateButton = document.createElement('div')
              translateButton.setAttribute('id', 'translateButton')
              translateButton.setAttribute('class', 'notranslate translateButton')
              translateButton.innerText = '翻译'
              buttonContainer.appendChild(translateButton)
              // 点击翻译




              translateButton.onclick = () => {

                const event = document.createEvent('HTMLEvents')
               event.initEvent('change', true, true)
                event.eventType = 'message'
               document.querySelector('.goog-te-combo').dispatchEvent(event)
              }
                        translateButton.onclick()      // 无需点击 立即翻译
            }
                    translateButton.onclick()       // 无需点击 立即翻译
          }, 300)
          translateButton.onclick()
        } else {
          // PC端
          let langIframe = document.querySelector('[title="语言翻译微件"]')
          const langIframeTimer = setInterval(() => {
            if (langIframe) {
              const langDocument = langIframe.contentWindow.document || langIframe.contentDocument
              let translateLang
              const translateTimer = setInterval(() => {
                translateLang = langDocument.querySelectorAll('table a')[1]
                if (translateLang) {
                  clearInterval(translateTimer)
                  // 添加翻译按钮
                  const translateButton = document.createElement('div')
                  translateButton.setAttribute('id', 'translateButton')
                  translateButton.setAttribute('class', 'notranslate translateButton')
                  translateButton.innerText = '翻译'
                  buttonContainer.appendChild(translateButton)
                  // 点击翻译
                  //   // 无需点击 立即翻译 所有非中文网站，自动点击
                  translateLang.click()

                  translateButton.onclick = () => {
                    translateLang.click()
                  }
                }
              }, 300)
              clearInterval(langIframeTimer)
            } else {
              langIframe = document.querySelector('.goog-te-menu-frame')
            }
          }, 300)
        }
      // 删除元素
  const targetId = 'goog-gt-tt';
  const targetElement = document.getElementById(targetId);
  if (targetElement) {
    targetElement.remove();
  }
      }
    </script>
</head>
<body>
<div id="google_translate_element"><div class="skiptranslate goog-te-gadget" dir="ltr" style=""><div id=":0.targetLanguage" class="goog-te-gadget-simple" style="white-space: nowrap;"><span id="lb" src="" class="goog-te-gadget-icon" alt="" style="background-image: url(&quot;https://translate.googleapis.com/translate_static/img/te_ctrl3.gif&quot;); background-position: -65px 0px;"></span><span style="vertical-align: middle;"><a aria-haspopup="true" class="VIpgJd-ZVi9od-xl07Ob-lTBxed" href="#"><span id="lb" src="" alt="" width="1" height="1"></span><span id="lb" src="" alt="" width="1" height="1"></span><span>中文（简体）</span><span style="border-left: 1px solid rgb(187, 187, 187);"></span><span aria-hidden="true" style="color: rgb(118, 118, 118);">▼</span></a></span></div></div></div>

<h1>My Web Page</h1>

<p>Hello everybody!</p>

<p>Translate this page:</p>

<div> hello google translate</div>




<p>You can translate the content of this page by selecting a language in the select box.</p>



</body></html>

<!DOCTYPE html>
<html lang="en-US"><head>
<script src="https://translate.google.com/translate_a/element.js?&cb=googleTranslateElementInit"></script>

<script>
      function googleTranslateElementInit() {
        new google.translate.TranslateElement(
          {
            pageLanguage: 'auto',
            layout: google.translate.TranslateElement.InlineLayout.SIMPLE
          },
          'google_translate_element'
        )}
</script>
<script>
function autoclickCN(){
	let langIframe = document.querySelector('[title="语言翻译微件"]');
	const langIframeTimer = setInterval(() => {
		 if (langIframe) {
			const langDocument = langIframe.contentWindow.document || langIframe.contentDocument;
			if(langDocument){
				langDocument.querySelectorAll("a").forEach(x=>{if(x.value=="zh-CN"){x.click();clearInterval(langIframeTimer);}});
		   }
	}})
}
</script>
</head>
<body onload="autoclickCN()">
<div id="google_translate_element"></div>

<h1>My Web Page</h1>

<p>Hello everybody!</p>

<p>Translate this page:</p>

<div> hello google translate</div>




<p>You can translate the content of this page by selecting a language in the select box.</p>



</body></html>

<!DOCTYPE html>
<html lang="en-US"><head>
<script src="https://translate.google.com/translate_a/element.js?&cb=googleTranslateElementInit"></script>

<script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement(
    {
      pageLanguage: 'auto',
      layout: google.translate.TranslateElement.InlineLayout.SIMPLE
    },
    'google_translate_element'
  );
  let langIframe = document.querySelector('[title="语言翻译微件"]');
	const langIframeTimer = setInterval(() => {
		 if (langIframe) {
			const langDocument = langIframe.contentWindow.document || langIframe.contentDocument;
			if(langDocument){
				langDocument.querySelectorAll("a").forEach(x=>{if(x.value=="zh-CN"){x.click();clearInterval(langIframeTimer);}});
		   }
	}})
}
</script>

</head>
<body onload="autoclickCN()">
<div id="google_translate_element"></div>

<h1>My Web Page</h1>

<p>Hello everybody!</p>

<p>Translate this page:</p>

<div> hello google translate</div>




<p>You can translate the content of this page by selecting a language in the select box.</p>



</body></html>