Archive


Category: 來玩JavaScript

  • [JavaScript] 讀取文字檔並分割每一行

    <html>     <head>         <title></title>         <script>             function readTextFile(file)             {                     var rawFile = new XMLHttpRequest();                     rawFile.open(“GET”, file, false);                     rawFile.onreadystatechange = function ()                     { […]

  • [JavaScript] phantomjs使用說明

    本文轉自 http://johnson560.pixnet.net/blog/post/322221204 phantomjs使用說明 phantomjs實現了一個無介面的webkit流覽器。雖然沒有介面,但dom渲染、js運行、網路訪問、canvas/svg繪製等功能都很完備,在頁面抓取、頁面輸出、自動化測試等方面有廣泛的應用。 安裝 下載phantomjs(官方下載)。解壓到任意目錄,並將包含phantomjs.exe的目錄添加到系統路徑。 如果要借助phantomjs進行無頭測試,請參考各個測試框架的說明,或者參考phantomjs的官方文檔:http://phantomjs.org/headless-testing.html。 使用說明 簡單示例 JavaScript // test.js var page = require(‘webpage’).create(), system = require(‘system’), address; if (system.args.length === 1) { phantom.exit(1); } else { address = system.args[1]; page.open(address, function (status) { console.log(page.content); phantom.exit(); }); } 1 2 3 4 5 6 7 8 9 10 11 12 13 // test.js var […]

  • [JavaScript] 如何下載Javascript執行後的網頁內容

    現在的網頁裡,不可避免的會放入大量的javascript,而這些javascript會在使用者連入網頁時,由使用者所用的瀏覽器自行執行後再顯示. 有注意到嗎??這些javascript在網站上是javascript,到了使用者的電腦才由電腦裡的瀏覽器變成內容的. 所以你今天如果想要把網頁內容從網站上直接下載下來,你就會發現下載的網頁殘缺不全 那要怎麼解決這個問題呢?? 節錄了這個網址的解決方案 http://johnson560.pixnet.net/blog/post/322219893 如何下載javascript的完整網頁內容 這裡有一個簡單的小工具phantomjs script可以完成 phantomjs script可以觸發網頁的javascript並且允許你下載成html檔案 Here is a simple little phantomjs script that triggers javascript on a webpage and allows you to pull it down locally:  file: get.js  var page = require(‘webpage’).create(),   system = require(‘system’), address; address = system.args[1]; page.scrollPosition= { top: 4000, left: 0}   page.open(address, function(status) { […]

  • [JavaScript] 抓取URL的get變數值

    <script type=”text/javascript”> function getQueryVariable(variable) {        var query = window.location.search.substring(1);        var vars = query.split(“&”);        for (var i=0;i<vars.length;i++) {                var pair = vars[i].split(“=”);                if(pair[0] == variable){return pair[1];}         }     […]

  • [JavaScript] 使用Enter來驅動事件(按Enter就能執行)

    $(“#autoCompInput”).bind(“keypress”, {}, keypressInBox); function keypressInBox(e) { var code = (e.keyCode ? e.keyCode : e.which); if (code == 13) { //Enter keycode e.preventDefault(); $(“#yourFormId”).submit();   }}; 整段的意思就是有個元素可能是input=”text”,我想要在欄位中輸入後直接按Enter就能執行送出表格. #autoCompInput 是你欄位的 id=autoCompInput #yourFormId 則是你表單的 id=yourFormId  

  • [JavaScript] JavaScript中常用的頁面跳轉方法

    本文轉自http://fecbob.pixnet.net/blog/post/38077415-js%E4%B8%AD%E9%A0%81%E9%9D%A2%E8%B7%B3%E8%BD%89%E3%80%81%E5%88%B7%E6%96%B0%E3%80%81%E9%87%8D%E5%AE%9A%E5%90%91%E7%9A%84%E5%B9%BE%E7%A8%AE%E6%96%B9%E5%BC%8F 首先頁面跳轉、刷新、重定向要看實施這個動作的物件,一般有三個物件:本頁面的刷新跳轉、父頁面的刷新跳轉、最外層頁面的刷新跳轉 一般window.location.href是操作本頁面的位址,parent.location.href是操作父頁面的位址,top.location.href是操作最外層頁面的位址。 無論是本頁面刷新跳轉、父頁面刷新跳轉還是最外層頁面刷新跳轉都有這麼幾種方式: 1 history.go(0) 2 location.reload() 3 location=location 4 location.assign(location) 5 document.execCommand(‘Refresh’) 6 window.navigate(location)針對IE,firefox不支援 7 location.replace(location) history.go(0):刷新本頁 history.go(-1):回到上一頁 history.go(-2):回到上一頁的上一頁   reload()跟history.go(0)相同   window.location與assign相同 在實際應用的時候,重新刷新頁面的時候,我們通常使用: location.reload() 或者是 history.go(0) 來做。因為這種做法就像是用戶端點F5刷新頁面,所以頁面的method=”post”的時候,會出現「網頁過期」的提示。那是因為Session的安全保護機制。可以想到: .net中當調用 location.reload() 方法的時候, aspx頁面此時在服務端記憶體裡已經存在, 因此必定是isPostback 的。而這時我們希望頁面重新載入一遍而不是重新提交的時候,我們可以用location.replace() 就可以完成此任務。被replace的頁面每次都在服務端重新生成。你可以這麼寫: window.location.replace(location.href) replace用法跟 location.href 一?,但用 replace 導到下頁後,就不能再回到上一頁.document.location.href和document.location.replace都可以實現從A頁面切換到B頁面,但他們的區別是:用document.location.href切換後,可以退回到原頁面。而用document.location.replace切換後,不可以通過「後退」退回到原頁面。 JS代碼: history.go(0); //history的另外兩個方法 history.back();//後退到前一頁 history.forward();//前進到當前頁之後打開的頁 window.location.reload(); window.location = window.location.href; window.location.assign(window.location.href);//刷新當前頁 window.location.assign(“HTTP://www.jsbiji.com”);//跳轉到HTTP://www.jsbiji.com window.location.replace(window.location.href);//刷新當前頁 […]

  • [JavaScript] 用JavaScript取得亂數

    轉自http://shelleyura.pixnet.net/blog/post/21335244 這時就要用它提供的函數Math 以下範例, 亂數的值設定介在 0 ~ 10view plaincopy to clipboardprint?<script type=”text/javascript”> var maxNum = 10; var minNum = 0; var n = Math.floor(Math.random() * (maxNum – minNum + 1)) + minNum; </script> Math.random() 負責取得亂數, 它的值是小數, 介在0 ~ 1之間 所以要加些計算, 得到0 ~ 10之間的數字 Math.floor() 負責把小數點去掉, 留下整數的部分 那, 我要看他產生出來的亂數, 是否正確, 要怎麼看? 就用個迴圈, 印出亂數的數字吧!view plaincopy to clipboardprint?<script type=”text/javascript”> […]

  • [JavaScript] 檢查文章中包含幾個返回鍵

    <HTML><HEAD><title>檢查文章共有幾個返回</title><script language=javascript> function getCount(){ var count=document.all(‘doc1’).innerHTML.split(‘\n’).length-1; //使用「\n」進行計數 alert(“總共有”+ count +”個返回”);} </script> </HEAD><BODY> <textarea id=”doc1″ cols=”30″ rows=”8″></textarea> <input id=”Button1″ type=”button” value=”檢查” onclick=”getCount()” /></BODY></HTML>

  • [JavaScript] 文字欄二選一輸入

    <html><head><title>文字輸入欄二選一</title><SCRIPT LANGUAGE=”JavaScript”>function checkFields() { college = document.submitform.college.value; //取得技職學校的值 university = document.submitform.university.value; //取得大學的值 if ((college == “”) && (university == “”) ) { //如果都沒有輸入的話 alert(“都沒有輸入就是要就業囉!”); return false; } else return true;}</script></head><body><form name=submitform onSubmit=”return checkFields()”> 技職學校和大學請擇一填寫<br> <br><table border=0><tr><td align=center>技職學校</td><td> </td><td align=center>大學</td></tr><tr><td align=center><input type=text name=college value=”” onFocus=”document.submitform.university.value=”;”></td><td align=center>或</td><td align=center><input type=text name=university value=”” onFocus=”document.submitform.college.value=”;”></td></tr><tr><td colspan=3 align=center><input type=submit value=”送出”></td></tr></table></form></body></html>