Маршрутизация (?) В Vanilla JS - PullRequest
0 голосов
/ 28 мая 2019

Мне нужен мой веб-сайт для отображения информации на определенном языке на основе запроса в URL моего веб-сайта (например, www.website.com/index.php?country=FR).Как я могу это сделать с ванильным JS, а не с React / Angular?

Мой подход:

1) JS распознает запрос в URL (в данном случае - 'country = FR') изатем добавляет файл js, в котором есть необходимые французские слова, определенные переменными.2) JS в моем теге script, который находится в файле HTML, добавляет текст разметки главной страницы с литералами шаблона.3)

Я не знаю, не удается ли браузеру извлечь сам языковой файл или его переменные.На данный момент ничего не рендерится.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/main.js"></script>
</head>
<body>
    <script>
        const template= `
        <h1>Good Morning: ${goodmorning} </h1>
        <h2>Good Evening: ${goodevening} </h2>
        <h3>My name is: ${mynameis}</h3>`


        function markupAppend() {
        $('body').html(template);
        console.log('Markup loaded')
        }

        markupAppend()

    </script>

</body>
</html>

=========================
Main.js

var domain = window.location.href;
var FRString = domain.includes("country=FR");
var ESString = domain.includes("country=ES");

if (FRString) {
  $('head').append(`<script src="./Language_files/FRENCHwords.js" />`)
}

if (ESString) {
  $('head').append(`<script src="./Language_files/SPANISHwords.js" />`)
}

=========================
FRENCHwords.js

const goodmorning = 'Bonjour';
const goodevening = 'Bonsoir';
const mynameis = 'Mon nom est';

=========================
SPANISHwords.js

const goodmorning = 'Buenos dias';
const goodevening = 'Buenas tardes';
const mynameis = 'Mi nombre es';

No errors displayed, the page is just not rendering...

1 Ответ

0 голосов
/ 28 мая 2019

В вашем файле main.js вы используете domain.includes, он возвращает только имя домена, но не весь URL. Для этого вы можете использовать window.location.href.includes.

Вместо: domain.includes ("country = FR"); Попробуйте: window.location.href.includes ("country = FR");

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...