在瀏覽器中動態(tài)存取和可視化編輯web頁面的方法
【技術(shù)領(lǐng)域】
:
[0001]本發(fā)明涉及一種WEB頁面編輯技術(shù)，特別是在一種瀏覽器中動態(tài)存取和可視化編輯WEB頁面的方法。
【背景技術(shù)】
:
[0002]當(dāng)前，所有對頁面進行可視化編輯的方法都集中在單機形式的軟件中，例如Frontpage和Dreamwaver。基本的思路都是在本地計算機上編輯網(wǎng)頁,然后將編輯好的網(wǎng)頁上傳到合適的網(wǎng)絡(luò)空間中。這對網(wǎng)頁的編輯者提出了很高的要求，需要具有相當(dāng)?shù)腎nternet和HTML的知識，很大地限制了創(chuàng)建網(wǎng)頁的推廣范圍。而后來出現(xiàn)的輔助樣板出現(xiàn)的實時網(wǎng)頁內(nèi)容的編輯，只能提供有限的樣板，同樣不方便用戶動態(tài)存取和可視化編輯WEB頁面。

【發(fā)明內(nèi)容】

:
[0003]針對現(xiàn)有技術(shù)存在的缺陷，本發(fā)明提供一種在瀏覽器中動態(tài)存取和可視化編輯WEB頁面的方法，不需要網(wǎng)頁的編輯者掌握專業(yè)的網(wǎng)頁制作知識，就可以在網(wǎng)絡(luò)上隨時創(chuàng)建和編輯網(wǎng)頁。
[0004]本發(fā)明的技術(shù)方案是:
[0005]一種在瀏覽器中動態(tài)存取和可視化編輯WEB頁面的方法，其特征在于按照以下步驟進行的:
[0006]A、服務(wù)器在可編輯頁面建立有特定功能的腳本，所述特定功能包括編輯功能、鼠標(biāo)功能和/或鍵盤功能；
[0007]B、客戶端觸發(fā)編輯事件；
[0008]C、服務(wù)器響應(yīng)編輯事件，載入頁面編輯的腳本代碼；
[0009]D、載入鼠標(biāo)右鍵菜單系統(tǒng)；載入鼠標(biāo)事件和/或鍵盤事件；
[0010]E、建立無模式對話框體現(xiàn)的菜單窗口，通過獲取窗口句柄，建立根據(jù)選中對象的類型進行菜單窗口中菜單的自動切換的體系；
[0011]F、刪除用于將腳本載入本頁面的代碼，保持頁面的原貌；
[0012]G、服務(wù)器將處理后的頁面送到客戶端的瀏覽器中；
[0013]H、將編輯完成的頁面設(shè)置保存到網(wǎng)絡(luò)或保存到本地；所述保存到網(wǎng)絡(luò)為將內(nèi)存中的全部代碼進行編碼并上傳到服務(wù)器，調(diào)用服務(wù)器對應(yīng)腳本并對接收內(nèi)容進行解碼后將內(nèi)容存儲到對應(yīng)的文件中；所述保存到本地為將當(dāng)前頁面在內(nèi)存中的全部代碼寫入一個新窗口，并調(diào)用系統(tǒng)命令，將當(dāng)前頁面保存到本地電腦中用戶指定的位置。
[0014]上述在步驟D或E后建立選取對象/對象組的范圍方框?qū)ο蟆?br>[0015]上述在步驟D或E后建立處理選中對象/對象組的透明遮罩對象。
[0016]上述步驟E中還包括建立源代碼窗口，所述源代碼窗口中含有用戶查看、修改、拷貝頁面或頁面中某個對象的源代碼。
[0017]技術(shù)效果:
[0018]通過選中該網(wǎng)頁并在右鍵菜單中選擇“編輯”。服務(wù)器的對應(yīng)于“打開文件“功能的腳本就會啟動，讀出選中的網(wǎng)頁并在網(wǎng)頁末尾追加對應(yīng)于編輯功能的客戶端腳本，將處理后的頁面送到瀏覽器中。該頁面從視覺角度和原有頁面完全相同，但是已經(jīng)被添加了編輯功能，從而實現(xiàn)瀏覽器中動態(tài)存取和可視化編輯。
[0019]菜單窗口可以完成的功能主要是對頁面各種對象的各種屬性的修改，客戶此時可以編輯這個頁面，所有可以編輯的功能都已經(jīng)在本地頁面的代碼中包含，比如剪切、復(fù)制、粘貼、刪除本系統(tǒng)建立的內(nèi)容，增加圖片，背景音樂之類的功能，編輯的結(jié)果存放在一個自定義的對象中，該對象保存的代碼就是以后生成頁面的代碼的主體；源代碼窗口可以完成的功能是便于用戶直接查看、修改、拷貝頁面或頁面中某個對象的源代碼；幫助窗口可以提供給用戶基本的操作說明，提供幫助信息。
[0020]在用戶編輯完成后，可以選擇“保存到網(wǎng)絡(luò)”或“保存到本地”?！氨４娴骄W(wǎng)絡(luò)”會將當(dāng)前頁面在內(nèi)存中的全部代碼進行編碼并上傳到服務(wù)器，調(diào)用服務(wù)器中對應(yīng)于“保存文件”的腳本。對應(yīng)的服務(wù)器腳本會對接收到的內(nèi)容進行解碼，檢查路徑的合法性，并將內(nèi)容存儲的對應(yīng)的文件中，這樣用戶就可以通過URL地址訪問頁面了 ；“保存到本地”會將當(dāng)前頁面在內(nèi)存中的全部代碼寫入一個新窗口，并調(diào)用系統(tǒng)命令，生成一個本地HTML文件，打開Windows的保存文件對話框，將當(dāng)前頁面保存到用戶指定的本地電腦中的任意位置。
[0021]本發(fā)明一種瀏覽器中動態(tài)存取和可視化編輯WEB頁面的方法不需要在本地電腦上安裝任何軟件，只需要使用標(biāo)準(zhǔn)的、已經(jīng)在Windows系統(tǒng)中預(yù)裝的IE瀏覽器，就可以在網(wǎng)絡(luò)上隨時創(chuàng)建和編輯網(wǎng)頁，極大的降低了網(wǎng)頁創(chuàng)作的門檻。
【附圖說明】
:
[0022]圖1為本發(fā)明一種瀏覽器中動態(tài)存取和可視化編輯WEB頁面的方法流程圖；【具體實施方式】:
[0023]下面結(jié)合附圖對本發(fā)明做進一步的說明。
[0024]圖1是本發(fā)明一種瀏覽器中動態(tài)存取和可視化編輯WEB頁面的方法流程圖。整個過程如下:
[0025]首先是在客戶端中客戶請求編輯一個新頁面。
[0026]然后服務(wù)器的對應(yīng)于“打開文件“功能的腳本就會啟動，讀出選中的網(wǎng)頁并在網(wǎng)頁末尾追加對應(yīng)于編輯功能的客戶端腳本，服務(wù)器端生成一個空頁面，服務(wù)器在可編輯頁面建立有特定功能的腳本，所述特定功能包括編輯功能、鼠標(biāo)功能和/或鍵盤功能，(所述腳本可以基于特定的PHP語言,通過e_open.php這個文件末尾加的客戶端腳本實現(xiàn)的在客戶端的編輯，采用Javascript還是PHP作為應(yīng)用于WEB客戶端的活動腳本語言)。服務(wù)器在空頁面末尾追加具有編輯功能的腳本，使得頁面看上去是一個空頁面，實際尾部包含很多代碼使該頁面能夠在客戶端被編輯，編輯的原理就是使用VML，是IE自帶的一個對象具有編輯功能，而且源代碼對用戶不可見，生成的網(wǎng)頁代碼的主體也是基于VML標(biāo)記的代碼，不是真正意義上客戶端看到的頁面的源代碼。
[0027]服務(wù)器將生成的頁面給客戶端；瀏覽器會在新窗口顯示獲得的頁面，頁面中被服務(wù)器腳本動態(tài)添加進來的客戶端腳本開始運行，主要的工作如下:
[0028]a)服務(wù)器響應(yīng)編輯事件，載入需要直接在本頁面完成的編輯功能的腳本代碼。
[0029]b)建立鼠標(biāo)右鍵采單系統(tǒng)。
[0030]c)在本頁面建立復(fù)雜的事件系統(tǒng)，大規(guī)模重定義鼠標(biāo)事件和鍵盤事件。
[0031]d)建立選取對象/對象組的范圍方框?qū)ο蟆?br>[0032]e)建立處理選中對象/對象組的透明遮罩對象。
[0033]f)彈出以無模式對話框體現(xiàn)的菜單窗口，傳遞本頁面的句柄，并建立菜單窗口中菜單的根據(jù)選中對象的類型進行自動切換的體系。
[0034]g)在腳本內(nèi)容全部載入內(nèi)存后，刪除用于將腳本載入本頁面的代碼以保持頁面的原貌，這個動作是服務(wù)器腳本為頁面添加腳本的逆動作。
[0035]彈出的菜單窗口則需要獲取父頁面的句柄，和父頁面建立聯(lián)系，準(zhǔn)備編輯父頁面中對象的屬性；載入所有編輯功能代碼，父頁面本身完成的功能代碼除外；建立字體對象、顏色對象、邊框?qū)傩越M合菜單等各種編輯使用的實時對象。
[0036]服務(wù)器將處理后的頁面送到客戶端的瀏覽器中，用戶對頁面進行編輯。主頁面本身的主要編輯功能如選中對象；移動對象；改變對象尺寸；剪切、復(fù)制、粘貼、刪除本系統(tǒng)建立的內(nèi)容；粘貼從其它應(yīng)用程序中建立的內(nèi)容；改變對象顯示的層次；改變對象的鎖定狀態(tài)；改變對象的組合狀態(tài)；插入各種頁面對象，例如文本、圖片、多媒體、向量圖形等等?’編輯文本；彈出菜單窗口，菜單窗口可以完成的功能主要是對頁面各種對象的各種屬性的修改，目前涉及到的功能大約530個；彈出源代碼窗口，源代碼窗口可以完成的功能是便于用戶直接查看、修改、拷貝頁面或頁面中某個對象的源代碼；彈出幫助窗口，幫助窗口可以提供給用戶基本的操作說明，提供幫助信息；將編輯完畢的頁面提交到服務(wù)器保存；將編輯完畢的頁面保存本地電腦。
[0037]在用戶編輯完成后，可以選擇“保存到網(wǎng)絡(luò)”或“保存到本地”?！氨４娴骄W(wǎng)絡(luò)”會將當(dāng)前頁面在內(nèi)存中的全部代碼進行編碼并上傳到服務(wù)器，調(diào)用服務(wù)器中對應(yīng)于“保存文件”的腳本，對應(yīng)的服務(wù)器腳本會對接收到的內(nèi)容進行解碼，檢查路徑的合法性，服務(wù)器端在這段代碼的基礎(chǔ)上添加一些HTML代碼，并將內(nèi)容存儲的對應(yīng)的文件中，也就是將其保存到服務(wù)器的某個位置，這樣用戶就可以通過URL地址訪問頁面了 ；“保存到本地”會將當(dāng)前頁面在內(nèi)存中的全部代碼寫入一個新窗口，并調(diào)用系統(tǒng)命令，利用頁面對象中的代碼作為主體，添加一些HTML代碼之后生成一個本地HTML文件，打開Windows的保存文件對話框，將當(dāng)前頁面保存到用戶指定的本地電腦中的任意位置。
【主權(quán)項】
1.一種在瀏覽器中動態(tài)存取和可視化編輯WEB頁面的方法，其特征在于按照以下步驟進行的: A、服務(wù)器在可編輯頁面建立有特定功能的腳本，所述特定功能包括編輯功能、鼠標(biāo)功能和/或鍵盤功能； B、客戶端觸發(fā)編輯事件； C、服務(wù)器響應(yīng)編輯事件，載入頁面編輯的腳本代碼； D、載入鼠標(biāo)右鍵菜單系統(tǒng)；載入鼠標(biāo)事件和/或鍵盤事件； E、建立無模式對話框體現(xiàn)的菜單窗口，通過獲取窗口句柄，建立根據(jù)選中對象的類型進行菜單窗口中菜單的自動切換的體系； F、刪除用于將腳本載入本頁面的代碼，保持頁面的原貌； G、服務(wù)器將處理后的頁面送到客戶端的瀏覽器中； H、將編輯完成的頁面設(shè)置保存到網(wǎng)絡(luò)或保存到本地；所述保存到網(wǎng)絡(luò)為將內(nèi)存中的全部代碼進行編碼并上傳到服務(wù)器，調(diào)用服務(wù)器對應(yīng)腳本并對接收內(nèi)容進行解碼后將內(nèi)容存儲到對應(yīng)的文件中；所述保存到本地為將當(dāng)前頁面在內(nèi)存中的全部代碼寫入一個新窗口，并調(diào)用系統(tǒng)命令，將當(dāng)前頁面保存到本地電腦中用戶指定的位置。
2.根據(jù)權(quán)利要求1所述一種在瀏覽器中動態(tài)存取和可視化編輯WEB頁面的方法，其特征在于所述在步驟D或E后建立選取對象/對象組的范圍方框?qū)ο蟆?br>3.根據(jù)權(quán)利要求1所述一種在瀏覽器中動態(tài)存取和可視化編輯WEB頁面的方法，其特征在于所述在步驟D或E后建立處理選中對象/對象組的透明遮罩對象。
4.根據(jù)權(quán)利要求1所述一種在瀏覽器中動態(tài)存取和可視化編輯WEB頁面的方法，其特征在于所述步驟E中還包括建立源代碼窗口，所述源代碼窗口中含有用戶查看、修改、拷貝頁面或頁面中某個對象的源代碼。
【專利摘要】本發(fā)明涉及一種在瀏覽器中動態(tài)存取和可視化編輯WEB頁面的方法，該方法按照以下步驟進行的：A、服務(wù)器在可編輯頁面建立有特定功能的腳本；B、客戶端觸發(fā)編輯事件；C、服務(wù)器響應(yīng)編輯事件，載入頁面編輯的腳本代碼；D、載入鼠標(biāo)右鍵菜單系統(tǒng)；載入鼠標(biāo)事件和/或鍵盤事件；E、建立無模式對話框體現(xiàn)的菜單窗口，通過獲取窗口句柄，建立根據(jù)選中對象的類型進行菜單窗口中菜單的自動切換的體系；F、刪除用于將腳本載入本頁面的代碼，保持頁面的原貌；G、服務(wù)器將處理后的頁面送到客戶端的瀏覽器中；H、將編輯完成的頁面設(shè)置保存到網(wǎng)絡(luò)或保存到本地。該方法不需要網(wǎng)頁的編輯者掌握專業(yè)的網(wǎng)頁制作知識，極大的降低了網(wǎng)頁創(chuàng)作的門檻。
【IPC分類】G06F9-44, G06F17-30
【公開號】CN104714989
【申請?zhí)枴緾N201410360063
【發(fā)明人】施霞虹
【申請人】南寧市磁匯科技有限公司
【公開日】2015年6月17日
【申請日】2014年7月25日