Correggere l'eco di html in js?

Naviga le tue risposte
7

Un collega e io stavamo discutendo su come richiamare l'HTML all'interno del codice javascript. In particolare, in una situazione simile a questa: 

new Element('div', {
    html: '{long string of HTML goes here!}'
}.inject($('content'));

I frammenti brevi sembrano funzionare bene in questa situazione, ma cosa accadrebbe se facessimo eco a un ampio insieme di dati? La linea diventerebbe quindi molto lunga e difficile da eseguire il debug (perché chi scorre orizzontalmente?!)

Un problema sta anche nel fatto che oltre alla sua lunghezza, tutte le virgolette usate devono essere sfuggite, specialmente se il codice javascript viene echeggiato dal lato server, nel qual caso una delle virgolette sarebbe "usata" su ", di per sé.

Una soluzione sarebbe quella di spezzare la lunga fila di codice HTML: 

new Element('div', {
    html:   '{long string of HTML goes here!}' +
            '{some more HTML goes here}' +
            '{and even more...}'
}.inject($('content'));

Un'altra soluzione fornita includeva un addlashes () 'd include sul lato server, che coinvolge un secondo file. Anche se suppongo che sia anche possibile definire tutto il codice HTML da includere in una variabile php ed echo quando è necessario: 

<?php
    $html = addslashes('{html content}');
?>

new Element('div', {
    html: '<?=$html?>'
}.inject($('content'));

Quale metodo è il migliore in termini di leggibilità, efficienza e sicurezza del codice?

    
posta Julian H. Lam 14.07.2011 - 17:15
fonte

2 risposte

7

Il metodo addslashes NON è affidabile. Invece, fai: 

new Element('div', {
    html: <?= htmlspecialchars(json_encode($html)) ?>
}.inject($('content'));

addslashes () è un metodo deprecato braindead di escape del testo per l'utilizzo di SQL. Non è inteso per Javascript. Ecco a cosa serve JSON. Converte i tuoi dati PHP (variabile semplice, oggetto, array, ecc ...) in ciò che è garantito per essere Javascript sintatticamente corretto.

JSON (o javascript) incorporato in HTML deve essere opportunamente scappato per HTML. Ecco perché è avvolto in htmlspecialchars() . Considera che JSON non NON codifica < , > , & e altri perché sono caratteri validi in una stringa JSON quotata.

Tuttavia, dal momento che stai solo inserendo un blocco di html in JS, puoi semplicemente avere 

<div id="seekrithiddenhtml" style="display: none">
<?= $html ?>
</div>

da cui è quindi possibile eseguire una semplice clonazione in javascript.

    
risposta data 14.07.2011 - 17:27
fonte
1

Penso che sia sempre meglio separare il codice e il contenuto. Ogni volta che puoi evitare di inserire la copia letterale della pagina nella tua fonte, fallo. Un grande vantaggio è che ti consentirebbe di fornire accesso limitato per gli editor di copia ai file contenenti la copia della pagina, il che significa che non faresti mai il loro lavoro e che non avrebbero mai a che fare con il tuo codice. Detto questo, non penso che archiviare la copia della pagina nei file sia la strada da percorrere - Suggerirei un database ogni volta che è possibile in modo da poter facilmente creare un'interfaccia utente per la manipolazione della copia. Quindi, il riferimento nella tua fonte è coerente, astratto e dinamico.

    
risposta data 14.07.2011 - 17:20
fonte

Leggi altre domande sui tag

L'approvazione della lingua da parte di piattaforme diverse (Android, iOS) danneggia lo sviluppo delle app? Quale struttura dati posso usare per modellare una rete di nodi e spigoli?