Comment écrire à la page sans limitation de longueur de document.write

Question

Je suis beaucoup pas une personne de javascript/html/css.

Même si je me trouve dans la position d'avoir à faire une page Web. C'est statique, la seule chose que vous pouvez faire est de cliquer sur les drapeaux pour changer la langue de dispay basée sur un cookie. Si le cookie dit «ceci», j'écris du texte dans une langue, et si le cookie dit «ça» j'écris dans une autre langue. Cela fonctionne parfaitement, mais je dois utiliser lots des déclarations document.write et c'est laide et lourde.

En ce moment, je tape le texte que je veux et utiliser une macro dans emacs pour plier le texte à environ 80 caractères et mettre document.write(" au début de chaque ligne et "); à la fin. Je le colle ensuite dans la page Web dans un if(cookie_this) { } else { }.

Il doit y avoir une meilleure façon de le faire ... S'il vous plaît?
Modifier:
je solution cherche les limites dans document.write

Contraintes:

• Pas de magie côté serveur, ce qui signifie pas ruby ​​/ php/perl
• One page seulement, ou plutôt une seule url visible
• La solution devrait être plus simple que celle que j'ai:

Answer 1

Développant artlung's answer:

Vous pouvez afficher ou masquer les choses étant donné un attribut lang (ou tout autre critère, comme un nom de classe). Dans jQuery et 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

La détection doit être sur le serveur (de préférence en fonction de l'en-tête Accept-Language envoyé par le client), et vous devez envoyer un fichier statique qui a déjà été localisé.

Answer 3

Cela ne correspond pas aux critères (édités) de la question d'origine, mais peut être utile malgré tout.

Utilisez un script côté serveur. Ce que vous cherchez peut facilement être fait en PHP. Vous voudriez probablement une hiérarchie de documents basée sur la langue, et rechercheriez cela étant donné. Par exemple, une arborescence de répertoires:

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

En PHP, il est aussi simple que

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

Cependant, qui a de nombreux problèmes de sécurité avec elle. Désinfectez votre entrée et assurez-vous que le répertoire et le fichier existent. Fuller exemple:

$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); 

Vous pouvez également utiliser mod_rewrite (Apache) pour permettre par exemple http://www.mysite.com/en/page1 d'URL. (Assurez-vous de cacher la page réelle.)

// TODO mode_rewrite rules 

Une autre approche met la hiérarchie ci-dessus dans la racine du document et de distribuer des URL directement. Cela vous donne moins de puissance (par exemple, la modélisation est plus difficile), et vous devez vous inquiéter du fait que les médias externes soient correctement référencés.

Si vous recherchez une approche dynamique, du côté client, utilisez Javascript pour récupérer les données en utilisant Ajax. C'est aussi trivial, et ne nécessite pas de backend de serveur dynamique. Je recommande un framework Javascript tel que jQuery pour rendre cela aussi simple que possible.

Answer 4

Il n'y a pas de bon moyen de le faire dans JS. Le meilleur moyen est d'utiliser du code PHP TRES simple. Mais, si vous voulez, il y a un moyen de JS - préparer des pages comme celles-ci:

• quelques pages avec différentes versions linguistiques, comme index_fr.html, index_ru.html
• page index.html, où vous avez le code comme si (cookie) windows.location.replace ('index_en.html') sinon ...

Answer 5

jQuery peut le faire avec beaucoup moins de facilité, mais vous pouvez créer un élément puis définir les éléments propriété innerHTML. Vous devrez peut-être modifier légèrement votre appel afin d'ajouter l'élément enfant. Voir createElement fonction pour plus d'informations. Par exemple

<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> 

Utilisation

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

Ajouter un commentaire si vous pouvez soutenir jQuery et que vous voulez un échantillon de cette place.

Answer 6

Je pense que la bonne façon d'aborder cela est d'analyser l'en-tête Accept-Language, et de le faire côté serveur.

Mais dans le cas où vous êtes coincé avec les scripts côté client. Supposons que votre contenu a été marqué comme celui-ci

<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> 

Cela ne se dégrade pas pour les personnes avec CSS activé et désactivé JavaScript. D'autres approches peuvent inclure l'utilisation d'Ajax pour charger le contenu basé sur une valeur de cookie (vous pouvez utiliser jQuery pour cela).

Dernière question

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Questions connexes

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.