保存其內容的HTML頁面,替換HTML文件本身

[英]HTML page that save its content, replacing the HTML file itself


I've to create a html page that auto-save its content.

我必須創建一個自動保存其內容的html頁面。

This page is just a report of the activities of 4 days, that should be updated by some user.

這個頁面只是一個4天的活動報告,應該由一些用戶更新。

enter image description here

This page will be used just for 3/4 days (Go live summary status page, and this say i all).. So I don't wanna lose time with backend, but I wanna do something like a trick just on client side, Javascript and HTML.

這個頁面將只使用3/4天(點擊實時摘要狀態頁面,顯示我全部)。我不想在后台浪費時間,但我想在客戶端做一些技巧,Javascript和HTML。

What I would like to do:

我想做的是:

A user access to the page, this page is published on our internal server, update the status of the task and save the page! I thought to do this in two ways:

用戶訪問該頁面,該頁面將發布在我們的內部服務器上,更新任務的狀態並保存該頁面!我想用兩種方式來做這件事:

  • Any time I press the save button it just replace the old html content with the new one (replacing the html file itself)
  • 每當我按下save按鈕它就會用新的替換舊的html內容(替換html文件本身)
  • Save the content in a plan file that will be loaded everytime the page is used, this second option obviously costs a lot of more work..
  • 將內容保存在一個計划文件中,該文件將在每次使用頁面時加載,這第二個選項顯然要花費大量的工作。

Any suggestion? I meant, is there something that help me doing this in just few time? I've about 2 days to finish this :(

任何建議嗎?我的意思是,有什么東西能在短時間內幫助我做這件事嗎?我有兩天的時間來完成這個:

UPDATE: Guys maybe i'm not explaining myself so good, am i thinking so wrong if i suppose just something like this:

更新:伙計們,也許我沒有很好地解釋我自己,如果我只是這樣想的話,我想錯了嗎:

Javascript function that when you click the save button replace the old html server file with the new one containing the row updated...

當您點擊save按鈕時,Javascript函數將舊的html服務器文件替換為包含行更新的新文件。

Easy easy easy...! I'm a backend developer.. not a lot of experience with beautiful styled front end pages :)

簡單簡單簡單…!我是一個后端開發人員. .沒有很多經驗與漂亮的風格前端頁:)

UPDATE: By your answer i'm assuming that is NO WAY to do this, without a backend side logic, even if light one, but its not possible to achieve this just with a client side scripting.. I already thought at this, but i was hoping there is some kind of trick that allows to do this without place anything on the server side.. :(

更新:根據您的回答,我假設沒有后端邏輯是無法實現的,即使是輕量級的邏輯,但僅通過客戶端腳本是不可能實現這一點的。我已經考慮過這個問題了,但是我希望有一種技巧可以在服務器端不放置任何東西的情況下實現這一點。:(

4 个解决方案

#1


1  

Finally, because we can use PHP we decided to do this: we put this in a file called "prova.php" and we launch this. This file shows the content of 'file.html' and save in 'salva.php' sending the data to save.

最后,因為我們可以使用PHP,所以我們決定這樣做:我們將它放在一個名為“prova”的文件中。我們啟動這個。這個文件顯示了“文件”的內容。然后保存在“salva”中。php發送數據保存。

 <?php include('file.html');?> 

 some added string
 </div> 

 <button onclick="save()">SAVE</button> 

 <script> 


 function save(){ 

 var newData=document.getElementById("myText").innerHTML; 
 $.post( "salva.php", { data: newData} ); 
 } 
 </script>

The file to save called salva.php, receive the string and save in an existing file called "file.html".

要保存的文件稱為salva。php,接收字符串並保存在一個名為“file.html”的現有文件中。

<?php


$stringa=$_POST['data'];

$ourFileName = "file.html";
$ourFileHandle = fopen($ourFileName, 'w') or die("can't open file");
fwrite($ourFileHandle,$stringa);
fclose($ourFileHandle);


?>

file.html is a file that contains nothing at the beginning

文件。html是一開始不包含任何內容的文件

#2


1  

You can do a timed ajax request every 2 minutes asking for new content and replacing that into the <body> tag.

您可以每2分鍾執行一次ajax請求,請求新的內容,並將其替換為標記。

I recommend to use jQuery for this as it helps you do this pretty easily: http://api.jquery.com/jquery.ajax/

我建議您使用jQuery,因為它可以幫助您很容易地做到這一點:http://api.jquery.com/jquery.ajax/

#3


1  

You can use Web Storage to store the data in the user's local end. And its pretty easy and supported by most modern browsers.

您可以使用Web存儲將數據存儲在用戶的本地端。而且它非常簡單,大多數現代瀏覽器都支持它。

There are two "mechanisms" for using Web Storage.

使用Web存儲有兩個“機制”。

  1. sessionStorage maintains a separate storage area for each given origin that's available for the duration of the page session (as long as the browser is open, including page reloads and restores)
  2. sessionStorage為每個給定來源維護一個單獨的存儲區域,在頁面會話期間可用(只要瀏覽器是打開的,包括頁面重載和恢復)
  3. localStorage does the same thing, but persists even when the browser is closed and reopened.
  4. localStorage做的也是同樣的事情,但是即使瀏覽器關閉並重新打開,它仍然會持續。

Update:- If you want to store data on server but donot want to bother with full fledged database servers then maybe you could use "SQLite". Basically its just runs off of a file.

更新:-如果你想在服務器上存儲數據,但又不想使用成熟的數據庫服務器,那么你可以使用“SQLite”。基本上就是從文件中運行。

#4


1  

<html>
    <head>
        <title>Button Writer</title>
    </head>

    <body onload="read()">
         <!--<button onclick="writeInFile()">Save</button> -->
         <input type="button" id="somebutton" onclick="addText()">
         <input type="text" id="myText" placeholder="Enter Name Here">
         <div id="text2"></div>
    </body>


    //read a file and write content in text2 div, please set your path
<script>

function read(){
var xhr;
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

xhr.onreadystatechange = function(){document.getElementById("text2").innerHTML=xhr.responseText;};
xhr.open("GET","file.txt"); //SET YOUR PATH
xhr.send();
}

function addText()
        {
            document.getElementById('text2').innerHTML += document.getElementById('myText').value;
        }



</script>
</html>

To write in file you should use AJAX + PHP. If you want I'll tell you how

要寫入文件,應該使用AJAX + PHP。如果你願意,我告訴你怎么做


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2016/06/17/725977f4ece3a1fffbeb530fc7efa8a2.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com