Inserimento HTML che interessa l'intera pagina

Sto creando una pagina in cui è possibile immettere HTML e vedere l'output in un div al lato.
Codice:Inserimento HTML che interessa l'intera pagina

$("#tryit").keyup(function() { 
 
    var input = $(this).val(); 
 
    $("#readout").html(input); 
 
});

#readout { 
 
    height: 400px; 
 
    width: 48%; 
 
    border: 1px solid black; 
 
    overflow: auto; 
 
    float: right; 
 
    clear: none; 
 
    display: inline-block; 
 
} 
 
#tryit { 
 
    height: 396px; 
 
    width: 50%; 
 
    float: left; 
 
    clear: none; 
 
    display: inline-block; 
 
    font-family: monospace; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea name="tryit" id="tryit" rows="10">&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;New Webpage&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;/body&gt; &lt;/html&gt; 
 
</textarea> 
 

 
<div id="readout"></div>

Esso funziona come dovrebbe: emette il codice HTML al #readout. Ciò che non va è quando un utente aggiunge un tag <style> nello head. Quindi lo stile aggiunto lì influisce non solo sull'HTML nell'input del testo, ma nell'intera pagina.
Come posso fare in modo che il CSS influenzi solo l'input dell'utente e non l'intera pagina?
Questo è il Problem Page.

fonte

2015-07-16 TricksfortheWeb

Come aggiunge qualcosa a ""? Il tuo script mette tutto nel DIV di lettura. – Barmar

Guarda la pagina. Prova ad aggiungere un tag di stile nella testa e a scherzare con il riempimento del corpo. Influirà sul riempimento della pagina effettiva, non sulla lettura. – TricksfortheWeb

La vera soluzione è farlo come jsfiddle e codepen do: metti il codice utente in un iframe in modo che non influisca sulla pagina principale. – Barmar

si dovrebbe davvero considerare l'utilizzo di un approccio diverso per raggiungere questo obiettivo.

Se vuoi davvero andare con quello che hai finora, devi sostituire un sacco di cose all'interno del valore textarea. Giusto per darvi un'idea, nel frammento qui sotto sto solo sostituendo le dichiarazioni html e body stile con il id (#readout) per applicare gli stili al #readoutdiv e non al body della pagina. Funziona per il body, ma che cosa è con tutte le altre possibili dichiarazioni?

Sicuramente sono un vero noob quando si tratta di regex e sono sicuro che questo può essere fatto molto meglio, ma tutto questo non è necessario.

$("#tryit").keyup(function() { 
 
    var style = $(this).val().match(/<style>(.*)<\/style>/); 
 
    if (style !== null && style.length > 0) { 
 
     var bodyReplace = style[1].replace(/(^|\s)(html)|(body)(\s|$)/ig, '#readout'); 
 
    } 
 
    var input = $(this).val(); 
 
    $("#readout").html(input.replace(/<style>.*<\/style>/, '<style>'+bodyReplace+'</style>')); 
 
}); 
 

 
$("#tryit").keyup();

#readout { 
 
    height: 400px; 
 
    width: 48%; 
 
    border: 1px solid black; 
 
    overflow: auto; 
 
    float: right; 
 
    clear: none; 
 
    display: inline-block; 
 
} 
 
#tryit { 
 
    height: 396px; 
 
    width: 50%; 
 
    float: left; 
 
    clear: none; 
 
    display: inline-block; 
 
    font-family: monospace; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea name="tryit" id="tryit" rows="10">&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;New Webpage&lt;/title&gt;<style>body {background: black; color: red }</style> &lt;/head&gt; &lt;body&gt;<h1>Hello</h1> &lt;/body&gt; &lt;/html&gt; 
 
</textarea> 
 
<div id="readout"></div>

Un altro problema è che gli elementi <doctype>, <html>, <head> e <body> nel textarea in realtà non esistono. Dai un'occhiata alla fonte e scoprirai che non ci sono e che non appartengono a loro. Detto questo vorrei andare con una soluzione menzionata in un commento di Barmar, che ha suggerito l'utilizzo di un iframe.

In realtà non è così difficile da raggiungere. Un modo rapido e sporco consiste nel creare una blob dalla textarea value e aggiungerla all'attributo source di uno iframe. Ciò renderebbe più semplice persino separare il tuo HTML e CSS avendo un'altra area di testo per il CSS e iniettando il suo value come un foglio di stile nella testa dello iframe.Dal momento che non posso usare la cosa iframe nello strumento SO frammento a causa della roba di sicurezza sandbox controllare questo

JSFIDDLE

e io sono sicuro che otterrete l'idea.

fonte

2015-07-17 14:13:22 DavidDomain

Grazie. Mi stavo chiedendo come - se non del tutto - fosse possibile. – TricksfortheWeb

nel CSS rendono al punto in cui si seleziona il vostro input div con un ID specifico quindi selezionare i suoi elementi figlio:

<style>  
#readout input{ 
    color: red; 
} 
</style>

ho aggiunto il tag di stile dal momento che si sta mettendo il CSS direttamente nel vostro editor HTML. Il css sopra avrà effetto solo su ogni elemento di input nel tuo div con l'id di lettura.

Se siete alla ricerca di qualcosa di diverso si prega di dirlo

Look at this fiddle

fonte

2015-07-16 22:49:49 code

No, questo non è quello che voglio. Guarda la pagina con il problema. Se aggiungi uno stile nella textarea, questo influenzerà la pagina effettiva, non il div della lettura – TricksfortheWeb

Qualsiasi stile che tu putt in quell'editor dovrebbe essere racchiuso in un tag ** style ** in modo che sappia che il suo css e non testo – code

sì , ma lo stile racchiuso in un tag di stile interessa l'intera pagina, non il div con un id di lettura – TricksfortheWeb

Inserimento HTML che interessa l'intera pagina

risposta

Problemi correlati