Rewrite HTML file using only JavaScript in header
Clash Royale CLAN TAG#URR8PPP
Rewrite HTML file using only JavaScript in header
I have an HTML file with this code:
<html>
<head>
<script>
function saveTextArea()
var newText = document.getElementById("textArea");
<!-- rewrite this file with <textarea id = 'textArea'> newText </textarea> -->
</script>
</head>
<body>
<button id = 'saveBtn'>Save</button>
<br>
<textarea id='textArea1'>MyText</textarea>
</body>
</html>
My use case is: In the browser, I rewrite what is in textarea. After, I press on the save button. In that moment I want to rewrite my HTML file with the new text in textarea, such that when reopening HTML file it will have a new text.
I want to do that without additional files. Can it be done using only javascript in the header? If yes, how?
3 Answers
3
No, That is not possible without any serverside code because when the browser requests a file (like http://localhost/index.html) server returns a copy of the fileindex.html. If you make an update to the Document(DOM) (via javascript) it won't be reflected in the original location. it is true for static files too.ie,file:///path/to/somefile.html
The final note is that you cannot update the real file(somefile.html) using javascript in the browser every update you made using javascript is temporary and non-persistent
index.html
file:///path/to/somefile.html
somefile.html
If i understand correctly, you want to replace the "Mytext" on a buttonpress, and than save the new file on with the replaced text on your server?
first of all you can replace the "Mytext" simply by adding newText.innerHTML="new text here" in the place where you have the command (https://www.w3schools.com/jsref/prop_html_innerhtml.asp)
newText.innerHTML="new text here"
but now you cannot save it with only javascript, and just sending the whole page to you server and save it there as an .html will be a terrible idea (never trust user input, and if you are gonna send whole .html files on your server which has been manipulated on somebodies else computer...)
My suggestion would be(but it depends what you want to use it for): Use SQL to keep track of which user saved what. And while generating the page with PHP check if the user has saved before.
This is what I want, but the html file is not on server. It is on my cloud.
– raul1ro
Aug 12 at 13:09
it still can be dangerous. for example: i can create a .php file which will delete all files [link] (w3schools.com/php/func_filesystem_unlink.asp). trick the browser in sending it and then request it the normal way again. upon requestion it will execute that function and delete everything.
– hortig
Aug 12 at 13:18
If you have to do this without a server side code, and only with javascript, I'd suggest window.sessionStorage. Although I would not recommend this, for the sake of your learning process, you can do it like this:
<script>
this.onload = function() // You can either use this/window.onload, as we are selecting some element from DOM or place this script at the bottom of your body
var newText = document.getElementById("textArea");
var btn = document.getElementById("saveBtn");
// First check if anything is saved, if so alter the innerHTML accordingly
if (sessionStorage.getItem("isSaved"))
newText.innerHTML = "newText";
// Assign a function to the button to set the session then change innerHTML
btn.onclick = function()
sessionStorage.setItem("isSaved", true);
newText.innerHTML = "newText";
</script>
<button id = 'saveBtn'>Save</button>
<br>
<textarea id='textArea'>MyText</textarea>
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
It is recommended that you use a server-side language for this.
– hev1
Aug 12 at 13:45