First of all let me clarify that what I'm trying to do is for locally use only, users will have direct access to the html page.
What I'm trying to do is basically append and save text to an HTML file.
This is what I have.
HTML (index.html)
<div id="receiver"></div>
<button id="insertButton">Insert</button>
JS
$(document).ready( function() {
$('#insertButton').click(function(){
$('#receiver').append('<h1>Hi,</h1>','<p>How are you?</p>');
})
});
What I don't know is how to save the file (index.html) after the appending. Any idea how to do that? Is this even possible with Javascript or jQuery?
First of all let me clarify that what I'm trying to do is for locally use only, users will have direct access to the html page.
What I'm trying to do is basically append and save text to an HTML file.
This is what I have.
HTML (index.html)
<div id="receiver"></div>
<button id="insertButton">Insert</button>
JS
$(document).ready( function() {
$('#insertButton').click(function(){
$('#receiver').append('<h1>Hi,</h1>','<p>How are you?</p>');
})
});
What I don't know is how to save the file (index.html) after the appending. Any idea how to do that? Is this even possible with Javascript or jQuery?
Share Improve this question asked Nov 1, 2014 at 13:41 fs_tigrefs_tigre 10.8k15 gold badges86 silver badges178 bronze badges 3- You need to save the edited file on the server? You can't do this only with javascript - you need a server-side language. – Al.G. Commented Nov 1, 2014 at 13:47
- you can give id to <body> tag <body id='whole-html'> and then after appending the content you can get the html ... you wont be able to save on server ( if you trying to do because it is executing on client machine ) thn you can use something like this.. stackoverflow./questions/4439296/….. In my opinion.. Also to save on server or download using php just after appending the content u can make ajax call to server php page... hope it helps... – Ahmad Commented Nov 1, 2014 at 13:48
- No, this will NOT be hosted in a server. Local drive only. – fs_tigre Commented Nov 1, 2014 at 13:54
2 Answers
Reset to default 4You could change your handler to do this:
$(document).ready( function() {
$('#insertButton').click(function(){
$('#receiver').append('<h1>Hi,</h1>','<p>How are you?</p>');
// Save the page's HTML to a file that is automatically downloaded.
// We make a Blob that contains the data to download.
var file = new window.Blob([document.documentElement.innerHTML], { type: "text/html" });
var URL = window.webkitURL || window.URL;
// This is the URL that will download the data.
var downloadUrl = URL.createObjectURL(file);
var a = document.createElement("a");
// This sets the file name.
a.download = "source.htm";
a.href = downloadUrl;
// Actually perform the download.
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
})
});
You should take a look at the patibility matrix and documentation of URL over at MDN. Notably URL is not available for IE 9 or earlier. Same for Blob.
If I understand it correctly, you need it on local machine and for temporary usage then you can store it in cookies. So whenever you load the page, check if cookie available, if yes then load data from cookies or load the fresh data. You can use this data, unless and until cookies are not cleared.
Hope this helps...
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745346776a4623587.html
评论列表（0条）