js网站中英文切换

在JavaScript网站中实现中英文切换功能，通常涉及以下几个基础概念和技术点：

基础概念

国际化（i18n）：指的是软件或网站能够适应不同的语言和文化环境。
本地化（l10n）：指的是针对特定地区的语言和文化习惯进行的调整。
资源文件：用于存储不同语言的文本内容。

类型

前端切换：通过JavaScript在客户端实现语言切换。
后端切换：服务器根据请求头中的语言信息返回相应语言的内容。

应用场景

多语言网站：如电商网站、新闻门户、社交平台等。
单页面应用（SPA）：如使用React、Vue等框架构建的应用。

实现方法

以下是一个简单的JavaScript实现中英文切换的示例：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Language Switcher</title>
</head>
<body>
    <select id="language-selector">
        <option value="en">English</option>
        <option value="zh">中文</option>
    </select>
    <h1 id="welcome-message">Welcome to our site!</h1>
    <p id="description">This is a sample text.</p>

    <script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

const translations = {
    en: {
        welcomeMessage: "Welcome to our site!",
        description: "This is a sample text."
    },
    zh: {
        welcomeMessage: "欢迎来到我们的网站！",
        description: "这是一个示例文本。"
    }
};

document.getElementById('language-selector').addEventListener('change', function() {
    const selectedLanguage = this.value;
    updateContent(selectedLanguage);
});

function updateContent(lang) {
    document.getElementById('welcome-message').innerText = translations[lang].welcomeMessage;
    document.getElementById('description').innerText = translations[lang].description;
}

// Initialize with default language
updateContent('en');

遇到的问题及解决方法

问题1：切换语言后页面刷新，语言重置

原因：页面刷新导致JavaScript状态丢失。

解决方法：可以使用浏览器的本地存储（如localStorage）来保存用户选择的语言，并在页面加载时读取该设置。

document.getElementById('language-selector').addEventListener('change', function() {
    const selectedLanguage = this.value;
    localStorage.setItem('selectedLanguage', selectedLanguage);
    updateContent(selectedLanguage);
});

window.onload = function() {
    const savedLanguage = localStorage.getItem('selectedLanguage') || 'en';
    updateContent(savedLanguage);
};

问题2：动态内容无法及时更新

原因：某些动态生成的内容可能在语言切换时未能及时更新。

解决方法：确保所有动态内容在语言切换时都通过updateContent函数进行更新，或者使用事件委托机制来处理动态添加的元素。

总结

通过上述方法，可以在JavaScript网站中实现简单的中英文切换功能。对于更复杂的应用，可以考虑使用专门的国际化库，如i18next或react-i18next（适用于React项目），以提供更强大的功能和更好的扩展性。

页面内容是否对你有帮助？

有帮助

没帮助

反应-管理<TranslateInput>如何获得翻译的标签？

、、

在这里的文档之后，我创建了一些en.js和fr.js文件来翻译我的react应用程序的字段。Description (Français)', }, },}; </TranslatableInputs> 但是，选项卡视图中的标签似乎没有被应用(在列表模式下，它们被正

浏览 8提问于2022-11-26得票数 0

1回答

gdm3开关键盘输入法不起作用

、

由于它的lightdm根本不能工作(启动后屏幕挂起，没有鼠标，不能从键盘上键入任何内容)，我们切换到gdm3。有人能帮我们解决这个问题吗？非常感谢。干杯，T.H.Hsieh

浏览 0提问于2022-11-06得票数 0

1回答

个人网站可以有会员吗？

、

个站，处了自己上传图片，还可以有会员一起上传图片吗，一起欣赏图，还有可以有虚以币吗，

浏览 565提问于2020-05-08

回答已采纳

1回答

网站的中英文版本

、

有没有办法(可能使用JavaScript)使用链接将网站的语言从英文更改为中文(例如)？

浏览 0提问于2012-11-08得票数 0

1回答

多语言网站URL

、、

我只是在研究建立一个多语言的网站。我已经研究了数据库结构，但我现在正在研究URL是如何工作的。www.domain.com/cn/products/[productname]/ 我是否可以将数据库中的中文翻译直接放入URL中？

浏览 3提问于2015-02-06得票数 1

2回答

我们如何才能做AngularJS站点的角度转换SEO？

、、、

我们有一个网站，是服务于中英文版本使用角度翻译。前端决定语言设置。这是好的，从客户端，但当谷歌机器人爬行我们的内容为SEO的目的，他们不能抓取内容。相反，他们在翻译前先爬行语法。

浏览 8提问于2014-03-25得票数 7

回答已采纳

3回答

切换网站语言JS/JSON

、、、、

我正在构建一个网站，下面是我想要使用JavaScript实现的基本目标：下面是我的代码现在的样子

浏览 0提问于2013-07-12得票数 1

1回答

IBus输入方法只适用于系统搜索。

在这些应用中，IBus输入法(ibus-制式，ibus-拼音)只能输入英文字符，而按下转换键在中英文之间切换是行不通的。

浏览 0提问于2020-06-05得票数 3

回答已采纳

1回答

我曾经在几个中英文版本的多语言网站上工作过。我总是为中文版本指定一个中文CSS字体系列，为英文版本指定一个英文字体系列。很有道理，对吧？font-family: Arial,Helvetica,"Nimbus Sans L",sans-serif;然后我注意到我的字体并不总是在中文中正确显示，这取决于操作系统/浏览器，所以我去看看一些著名的中文网站是如何做到这一点的仅供参考:我用中英文电脑/浏览器检查过了，我现在在中国。它总是这样显示。

浏览 1提问于2014-05-21得票数 10

回答已采纳

1回答

为什么我的vue web应用程序在IE11中加载了一个空白页面，而在Edge中看起来又坏了呢？

、、、、

IE11和Edge上工作上遇到了一些麻烦 THE PROBLEMS SCRIPT1002: Syntax errorSCRIPT1002: Syntax errorSCRIPT1002: Syntax errorSCRIPT5043(1684,3)SCRIPT65535: SCRI

浏览 1提问于2020-07-15得票数 0

回答已采纳

2回答

为什么我的模板目录会从wp_head中被吐出来？

、

我继承了这个网站，我正努力让它运转起来。我不知道我该在档案里找什么。有人能帮我找些什么吗？<!

浏览 5提问于2013-09-01得票数 1

1回答

如何使该网站的不同语言出现在该语言的Google搜索结果中

我想，当用户搜索英文词汇时，网站的英文版本会出现在谷歌的搜索结果中。当用户搜索相同的术语，但以不同的语言，如德语，德文版本的我的网站出现在谷歌搜索结果。我怎么做?我可以使用哪些模块?谢谢。

浏览 0提问于2014-10-15得票数 2

1回答

使用asp.net webforms或MVC的AngularJS？

、、

我们公司有一个asp.net网站在运行。这个网站主要使用AJAX调用来与服务器交互，为此，我们在文件背后的代码中使用了web方法。该公司正在考虑将技术切换到Angular JS。我只想知道在asp.net webforms中使用Angular JS是不是一种好的做法，或者我们必须从webforms转换到asp.net MVC才能切换到Angular JS？

浏览 0提问于2016-06-24得票数 0

1回答

html/css中的引用

、、、

我想知道如何在HTML中引用特定的文件夹/文件，以便它通过CSS、js和HTML。我正在使用这个作为我的主网站的子网站。例如，我有我的主网站，在里面，我想引用Darkmode文件，这样当我单击网站中的切换按钮(我已经有了)时，网站就会切换到黑暗模式。问题:我如何一次引用所有的Darkmode文件，这样它就可以引用HTML、css和js。有没有一种方法，我可以一次引用所有这些文件，这样计算机就可以通过Darkmode的css、

浏览 15提问于2021-02-28得票数 0

1回答

使用.tk域时，移动视图似乎有所不同。为什么？

、、

我把我的网站在免费托管的2000网络主机上。链接到我的网站->网站在网页上看上去不错，但当我在移动平台上观看网站.tk网站时，网站看起来会有一定程度的放大。当你在移动网站上浏览网站时，在域名上使用的是一个很好的体验。如何解决这个问题？GitHub链接-->

浏览 6提问于2017-03-18得票数 0

回答已采纳

1回答

如何知道用户将自己的账号切换为页面账号？

、

来自FB PHP SKD非常感谢您的任何建议。

浏览 1提问于2011-12-26得票数 0

回答已采纳

1回答

Skype网页嵌入-未捕获的TypeError

、、

我上周构建了一个机器人，并使用从MS bot网站生成的Skype嵌入代码将其嵌入到网页上。它被测试了无数次，没有任何问题。今天早上，我试图访问该页面，但是机器人加载失败，并向控制台返回一个错误。

浏览 17提问于2017-06-26得票数 1

2回答

打开切换时向下滚动窗口

、、

嗨，我正在一个网站上工作，我已经在页脚下创建了"Toggle部分“，但是问题是当切换打开时，窗口不会滚动到那个切换的部分，这就是为什么人们看不到它。我想要的是，当单击“切换”按钮打开时，打开的切换窗口应该自动滚动到该部分。这是我一直在使用的Js代码；jQuery(document).ready(function(){ jQuery('#hideshow').live('click', functio

浏览 11提问于2013-12-12得票数 2

回答已采纳

2回答

WP边栏jQuery切换不起作用

我的网站右侧边栏中的jQuery切换在我获取脚本源代码后立即停止工作。它应该仍然可以工作，因为jquery正在被安装在我的网站上的其他插件加载，但它不是。网站链接：当您单击“预订”时，将打开“切换”。<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/ja

浏览 2提问于2013-02-09得票数 1

回答已采纳

1回答