2016-03-28 17 views
5

Używam następującego kodu do wstawienia nowego skryptu z treścią do pliku HTML, Obecnie działa poniższy kod i nowy skrypt jest wstawiany po pierwszym istniejącym skrypcie, Problem polega na tym, że treść nie jest wciętaJak zmienić wcięcie nowej dodanej zawartości znacznika skryptu

np. to jest wyjście z nowo dodanego skryptu (jak widać jej w jednej linii)

<script> var keyOfFilesArray = Object.keys(data)[0]; var filesArray = data[keyOfFilesArray];   </script> 

chcę to zmienić, aby być wcięte jak następuje:

  1. drugi dodaje tag otwarty skrypt dodaje linię pozamykania znacznik pierwszego skryptu
  2. z Vars powinna być wkładana jedna po drugiej tak być
<script> 
var keyOfFilesArray = Object.keys(data)[0]; 
var filesArray = data[keyOfFilesArray]; 
</script> 

W jaki sposób można to zrobić? Wierzę, muszę dodać/n, ale nie wiem, gdzie jest najlepszym sposobem, aby go wstawić ...

https://jsfiddle.net/k32ntkr8/

Jest to kod JS

btn.onclick = function(e){ 
debugger; 
var innerhtml = [ 
     ' var keyOfFilesArray = Object.keys(data)[0];', 
     ' var filesArray = data[keyOfFilesArray];   ' 
    ].join(''); 

    var html = process(input.defaultValue,innerhtml); 
    output.value = html; 

} 


function process(html,innerhtml) { 
    var escapedHTML = html 
     .replace(/body/g, 'body$') 
     .replace(/head/g, 'head$'); 
    sandbox.innerHTML = escapedHTML; 

    var script = sandbox.querySelectorAll('#app-ux-bootstrap')[0]; 

    var newScript = document.createElement('script'); 
    newScript.innerText = innerhtml; 
    script.parentNode.insertBefore(newScript, script.nextSibling); 

    var unescapedHTML = sandbox.innerHTML 
     .replace(/body\$/g, 'body') 
     .replace(/head\$/g, 'head') 
     .replace(/&quot;/g, "'"); 

    return (
     '<!DOCTYPE HTML>\n<html>' + 
     unescapedHTML + 
     '</html>' 
    ); 

}; 

Jak to może być Gotowe? proszę sugerować, odpowiedź poniżej niewiele pomoże ... jeśli mogę poprawić to pytanie jakoś proszę daj mi znać.

+0

Niestety, ale dlaczego chcesz to zrobić? Przez większość czasu, kiedy ludzie kończą swój kod, minimalizują go, aby mieć mniejsze pliki, a nie przeciwnie ... Jestem po prostu ciekawy ... –

+0

@BozidarSikanjic - poprawne podczas kompilacji minimalizowanie pliku, ale muszę to pokazać plik wcześniej w jakimś edytorze ... –

Odpowiedz

1

Ok, jeśli zmienisz obsługi onclick do tego

btn.onclick = function(e){ 
debugger; 
var innerhtml = [ 
     '', 
     '  <script>', 
     '   var keyOfFilesArray = Object.keys(data)[0];', 
     '   var filesArray = data[keyOfFilesArray];   ', 
     '  <\/script>' 
    ].join('\n'); 

    var html = process(input.defaultValue,innerhtml); 
    output.value = html; 

} 

i zmienić linie process zamieszkujących skrypt do tego

var script = sandbox.querySelectorAll('#app-ux-bootstrap')[0]; 
script.parentNode.insertAdjacentHTML('afterBegin', innerhtml); 

Powinieneś dostać to wyjście

<head> 
    <script> 
    var keyOfFilesArray = Object.keys(data)[0]; 
    var filesArray = data[keyOfFilesArray];   
    </script> 
... 
</head> 
+0

Dzięki, ale gdzie dokładnie lepiej to zrobić? –

+0

Czy próbowałeś tego? Nie działa. – Adjit

+0

Możesz to zrobić w miejscu, w którym teraz to robisz, ale zamiast łączenia się z pustym ciągiem, dołącz do nowej linii – gabesoft

1

Coś takiego?

var innerhtml = [ 
    '\tvar keyOfFilesArray = Object.keys(data)[0];', 
    '\tvar filesArray = data[keyOfFilesArray];' 
].join("\n"); 

var script_code = '<script>\n' + innerhtml + '\n<\/script>'; 

Następnie wystarczy wstawić zmienną script_code w miejscu, w którym ma się pojawić na stronie.

https://jsfiddle.net/e72c17zg/1/

+0

Może to być ogólne, Mam na myśli założenie, że dostaję dowolny ciąg wewnątrz tego wewnętrznego html bez sprzężenia i "\ t" jak mogę go utworzyć jako wynik, który podasz? –

Powiązane problemy