如何通过当前位置语言自动翻译网页（基于MicrosoftTranslatorWidget）

To get the widget to automatically translate your page based on the user's location, we can leverage the browser's built-in language detection (which ties to the user's system/location settings) and adjust the widget configuration dynamically. Here's how to modify your existing code:

Modified Code #

<div id="MicrosoftTranslatorWidget" style="width: 400px; min-height: 20px; border-color: #404040; background-color: #A0A0A0;">
    <noscript><a href="">Translate this page</a><br />Powered by <a href="">Microsoft® Translator</a></noscript>
</div>
<script type="text/javascript">
/* <![CDATA[ */
setTimeout(function() {
    // Detect user's preferred language (matches their location-based system settings)
    const userPreferredLang = navigator.language || navigator.userLanguage;
    // Extract the core language code (e.g., 'de' from 'de-DE', 'zh' from 'zh-CN')
    const targetLanguage = userPreferredLang.split('-')[0];
    
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.charset = "UTF-8";
    // Update widget URL to enable auto-translation to the detected language
    s.src = ((location && location.href && location.href.indexOf('https') == 0) ? "https://ssl.microsofttranslator.com" : "http://www.microsofttranslator.com" ) + 
            "/ajax/v2/widget.aspx?mode=auto&from=en&to=" + targetLanguage + "&layout=ts";
    var p = document.getElementsByTagName('head')[0] || document.documentElement;
    p.insertBefore(s, p.firstChild);
}, 0);
/* ]]> */
</script>

Key Changes Explained: #

• Language Detection: We use navigator.language (standard) or navigator.userLanguage (for older IE) to get the user's preferred language, which is usually set based on their location.
• Auto Mode: Changed mode=manual to mode=auto so the widget translates the page automatically without user interaction.
• Dynamic Target Language: Added &to= followed by the detected language code to tell the widget which language to translate into.

If you want the widget to auto-detect the source language instead of forcing English, simply remove the &from=en parameter from the URL.

If you're open to other tools, here are some reliable options that support location-aware auto-translation:

• Google Translate API/Widget:
  Google's Translate Element widget can be configured to auto-detect the user's language and translate the page instantly. For programmatic control, their REST API allows you to send translation requests, using the browser's detected language as the target. It has a free tier for low-volume use, with paid plans for higher traffic.

• DeepL API:
  Known for high-quality, natural-sounding translations, DeepL's API supports auto-detection of source languages and lets you set the target language based on the user's location. They offer a free tier for non-commercial projects, with affordable paid plans for commercial use.

• LibreTranslate:
  An open-source, self-hostable translation API that's great for privacy-focused projects. You can integrate it to detect the user's language and translate your page, and since you host it yourself, you have full control over data handling. It supports most major languages and is free to use.

内容的提问来源于stack exchange，提问作者Javed Iqbal