專利名稱:在網(wǎng)頁中動態(tài)引用文件的方法
技術領域:
本發(fā)明屬于Web網(wǎng)頁技術領域,尤其涉及一種在網(wǎng)頁中引用云存儲中文件的方法。
背景技術:
隨著互聯(lián)網(wǎng)的發(fā)展,人們通過網(wǎng)絡進行商業(yè)活動,通過網(wǎng)絡進行協(xié)同工作,通過網(wǎng)絡分享各自的精彩生活,互聯(lián)網(wǎng)已經(jīng)成為工作、生活、學習的一個平臺。云存儲技術的出現(xiàn)便于將自己的數(shù)據(jù)存放在云端,人們可以使用任意設備在任何地點接入互聯(lián)網(wǎng)時,都能讀取和操作存放在云端的數(shù)據(jù)。目前常用的云存儲方案中,用戶的數(shù)據(jù)存儲在云存儲服務器,用戶的任意設備在任意地點接入互聯(lián)網(wǎng),都可以拿到存儲在云存儲服務器中的數(shù)據(jù),并且可以實現(xiàn)多臺終端的靈活運用,不限制在哪一臺終端。例如用戶具有手機和筆記本電腦兩種終端,均能在任意地點任意時間享受云存儲的服務。同時,在很多情況下,人們在使用某些網(wǎng)站提供的應用或者自己建網(wǎng)站時,需要引用文件,目前常用的文件引用辦法有框架標簽iFrame引用,對象標簽object引用,行為(Behavior的download方式)引用和嵌入腳本Javascript或者flash方式的引用?;谠拼鎯夹g的云端在線文件的引用,常用的文件引用方法通常是服務端生成一串代表文件的鏈接,用戶通過剪切和粘貼的方法將這個文件鏈接張貼到需要的網(wǎng)頁中。也有一種改進的方式,通過在目標網(wǎng)頁中嵌入一段腳本語言(Javascript代碼)或者一個flash來顯示云存儲中的在線文件列表,供用戶選擇和插入。但是這種方式需要目標網(wǎng)頁的管理者在其網(wǎng)頁代碼中做修改,插入Javascript代碼或者flash代碼,而不是在任意的網(wǎng)頁中都可以實現(xiàn)。
發(fā)明內容
本發(fā)明的目的就是解決如何在任意網(wǎng)頁上疊加顯示云存儲中文件列表并且在列表中選取文件、產(chǎn)生鏈接并插入到此網(wǎng)頁輸入框中的問題。一種在網(wǎng)頁中動態(tài)引用文件的方法,包括步驟I)、在瀏覽器中收藏一個包含第一 Javascript代碼的項目;2)、在需要引用文件的網(wǎng)頁上觸發(fā)所述項目,執(zhí)行第一 Javascript代碼,在該網(wǎng)頁上生成一個iframe子框架并加載第二 Javascript代碼;3)、在生成的iframe子框架中載入包含第三Javascript代碼的指定頁面;4)、在所述iframe子框架中觸發(fā)第三Javascript代碼與第二 Javascript代碼通信,實現(xiàn)文件的引用。所述在瀏覽器中收藏一個包含第一 Javascript代碼的項目是指在瀏覽器收藏夾內或書簽中收藏包含第一 Javascript代碼的項目。所述執(zhí)行第一 Javascript代碼,在該網(wǎng)頁上生成一個iframe子框架,是指在該網(wǎng)頁上疊加顯示一個指定尺寸、指定位置和指定網(wǎng)頁內容的iframe子框架;或者是在該網(wǎng)頁上生成一個iframe子框架,是指在該網(wǎng)頁上插入一個指定尺寸、指定位置和指定網(wǎng)頁內容的iframe子框架。進一步地,所述步驟4)包括步驟4. I)、在子框架中進行操作觸發(fā)子框架內網(wǎng)頁的第三Javascript代碼的運行;4. 2)、第三Javascript代碼根據(jù)具體操作指令產(chǎn)生對應的一串字符串并且與第
二Javascript代碼交互,向第二 Javascript代碼提交該字符串;4. 3)、第二 Javascript代碼搜索當前光標所處的輸入框,將第三Javascript代碼提交的字符串插入到輸入框中。進一步地,步驟4. 3)進一步包括步驟第二 Javascript代碼搜索當前光標所處的輸入框,修改該輸入框的〈input〉或者〈textarea〉標簽內容,將第三Javascript代碼提交的字符串插入到輸入框中;瀏覽器根據(jù)修改后的〈input〉或者〈textarea〉標簽內容,在輸入框中顯示出插入的字符串。進一步地,所述子框架內網(wǎng)頁為云存儲文件列表網(wǎng)頁,所述具體操作指令為文件引用指令,根據(jù)具體操作指令產(chǎn)生對應的一串字符串為引用文件的鏈接。本發(fā)明在網(wǎng)頁中動態(tài)引用文件的方法,云服務存儲商在其自己的網(wǎng)頁上提供一個 包含第一 Javascript代碼的標簽,用戶可以收藏這個標簽,并在用戶需要引用云存儲文件的網(wǎng)頁上觸發(fā)這個標簽,執(zhí)行第一 Javascript代碼,在需要引用云存儲文件的網(wǎng)頁上生成一個iframe子框架,iframe子框架中顯示云服務存儲文件列表網(wǎng)頁,用戶可以操作云服務存儲文件列表網(wǎng)頁,引用其中的云存儲文件,并將引用的云存儲文件的鏈接直接輸入到光標所在的輸入框中。本發(fā)明的方法避免了用戶手動編碼,在任意網(wǎng)頁中都能夠很方便的實現(xiàn)云存儲文件的引用,適用范圍廣,應用便捷。
圖I為本發(fā)明在網(wǎng)頁中動態(tài)引用文件的方法的流程圖;圖2為本發(fā)明文件引用代碼交互流程圖。
具體實施例方式下面結合附圖和實施例對本發(fā)明技術方案做進一步詳細說明,以下實施例不構成對本發(fā)明的限定。本發(fā)明在網(wǎng)頁中動態(tài)引用文件的方法,通過讓用戶在收藏夾或書簽欄中收藏一段帶有Javascript腳本的項目,在需要時點擊該項目以觸發(fā)腳本的運行來引用文件。需要說明的是,超文本標記語言HTML (Hyper TextMarkup Language)是一種結構化的語言,采用標簽來描述網(wǎng)頁內容,本發(fā)明說明書中出現(xiàn)的各種網(wǎng)頁標簽標簽),如〈iframe〉標簽,<a>標簽,〈script〉標簽等都是現(xiàn)有技術中常用的網(wǎng)頁標簽,這里不再一一贅述。本實施例以在網(wǎng)頁中引用云存儲中文件的方法為例來對本發(fā)明的方法進行詳細說明,如圖I所示,包括步驟步驟101、在瀏覽器的收藏夾或者書簽欄中收藏一個包含第一 Javascript代碼的項目。
具體地,本實施例中云存儲服務商可以在自己網(wǎng)頁上提供一個包含第一Javascript代碼(下面簡稱JS_A)的<a>標簽,這個標簽可以顯示一個名稱,例如“云存儲文件管理器”,目前包括IE、ChiOme、Safari、Opera在內的主流瀏覽器都支持在收藏夾或者書簽中收藏這種腳本項目。這個<a>標簽的一個樣例如下
<a hrcf-javascript:\Oid((function Q{ [ry var uuid = ”;var
siteDomain=(location.protocol==-https:f Tittps:':Thttp:)+V/www.serverdomain.com'; for (var i = 0; i< 32; i++) { uuid 十= Math. floor(Math,randomO * 16).toString(l 6); }yarsrc^sitcDotriairi+'/Coninioii/js/GKC.js'.^^'+uuid^ar
el=document.createElement(!script');eLsrc=src;eLtype-text/javascript,;document.body.appendChild(el);el.onload = eLonreadystatechange=function(){if(!/*@cc_on!@*/0 || this.readyState == Ioadedf ||this.readyState == 'complete){ var ie6 = /*@cc_on!@*/0&&!window,XMLHttpRequest; varscrollTop = documentdocumentElement.s€rollTop||docuraent.body.scrollTop; var gkc_panel = newGKC( (bordcr\Vidth:3,bordcrColor;'#3B74BA',backgroundColor:'#fff,
positioivicfVrabsolute^fixed^ top: 10, right: IO5 zlndex:9999999}); } } }catch($e){}})());M
elass=”ydlow_btos3 cloud_manager_bton><span>云存:儲文件管: 器</spanXs></sX/a>用戶將上述標簽收藏到瀏覽器的收藏夾或者書簽欄中,這個<a>標簽會在收藏夾或者書簽欄中上顯示一個“云存儲文件管理器”文字鏈接,點擊這個鏈接就可以觸發(fā)運行<a>標簽中包含的JS_A。步驟102、在需要引用文件的網(wǎng)頁上觸發(fā)上述收藏夾內的項目,在該網(wǎng)頁上生成一個iframe子框架并加載第二 Javascript代碼。用戶在操作網(wǎng)頁時,例如建設自己的網(wǎng)站,需要引用云存儲中的文件,則點擊收藏夾或書簽欄中收藏的“云存儲文件管理器”項目,JS_A受到觸發(fā)開始運行。幾_八的功能是在任意當前網(wǎng)頁中跨域加載第二 Javascript代碼(JS_B),并在當前網(wǎng)頁的指定位置,如右上角,創(chuàng)建一個可視區(qū)域用于用戶登錄或顯示云存儲文件列表。需要說明的是,第一 Javascript代碼是服務商根據(jù)需要定制的,可以在當前網(wǎng)頁插入一段字符串或者查找并刪除當前網(wǎng)頁上的某一段特定字符串,上述字符串包括當前網(wǎng)頁的html標簽或者任何出現(xiàn)在當前網(wǎng)頁html代碼中的字符串。該第一 Javascript代碼可根據(jù)實際情況做不同的配置,一種方式是直接將所有代碼都寫入,即直接將在當前網(wǎng)頁中加入一個〈iframe〉標簽的代碼和JS-B代碼都寫入,完成所有的功能;另一種方式是執(zhí)行后,在任意當前網(wǎng)頁動態(tài)創(chuàng)建一個〈script〉標簽,該〈script〉標簽用于從指定網(wǎng)址跨域加載一段新的Javascrip,這段新的Javascrip中包含第二 Javascrip代碼(JS_B),新的Javascrip 一旦加載完畢即自動運行,運行結果是在當前網(wǎng)頁中加入一個〈iframe〉標簽,并運行JS-B。該〈iframe〉標簽會在當前頁面中創(chuàng)建一個包含iframe子框架的div塊,該iframe子框架的指向云存儲服務商網(wǎng)站中的一個具體頁面,如果當前用戶處于登錄狀態(tài)則直接進入登錄狀態(tài)顯示文件列表,否則,顯示登錄界面。第二 Javascript (下面簡稱JS_B)還用以確定當前光標在網(wǎng)頁中的位置以尋找到活動的輸入框以及接收子框架中的Javascript (下面簡稱JS_C)提交的字符串。步驟103、在生成的iframe子框架中載入包含第三Javascript代碼的指定頁面。具體地,上述〈iframe〉標簽插入該網(wǎng)頁之后會在該網(wǎng)頁以指定位置和指定大小疊加顯示一個子框架,所生成的子框架可以指定位置,指定大小,并指定顯示的某個特定URL所指向的網(wǎng)頁,該子框架可以在網(wǎng)頁上疊加顯示,或者插入到網(wǎng)頁中進行顯示。這個子窗口包含某個特定URL所指向的網(wǎng)頁,在本實施例中子框架中載入云存儲文件管理器的網(wǎng)頁。生成的iframe子框架中具有第三Javascript代碼(JS_C),第三Javascript代碼本來就在云存儲文件管理器的網(wǎng)頁中。
步驟104、在子框架中操作觸發(fā)子框架中第三Javascript代碼與第二 Javascript代碼通信,實現(xiàn)文件的引用。具體地,用戶在子框架的云存儲文件管理器中可以登錄自己的云存儲帳戶、查看云存儲中的文件列表甚至可以上傳文件到自己的云存儲帳戶中去。用戶還可以在子框架的云存儲文件管理器中選取一個文件,進行引用操作,例如點擊“插入”按鈕以觸發(fā)子框架中的Javascript (JS_C)的運行。JS_C從服務后臺獲取到該文件的鏈接并且提交給JS_B,JS_B在需要引用文件的網(wǎng)頁上搜索到光標所在的輸入框并且修改此輸入框對應的網(wǎng)頁單行文本輸入框〈input〉或者〈textarea〉標簽的內容,這樣這個輸入框中就插入了該文件鏈接。如圖2所示,包括步驟步驟201、在子框架中進行操作觸發(fā)子框架內網(wǎng)頁的第三Javascript代碼的運行;步驟202、第三Javascript代碼根據(jù)具體操作指令產(chǎn)生對應的一串字符串并且與第二 Javascript代碼交互,向第二 Javascript代碼提交該字符串;步驟203、第二 Javascript代碼搜索當前光標所處的輸入框,將第三Javascript代碼提交的字符串插入到標簽中。即第二 Javascript代碼搜索當前光標所處的輸入框,修改該輸入框的網(wǎng)頁單行文本輸入框〈input〉或者網(wǎng)頁多行文本輸入框〈textarea〉標簽內容,將第三Javascript代碼提交的字符串插入到標簽中;瀏覽器根據(jù)修改后的〈input〉或者〈textarea〉標簽內容,在輸入框中顯示出插入的字符。在本實施例中,第三Javascript代碼根據(jù)用戶操作產(chǎn)生一串字符串是根據(jù)用戶選取的文件從服務后端取回一串代表這個文件的鏈接,提交該文件鏈接插入光標處并在輸入框中顯示出插入的文件鏈接完成云存儲中文件的引用。通過以上步驟,可以針對任意網(wǎng)頁的html代碼進行插入字符串或者刪除字符串。進一步的,可以在任意網(wǎng)頁的html代碼中插入或者刪除html標簽,從而達到插入iframe子框架以顯示特定網(wǎng)頁比如云存儲文件列表,再通過在任意網(wǎng)頁中插入Javascript代碼實現(xiàn)任意網(wǎng)頁與子框架的通信,嵌入的iframe與被嵌入的頁面之間的通信是通過封裝的一個js方法來實現(xiàn)的,該方法會根據(jù)瀏覽器的類型調用不同的底層實現(xiàn)方法對于Chrome, IE8+, FireFox, Opera, Safari等瀏覽器是通過HTML5標準中的跨文檔消息傳輸API實現(xiàn)iFrame與主頁面的跨域通信;對于IE6,IE7瀏覽器及IE8的兼容模式,通過flash作為代理實現(xiàn)iframe與主頁面的通信。具體實現(xiàn)方法當用戶點擊子框架中文件鏈接時,子框架中的JS_C會向服務端發(fā)送引用文件的請求,在請求成功后,服務端會返回該文件的引用地址,JS_C在獲得了該文件的引用地址后會調用封裝好的通信方法postMessage向被嵌入的頁面發(fā)送一個JSON格式的數(shù)據(jù),該數(shù)據(jù)包含了文件的引用地址,被嵌入的頁面通過封裝的方法接收到iframe的發(fā)送過來的數(shù)據(jù)后會將該文件的鏈接地址插入到用戶的輸入光標之后從,而實現(xiàn)文件的快速引用功能。通過上述步驟,可以在任意網(wǎng)頁上引用云存儲中的文件,而不需要事先對網(wǎng)頁代 碼進行修改,或者人工進行剪切粘貼。以上實施例僅用以說明本發(fā)明的技術方案而非對其進行限制,在不背離本發(fā)明精神及其實質的情況下,熟悉本領域的技術人員當可根據(jù)本發(fā)明作出各種相應的改變和變形,但這些相應的改變和變形都應屬于本發(fā)明所附的權利要求的保護范圍。
權利要求
1.一種在網(wǎng)頁中動態(tài)引用文件的方法,其特征在于,包括步驟 1)、在瀏覽器中收藏一個包含第一Javascript代碼的項目; 2)、在需要引用文件的網(wǎng)頁上觸發(fā)所述項目,執(zhí)行第一Javascript代碼,在該網(wǎng)頁上生成一個iframe子框架并加載第二 Javascript代碼; 3)、在生成的iframe子框架中載入包含第三Javascript代碼的指定頁面; 4)、在所述iframe子框架中觸發(fā)第三Javascript代碼與第二Javascript代碼通信,實現(xiàn)文件的引用。
2.根據(jù)權利要求I所述的在網(wǎng)頁中動態(tài)引用文件的方法,其特征在于,所述在瀏覽器中收藏一個包含第一 Javascript代碼的項目是指在瀏覽器收藏夾內或書簽中收藏包含第一Javascript代碼的項目。
3.根據(jù)權利要求I所述的在網(wǎng)頁中動態(tài)引用文件的方法,其特征在于,所述執(zhí)行第一Javascript代碼,在該網(wǎng)頁上生成一個iframe子框架,是指在該網(wǎng)頁上疊加顯示一個指定尺寸、指定位置和指定網(wǎng)頁內容的iframe子框架。
4.根據(jù)權利要求I所述的在網(wǎng)頁中動態(tài)引用文件的方法,其特征在于,所述執(zhí)行第一Javascript代碼,在該網(wǎng)頁上生成一個iframe子框架,是指在該網(wǎng)頁上插入一個指定尺寸、指定位置和指定網(wǎng)頁內容的iframe子框架。
5.根據(jù)權利要求I所述的在網(wǎng)頁中動態(tài)引用文件的方法,其特征在于,所述步驟4)包括步驟 4.I)、在子框架中進行操作觸發(fā)子框架內網(wǎng)頁的第三Javascript代碼的運行; 4.2)、第三Javascript代碼根據(jù)具體操作指令產(chǎn)生對應的一串字符串并且與第二Javascript代碼交互,向第二 Javascript代碼提交該字符串; 4.3)、第二 Javascript代碼搜索當前光標所處的輸入框,將第三Javascript代碼提交的字符串插入到輸入框中。
6.根據(jù)權利要求5所述的在網(wǎng)頁中動態(tài)引用文件的方法,其特征在于,步驟4.3)進一步包括步驟 第二 Javascript代碼搜索當前光標所處的輸入框,修改該輸入框的〈input〉或者〈textarea〉標簽內容,將第三Javascript代碼提交的字符串插入到輸入框中; 瀏覽器根據(jù)修改后的〈input〉或者〈textarea〉標簽內容,在輸入框中顯示出插入的字符串。
7.根據(jù)權利要求5所述的在網(wǎng)頁中動態(tài)引用文件的方法,其特征在于,所述子框架內網(wǎng)頁為云存儲文件列表網(wǎng)頁。
8.根據(jù)權利要求7所述的在網(wǎng)頁中動態(tài)引用文件的方法,其特征在于,所述具體操作指令為文件引用指令,根據(jù)具體操作指令產(chǎn)生對應的一串字符串為引用文件的鏈接。
全文摘要
本發(fā)明公開了一種在網(wǎng)頁中動態(tài)引用文件的方法,在瀏覽器中收藏一個包含第一Javascript代碼的項目,并在用戶需要引用云存儲文件的網(wǎng)頁上觸發(fā)這個項目,執(zhí)行第一Javascript代碼,在需要引用云存儲文件的網(wǎng)頁上生成一個iframe子框架并加載第二Javascript代碼,在生成的iframe子框架中載入包含第三Javascript代碼的指定頁面,在所述iframe子框架中觸發(fā)第三Javascript代碼與第二Javascript代碼通信,實現(xiàn)文件的引用。本發(fā)明的方法避免了用戶手動編碼,在任意網(wǎng)頁中都能夠很方便的實現(xiàn)云存儲文件的引用,適用范圍廣,應用便捷。
文檔編號G06F17/30GK102915371SQ20121043533
公開日2013年2月6日 申請日期2012年11月2日 優(yōu)先權日2012年11月2日
發(fā)明者蔣爍淼, 呂亮亮, 方達宏 申請人:上海夠快網(wǎng)絡科技有限公司