公司新建一網站,用的是商派的易開店系統。設計方案中有一個是下載文件的功能,但易開店不支持上傳資源,因此沒法下載本站資源。
javascript
因而想到了網盤資源下載,有些網站是把頁面連接到網盤資源文件下載頁面,進行二次跳轉下載。可是這種效果客戶體驗不佳,沒用過網盤的客戶下載起來就會變的有點麻煩。若是能提取出網盤資源文件的下載網址,直接在下載頁面進行操做就行了,效果跟本站下載同樣!php
一.下載本地資源的方法:html
<a href="/src/download.rar">下載文件</a>java
二.下載其餘網站資源的方法:瀏覽器
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 4 <title>javascript實現html頁面直接下載網盤文件</title> 5 </head> 6 <body> 7 <iframe src="" style="display:none;"></iframe> 8 <script type="text/javascript"> 9 function download() { 10 window.frames[0].location.href = 'http://183.57.152.11/wsdl1.yunpan.cn/share.php?method=Share.download&fhash=3f33cc121ee1131da08147498c9fc3480b82d3ba&xqid=73979778&fname=Adobe+Dreamweaver+CS4+v10.0%E5%AE%98%E6%96%B9%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87%E7%BB%BF%E8%89%B2%E7%89%88%28AdobeDreamweaverCS4_cn%29.EXE&fsize=80291051&nid=13756769312531776&cqid=c3ec7aec4514780be6a6b2a494a5c9e0&st=a7eb74a09e148290594604407ac83463&e=1390557224&dt=1.79b35763204d15e53131b6747933da38'; 11 } 12 </script> 13 <input type="button" onclick="download()" value="下載文件"/> 14 </body> 15 </html>
案例解析:網絡
1.如何提取網絡文件的下載網址:框架
以使用谷歌瀏覽器下載360網盤資源爲例:網站
》下載文件ui
》在瀏覽器的下載頁面或窗口中,找到當前下載的文件,如圖,在鏈接地址處單擊右鍵,單擊"複製連接地址",就獲取到了該文件的下載網址了。spa
2. 實現當前頁面下載網盤資源的功能:
》添加<iframe src="" style="display:none;"></iframe>;
》添加按鈕標籤,並給其添加單擊事件downLoad();
》編寫單擊事件,使用 window.frames[0].location.href ="下載網址"
說明:不添加<iframe>標籤,大部分瀏覽器也能夠實現頁面無跳轉下載,惟有360瀏覽器中點擊下載文件後,頁面跳轉。
鑑於此,添加iframe框架,點擊按鈕的時候,修改iframe框架的src屬性,即便頁面會發生跳轉,也是在iframe框架內。
給iframe天劍diaplay:none,隱藏掉,這樣就能完美的實現一鍵下載站外資源了。
後記:此方法僅適用於實現一鍵下載站外資源,目前谷歌、IE、火狐、360瀏覽器,獵豹瀏覽器等都可以完美下載。