How to localize a simple HTML website page in my case?

前端未结

关注

 11  588

I am NOT developing any web service application which contain client side and backend server side (like java EE application or Ruby on Rai

相关标签:

11条回答

闹比i

2020-12-01 04:56

You can use JavaScript to read the user language and show the right flag/content:

HTML:

<img id="myFlag" src="flag_default.png"/>

and some jQuery (since you tagged your question with jQuery):

var supportedLangs = ['de', 'en', 'cn'];
var userLang = navigator.language;

if($.inArray(userLang, supportedLangs) >= 0){
    $('myFlag').attr('src', 'flag_' + userLang + '.png');
}

hjsfiddle

0 讨论(0)

感情败类

2020-12-01 04:59

You can use the standard HTML lang attribute:

<span lang="en">Scale</span><span lang="de">Maßstab</span>

And then you can hide and show the matching elements:

function select_language(language) {
    $("[lang]").each(function () {
        if ($(this).attr("lang") == language)
            $(this).show();
        else
            $(this).hide();
    });
}

I use a simple selection:

<select onchange="select_language(this.options[this.selectedIndex].value)">
  <option value="en" selected>English</option>
  <option value="de">Deutsch</option>
</select>

0 讨论(0)

后悔当初

2020-12-01 05:00

Easy answer: No, using a backend is the easiest and best way to accomplish this. Backend code is designed for dynamic content, which is what you want.

Hard answer: This is a way to do this without dividing up your pages into two directories. The problem is that you're going to have to use Javascript to generate your page content, and that's generally a bad idea. But you could use a javascript MVC library, plus ajax calls to content folders that pull in the text (you'd still have to have two directories for English and Chinese, but they would only contain content, not HTML). The thing is, there's multiple potential problems with this method that it's only worth using if you know your users will have a modern browser with javascript enabled.

0 讨论(0)
发布评论:

提交评论
- 加载中...

旧巷少年郎

2020-12-01 05:02

Here's one way around this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Localise</title>
</head>

<body>  
    <a href="#china" onclick="showthis('contentchina')">China flag</a>|
    <a href="#usa" onclick="showthis('contentusa')">USA flag</a>

    <div id="contentchina" style="display:none">
        Lorem ipsum dolor sit amet...
    </div>

    <div id="contentusa" style="display:none">
        Duis aute irure dolor...
    </div>

    <script>
    function showthis(nation) {
        document.getElementById(nation).style.display = "block";
        return false;
    }
    </script>
</body>
</html>

0 讨论(0)

生来不讨喜

2020-12-01 05:07

I would suggest looking into a template engine for this problem. To me it's not exactly a backend but more of a grey area. Something like Moustache OR smarty would be perfect for you.

Simply put, i agree with the other posters that this is not reasonable to achieve on the client side.

0 讨论(0)
发布评论:

提交评论
- 加载中...

北海茫月

2020-12-01 05:09

Nowadays I would do it without jQuery. First I would hide all nodes with a lang attribute and show only the default language. This can be done in CSS:

[lang] {
  display: none;
}
[lang=en] {
  display: unset;
}

Without JavaScript enabled the document is not localized but at least readable in the default language.

Next I would use some JavaScript to show the correct language, if it is in the list of supported languages.

function localize (language)
{
  if (['de'].includes(language)) {
    let lang = ':lang(' + language + ')';
    let hide = '[lang]:not(' + lang + ')';
    document.querySelectorAll(hide).forEach(function (node) {
      node.style.display = 'none';
    });
    let show = '[lang]' + lang;
    document.querySelectorAll(show).forEach(function (node) {
      node.style.display = 'unset';
    });
  }
}

You can either use a select box or the browser language.

localize(window.navigator.language);

0 讨论(0)

1 2 下一页