_ ___ _
| | __ _ _ __ __ _ / __\ |__ ___ ___ ___ ___
| |/ _` | '_ \ / _` |/ / | '_ \ / _ \ / _ \/ __|/ _ \
| | (_| | | | | (_| / /___| | | | (_) | (_) \__ \ __/
|_|\__,_|_| |_|\__, \____/|_| |_|\___/ \___/|___/\___|
|___/
Note: This code needs to be tested in a server-client environment to avoid the following error:
Cross-Origin Request Blocked: The Same-Origin Policy disallows reading the external resource.
(Reason: CORS request not http). This is a security error.
This repository contains a simple example of language redirection based on the browser's language settings. The redirection is implemented using JavaScript and works in Chrome, Firefox, and Edge.
This is the main HTML file that loads the JavaScript script main.js.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Language Redirect</title>
<script src="main.js" defer></script>
</head>
<body>
<h1>Welcome</h1>
<p>If you are not redirected, please choose your language manually.</p>
<ul>
<li><a href="./de/index_de.html">Deutsch</a></li>
<li><a href="./en/index_en.html">English</a></li>
</ul>
</body>
</html>This JavaScript script reads the browser's language and redirects accordingly.
// Define language paths for different languages
const languagePaths = {
de: './de/index.html',
en: './en-us/index.html',
nl: './nl/index.html',
fr: './fr/index.html',
hu: './hu/index.html',
pt: './pt/index.html',
it: './it/index.html',
es: './es/index.html',
// ... more languages
};
// Function to get the primary language code without regional specifications
function getBrowserLanguage() {
const lang = navigator.language || navigator.userLanguage;
return lang.split('-')[0];
}
// Function to redirect based on the selected language
function redirectBasedOnLanguage(language) {
if (languagePaths.hasOwnProperty(language)) {
const testUrl = languagePaths[language];
// Check if the URL exists using fetch
fetch(testUrl)
.then(response => {
if (response.ok) {
const timeoutDuration = 3000; // 3 seconds
const redirectTimer = setTimeout(() => {
console.error(`Error: Redirect timeout for ${language}. Redirecting to default language.`);
alert(`Redirect timeout for ${language}. Redirecting to default language.`);
window.location.href = languagePaths.de; // Redirect to default language (German)
}, timeoutDuration);
window.location.href = testUrl; // Try to redirect and clear the timeout if successful
clearTimeout(redirectTimer);
} else {
console.error(`Error: Language ${language} path not found. Redirecting to default language.`);
alert(`Language ${language} not available. Redirecting to default language.`);
window.location.href = languagePaths.de; // Redirect to default language (German)
}
})
.catch(error => {
console.error(`Error fetching language ${language}: ${error.message}. Redirecting to default language.`);
alert(`Error fetching language ${language}. Redirecting to default language.`);
window.location.href = languagePaths.de; // Redirect to default language (German)
});
} else {
console.error(`Error: Language ${language} not found in the languagePaths object`);
alert(`Language ${language} not available. Redirecting to default language.`);
window.location.href = languagePaths.de; // Redirect to default language (German)
}
}
// Event listener for changes in language selection
const languageSelect = document.getElementById('languageSelect');
languageSelect.addEventListener('change', () => {
const selectedLanguage = languageSelect.value;
redirectBasedOnLanguage(selectedLanguage);
});
// Initialize the redirection when the page loads
window.onload = () => {
const initialLanguage = getBrowserLanguage();
redirectBasedOnLanguage(initialLanguage);
};- Create the directories and files as described above.
- Ensure your live server is running and accessing the folder.
- Open index.html in your browser to test the language redirection.
The code is a JavaScript file that implements a function for redirecting based on the selected language.
languagePaths: An object that contains paths for different languages.getBrowserLanguage(): A function that returns the primary language code without regional specifications.redirectBasedOnLanguage(language): A function that performs redirection based on the selected language.- The code uses the Fetch API to check if the language URL exists.
- A timeout of 3 seconds is set to control the redirection.
- An event listener is added to monitor changes in the language selection.
- Upon page load, the initial language is determined, and the redirection is carried out accordingly.
The code ensures that users are redirected to the appropriate language page based on their language selection. If the selected language is not available, a redirection to the default page (German) occurs.