Question

我非常不一个javascript / html / css人。

即便如此，我发现自己处于必须要做网页的位置。它是静态的，你唯一能做的就是点击标志来改变基于cookie的dispay语言。

如果cookie说“this”，我用一种语言写文本，如果cookie说“那”我用另一种语言写。这很好用，但我必须使用很多的document.write语句，这很丑陋。

现在我输入我想要的文字，并在emacs中使用宏来折叠文本 80个字符，并在每行的开头放置document.write("，在结尾放置");。然后我将其粘贴到if(cookie_this) { } else { }。

的网页中

必须有更好的方法来做...请？
的修改：我正在寻找解决document.write

中的限制的方法

约束：

没有服务器端魔术，这意味着没有ruby / php / perl
仅限一页，或者更确切地说只有一个可见网址
解决方案应该比我工作的解决方案简单

Answer 1

扩展artlung's answer：

您可以显示或隐藏给定lang属性（或任何其他条件，例如类名）的内容。在jQuery和HTML中：

<p>Language:
    <select id="languageSelector">
        <option value="en">English</option>
        <option value="es">Espa&ntilde;ol</option>
    </select>
</p>

<div lang="en-us">
Hello
</div>

<div lang="es">
Hola
</div>

<script type="text/javascript">
var defaultLanguage = 'en';
var validLanguages = ['en', 'es'];

function setLanguage(lang, setCookie) {
    if(!$.inArray(languages, lang))
        lang = defaultLang;

    if(typeof(setCookie) != 'undefined' && setCookie) {
       $.cookie('language', lang);
    }

    // Hide all things which can be hidden due to language.
    $('*[lang]').filter(function() { return $.inArray(languages, $(this).attr('lang')); }).hide();

    // Show currently selected language.
    $('*[lang^=' + lang + ']).show();
}

$(function() {
    var lang = $.cookie('language'); // use jQuery.cookie plugin
    setLanguage(lang);

    $('#languageSelector').change(function() {
        setLanguage($(this).val(), true);
    });
});
</script>

Answer 2

jQuery可以轻松地做到这一点，但你可以创建一个元素然后设置元素innerHTML属性。您可能需要稍微更改一下您的呼叫，以便附加子元素。有关详细信息，请参阅createElement函数。例如

<script type="text/javascript">
  function writeElement(language, elementId) {
    var newElement = document.createElement("span");
    if (language = "this") {
      newElement.innerHTML = "text for this";
    }
    else {
      newElement.innerHTML = "text for that";
    }
    var element = document.getElementById(elementId);
    element.appendChild(newElement);
  }
</script>

<强>用法

<span id="data1"></span>
<script type="text/javascript">
  writeElement("this", "data1")
</script>

如果你可以支持jQuery，你可以添加一个评论，而你想要一个样本。

Answer 3

我认为解决这个问题的正确方法是解析Accept-Language标头，然后执行此服务器端。

但是在您遇到客户端脚本的情况下。假设您的内容标记为此

<script type="text/javascript">
if(cookie_this) { 
document.getElementById('esContent').style.display = 'block';
} else {
document.getElementById('enContent').style.display = 'block';
}
</script>

<div id="esContent" style="display:none">
Hola, mundo.
</div>

<div id="enContent" style="display:none">
Hello, world.
</div>

对于启用了CSS且禁用JavaScript的用户，这不会降低。其他方法可能包括使用Ajax基于cookie值加载内容（您可以使用jQuery）。

Answer 4

如果您只想要一个可见的URL，但可以在服务器上托管多个页面，您也可以尝试XHR。我使用jQuery因为我最熟悉它，尽管它可以单独在javascript中实现：

<html>
 <head>
  <script type="text/javascript" src="path/to/jquery.js"> </script>
  <script type="text/javascript">
   $(document).ready(function () {
       if (cookie_this) {
           $("body").load("onelanguage.html body");
       } else {
           $("body").load("otherlanguage.html body");
       }
   });
  </script>
 </head>
 <body>
 </body>
</html>

Answer 5

检测应该在服务器上（最好是基于客户端发送的Accept-Language标头），你应该发送一个已经本地化的静态文件。

Answer 6

这不符合原始问题的（已修改）条件，但无论如何都可能有用。

使用服务器端脚本。您正在寻找的内容可以在PHP中轻松完成。你可能想要一个基于语言的文档层次结构，并且会在那里查找。例如，目录树：

/en/
/en/page1.html
/en/page2.html
/es/
/es/page1.html
/es/page2.html

在PHP中，它就像

一样简单

$language = $_GET['lang'];
$page = $_GET['page'];
include($language . '/' . $page);
// URL is: /whatever.php?lang=LANGUAGE_HERE&page=PAGE_HERE

但是，这有很多安全问题。清理您的输入并确保目录和文件存在。富勒示例：

$contentRoot = './';      // CHANGE ME.  Do include trailing /.
$defaultLanguage = 'en';  // CHANGE ME.
$defaultPage = 'home';    // CHANGE ME.

if(isset($_GET['lang']))
    $language = $_GET['lang'];
else
    $language = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 2);

if(isset($_GET['page']))
    $page = $_GET['page'];
else
    $page = $defaultPage;

$languageDir = basename($_GET['lang']) . '/';
$pageFile = basename($page) . '.html';

if(!file_exists($contentRoot . $languageDir) || !is_dir($contentRoot . $languageDir))
    $languageDir = $defaultLanguage;

$fullFileName = $contentRoot . $languageDir . $pageFile;

if(!file_exists($fullFileName) || !is_file($fullFileName) || !is_readable($fullFileName))
    $pageFile = $defaultPage;

readfile($fullFileName);
// Or, if you want to parse PHP in the file:
include($fullFileName);

您可能还想使用mod_rewrite（Apache）来允许http://www.mysite.com/en/page1等网址。（请务必隐藏实际页面。）

// TODO mode_rewrite rules

另一种方法是将上述层次结构放入文档根目录并直接分发URL。这样可以降低功耗（例如模板化更困难），但您必须担心外部介质的正确引用。

如果您正在寻找动态方法，请在客户端使用Javascript来使用Ajax获取数据。这也很简单，不需要动态服务器后端。我推荐一个Javascript框架，比如jQuery，以使其尽可能简单。

Answer 7

在JS中没有好办法做到这一点。最好的方法是使用非常简单的PHP代码。但是，如果你愿意，JS中有一种方法 - 准备这样的页面：

一些具有不同语言版本的网页，例如index_en.html，index_ru.html
主index.html页面，其中包含if（cookie）windows.location.replace（'index_en.html'）其他代码......

如何在没有document.write长度限制的情况下写入页面

7 个答案: