程式片斷 - Javascript

不裝外掛,不需關閉javascript,在ie裡就是要貼上資料

孤影 — Wed, 05 Sep 2007 23:41:00 GMT

今天接到一個問題,
有個表單有限制貼上的功能,

<body onpaste="return false;">

因為有很多筆資料要新增,
如果不能貼上的話,那就要自己重key...真的是非常的不UserFriendly...

通常,遇到這樣的情形,
我會直接改用firefox就好了,
不過因為現在只能用ie去編輯(因為對方不想裝FireFox),
那當然,直接關掉ie的javascript也是可以.
但是一關掉javascript的話,連其他的功能也不能用了,
所以只好另想辦法,
當然最有用的方式就是複製那個網頁,拿掉不想要的限制,
然後丟到自己的電腦或是自己的主機上做(當然action要記得改成對方的主機),
但是,這樣還是有點麻煩...

後來找到一個方法,
只要在ie的網址列輸入下列語法就可以了.

javascript:alert(document.body.onpaste=function(){return%20true;});

如果你要測試的話,
可以透過下面網址測試
http://ajunlee.googlepages.com/PasteTest.htm
當然這個測試只能在ie上測試(因為標題已經說了"在ie"...).

先開啟上面的網頁,隨便複製一段字串,
試試看能不能貼到文字方塊中,
然後在複製上面的javascript語法,
貼在剛剛哪個ie的網址列後按下enter,
這時會跳出一個訊息視窗,按下確定關閉訊息視窗,
然後在試試看能否貼上資料!!

當然,可能還有其他的方法,
不過這樣的方式會讓不會程式的人覺得很厲害(或許把妹可以用的到,如果收到好人卡不要怪我)...

document.body.scrollTop都是0

孤影 — Thu, 07 Jun 2007 15:55:00 GMT

整個五月都沒有在維護blog,
雖然有不少東西可以寫,但就是因為懶...
所以這次一定要趁還想寫的時候趕快寫下來...

今天,再作一個網頁特效的時候,
遇到了一個狀況,
因為要作的功能是,捲動瀏覽器的捲軸後,
廣告圖片會跟著滑動.
而這功能,在網路上已經有很多範例了,
所以特別挑了一個簡短而且在IE跟Firefox上都可以用的來,
稍微修改一下,寫個範例測試,沒有問題就想說可以開始套了,
結果沒想到將那個片段套在程式裡以後,卻不會動...
所以只好重頭debug了.
debug到後來才發現,
原本的測試網頁中使用的document.body.scrollTop是正常的,
但是套用到aspx的頁面時,
不管怎麼捲動,document.body.scrollTop都是0.

google一下後發現,原來是因為網頁的DOCTYPE的問題,
在測試的網頁中,是用下面這片段

但是在網站中,是用

(ps.這是在.Net studio中預設新增網頁時會加上去的.)

所以原本的document.body.scrollTop要改成document.documentElement.scrollTop就可以了.

update - 20070614:

感謝無名氏的提醒,
這才發現原以為ie跟firefox都正常的範例是有點問題的...
而問題點在於,
未使用DTD前,在ie跟firefox都可以使用下列的語法來設定位置

document.getElementById("adimg").style.top = 200;

但是在使用DTD之後,
ie還是可以接受上面的語法,
但是在firefox卻是不行的,
而firefox所能接受的如下(需要加上單位)
document.getElementById("adimg").style.top = "200px"

而這個在ie上是接受的,
所以只要改成如上的語法就可以在ie跟firefox都正常了.

範例網頁:

原始 : http://ajunlee.googlepages.com/rolling.htm
使用DTD : http://ajunlee.googlepages.com/rolling_err.htm
使用DTD修正後 : http://ajunlee.googlepages.com/rolling_ok.htm

JS-Kits 第一個小工具.在網頁加上google翻譯的連結

孤影 — Sat, 17 Mar 2007 02:40:00 GMT

第一個小工具.在網頁加上google翻譯的連結

說明 :
google提供了一個翻譯的服務,你可以透過它翻譯整個網頁頁面,
只要把網址丟給他,設定要轉換的語言就可以了,
只是,目前對於中文.只有提供繁簡互轉,以及中文轉英文而已.

程式網址.
http://jskits.googlecode.com/files/babelfishTW.js

用法:
在你要放置連結圖式的位置加上以下片段即可.
<SCRIPT LANGUAGE="JavaScript" src="http://jskits.googlecode.com/files/babelfishTW.js"></SCRIPT>

效果畫面 :

ps.這程式很簡單,主要只是要試試看google code的project hosting怎麼玩.

玩玩Ajax系列 - Dom在asp與asp.net

孤影 — Tue, 13 Mar 2007 18:46:00 GMT

前言

這陣子微軟似乎正在大力的推ajax,
而blog中如果有個ajax的資料,似乎也能增加些瀏覽數..

不過這次是因為某個專案的功能,才會有這篇的...

話說,因為支援別人寫的一個用了大量ajax的案子,
但是這個案子原本是用asp,而我則是要用asp.net 1.1開發新功能,

而原本的程式中,
是使用Microsoft.XMLDOM將要傳送的資料打包後post到後端,
程式碼如下(前端javascript的片段)

xmlData = "<xml>..................</xml>"
var xmlDom=new ActivexObject("Microsoft.XMLDOM")
xmlDom.load("domtest.xml")

而後端是用asp.一樣用Microsoft.XMLDOM來接收
而接收的程式如下

Dim mydoc
Set mydoc=Server.CreateObject("Microsoft.XMLDOM")
mydoc.async=false
mydoc.load(Request)

不過,現在問題來了,
1.前端用new ActiveObject("Microsoft.XMLDOM")在firefox下是不會動的.
2.而且也不適合再用Server.CreateObject來建立Microsoft.XMLDOM,
3.因為我是用.net 1.1,所以不能像asp這樣直接load(Request)

在ie中使用xmlhttp是用new ActiveXObject("Microsoft.XMLHTTP");
而在firefox中則是用new XMLHttpRequest();
這個之前有說過.(使用xmlhttp讀取遠端檔案)
那Microsoft.XMLDOM呢??
其實,在firefox是不需要建立這個的.
只要直接使用下面的語法就可以了....

xml = "<xml>..................</xml>";

xmlHttp.open("POST", url);
xmlHttp.setRequestHeader("Content-Type", "text/xml");
xmlHttp.send(xml);

.net 1.1中的Microsoft.XMLDOM呢?
如果注意一下前端送過來的資料就可以知道,XMLDOM實際上就是xml的內容,
所以在.net中是使用XMLDocument去接收,
所以程式碼如下

XmlDocument _xmldoc = new XmlDocument();
_xmldoc.LoadXml(xmlData);

而xmlData就是接收到的xml結構內容,但是.net要怎麼接收呢??

在.net的Request物件跟asp的不同,不能直接用_xmldoc.Load(Request)
而.net中,Requet有個InputStream的屬性,
而這就是我們需要的,只是他是Stream,所以我們在接收的時候需要用StreamReader去接收,
所以接收的程式如下

StreamReader reader = new StreamReader(Request.InputStream);
string xmlData = reader.ReadToEnd();

以上,問題到此就解決了.

最後附上一個測試用的範例,
使用ajax的方式新增Rss item,
在ie跟firefox上都能work.

範例網址 : http://vip.blueshop.com.tw/ajun/item.htm

其中,前端的部分,程式都在頁面中了,
而後端接收的程式(ItemSave.aspx)的原始碼在這 http://vip.blueshop.com.tw/ajun/sample/ItemSave.aspx.cs.txt

有興趣的就玩玩吧!!

iframe中href="javascript:alert('MOG')"有問題 - 原來是因為base target

孤影 — Fri, 09 Feb 2007 19:54:00 GMT

因為asp.net不容許一個頁面有多個form,
所以需要將原本搜尋的功能改用javascript串字串換location的方式來寫.

原本,單一頁上都沒有問題,
但是後來因為需要讓其他網站使用,所以其他網站就使用iframe來包那一頁,
但是,一包進iframe卻發生function沒有被定義的問題...

追了半天才發現,原來是因為<base target="_parent">的問題...

因為搜尋的那頁除了搜尋的功能外,還有其他的link,為了讓他可以點選link後是替換掉整頁,
所以就用最簡單的方法,在header加個<base target="_parent">
而因為搜尋的按鈕是個圖片,所以就用連結的方式包起來呼叫function,
像是:<a href="javascript:search();">圖片</a>.

所以只要將原本的
<a href="javascript:search();">圖片</a>
改成
<a href="javascript:search();" target="_self">圖片</a>
就可以了.

玩玩下面的範例,
你會發現,在iframe中,要呼叫上一層或是其他frame的javascript,
只要用href的方式,加個target就可以了!!

範例 : http://ajunlee.googlepages.com/iframe_js.htm

IE vs. FireFox系列 - createElement option的問題

孤影 — Fri, 26 Jan 2007 15:40:00 GMT

因為想要寫個javascript的function可以自動產生設定好時間區間的下拉選單,
所以寫了下面看是正統的function

var newOpt = document.createElement('option');
newOpt.text = text;
newOpt.value = value;

先用firefox測試,沒有問題,
但是換到IE(6跟7)後,卻發現下拉選單是變長了,
但是卻沒有出現項目的文字內容,
所以,在ie下,用newOpt.text跟newOpt.value應該是沒有作用的,
所以要改成如下

var newOpt = document.createElement("option");
var oText = document.createTextNode(text);
newOpt.appendChild(oText);
newOpt.setAttribute("value",value);

變成需要使用createTextNode來建立option標籤內的文字內容,
然後再用setAttribute來設定option中的value屬性值.

IE vs. FireFox 系列 - getElementsByName問題

孤影 — Fri, 15 Dec 2006 19:55:00 GMT

玩玩YUI - 檢查帳號是否已經被使用

孤影 — Sat, 30 Sep 2006 17:10:00 GMT

前言

YUI是Yahoo! Developer Network所推出的一個UI Library,
裡面提供了不少Javascript的函式庫,讓你可以更方便的建立一個更豐富的web介面.

在寫會員註冊的功能時,
很多人應該都會需要一個檢查會員帳號是否已經有人使用的功能,
在現在AJAX一直被提起的情況下,
很多人應該也都想要用AJAX的概念去達到檢查帳號重覆的功能,
而下面就是介紹怎麼使用YUI來寫個這樣的功能.

開始前

在開始寫這功能前,需要先下載YUI,
在筆者寫這篇文章時,YUI的最新版本是0.11.4,
檔案可以在這邊找到.

下在的檔案中包含了說明文件,範例及程式,
而這次所要用的只有connection manager的功能,
所以只要兩個檔案,一個是yahoo.js,一個是connection.js
yahoo.js可以在build/yahoo中找到,
而connection.js則是在build/connection中,
在build/yahoo中都個"yahoo-min.js"的檔案,
這個檔案的內容跟yahoo.js一樣,只是他將一些排版用的空格或是換行移掉以減少檔案的大小,
所以如果你的網站對傳輸的資料量很在意的話,那就可以使用yahoo-min.js.
而connection.js跟其他的js檔也都是如此.

所以準備好這兩個檔案後,在來就開始要寫程式了!

開始寫嘍!!

要使用AJAX的東西,程式的重點都是在前台的javascript,
而後台為了測試,所以我們只寫個簡單的判斷回傳0跟1,
程式碼如下 :

<%
If request("uid") = "adam" Then
response.write("1")
Else
response.write("0")
End If
%>

當所接收到的帳號為adam時,回傳1,否則回傳0,
而實際應用時,當然就是去撈資料庫,判斷有無資料後再回傳1或0

在來,進入重點,
在註冊的頁面將兩個js檔加進去,
程式如下 :

然後在帳號欄位旁多個按鈕,按下後去檢查帳號,
然後在下面在加個div去顯示是否已經有此帳號,
而程式碼如下

當檢查帳號的按鈕被按下後,呼叫chkid的js,
而chkid的程式碼如下 :

function chkid(objname){
var obj = document.getElementById(objname);
//設定查詢用的後端程式路徑,並將帳號資料帶入
var sUrl = "yahoo_chkuid.asp?uid=" + obj.value;

//宣告設定連線完成後要執行的function
var handleSuccess = function(o){
if(o.responseText !== undefined){
var div = document.getElementById("msg");
//當連線無誤後,我們可以取得所回傳回來的內容,
//內容可以使用o.responseText取得,至於其他的屬性狀態可以參考YUI的說明文件,
//因為我們後端的程式只會傳回1或0,所以我們只需要判斷responseText 是不是為1或0即可.
//然後在將訊息顯示在msg這個div中,
//用innerHTML除了是可以顯示html外,因為firefox並沒有innerText這屬性,
//所以為了讓IE跟Firefox都可以正常無誤,所以需要使用innerHTML
if (o.responseText == "1")
{
div.innerHTML = "<font color='red'>此帳號已經有人使用</font>";
}else{
div.innerHTML = "此帳號可以使用";
}
}
}

//宣告設定連線失敗時要執行的function
var handleFailure = function(o){
alert("Error : " + o.statusText + "\nPlease try again.");
}

//宣告callback,定義成功及失敗所要呼叫的函數
//handleSuccess跟handleFailure是上面宣告的名稱而定
var callback =
{
success:handleSuccess,
failure: handleFailure
};

//執行連線動作
var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback, null);
}

如此,檢查帳號重覆的功能就完成了.
下面是這個程式的範例及程式碼下載!

範例 : http://vip.blueshop.com.tw/ajun/yahoo_chkuid.htm
程式碼(未包含YUI的js檔) : http://vip.blueshop.com.tw/ajun/file/yahoo_chkuid.rar

Lightbox 2.0

孤影 — Wed, 20 Sep 2006 09:50:00 GMT

摘要 :
Lightbox是一個網頁的圖片展示效果,
中文有人翻為燈箱效果,
此篇是Lightbox開發網站上安裝教學的翻譯文.

先看效果 : LightBox 2.0 with picasaweb

LightBox 2.0
ps.相關檔案請從Lightbox 2.0專案網站上下載

如何使用:
第一步 - 設定

Lightbox v2.0 使用了 Prototype Framework 和 Scriptaculous Effects Library. 你需要先將這三個Javascript檔案設定在你網頁的header裡.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
然後再將Lightbox的CSS檔也include進來 (或是將Lightbox的styles加入你現有的CSS檔中).
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
檢查CSS中prev.gif,next.gif的路徑是否正確,以及lightbox.js中loading.gif和close.gif的路徑是否沒問題.

第二步 - 啟動

在你要觸發lightbox效果的link上加上rel="lightbox"的屬性.例如:
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
附註: 使如果你要顯示標題的話可以使用title的屬性來設定.
如果你有一個照片集要顯示的話,你可以在rel的屬性中加上群組的名稱. 例如:
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

Textbox字數計算

孤影 — Thu, 14 Sep 2006 03:41:00 GMT

在James那邊看到一篇TextBox字數計算,
的確,使用者介面的友善也是關係著網站成敗.

只是,我不太喜歡將所有的東西都丟到後端處理,
在加上最近在玩lightbox時,
發現這些javascript的toolkit都只要將js包進來後,
在要呈現這樣效果的連結或是圖片加個rel或是class的屬性就可以用了,
所以就想說也來寫個方便使用的TextBox字數提示功能!!

現在直接說明怎麼使用.

步驟一 :

將TbxLenLimit.js加到要使用的頁面

範例 :

步驟二 :

在要呈現字數提示的textarea加上兩個屬性maxlength="字數上限"跟class="ShowLen"
ps.記得給textarea一個id

範例 :

線上demo : textarea_length.htm
範例下載 : TbxLenLimit.rar

如果有人對程式有興趣或是想要研究討論的,歡迎回應!!

Update:

新增限制字串長度的功能.
如果class為ShowLen則是提示,不會裁減字串,
如果class為ShowLenLimit則除了提示外,也會自動裁減字串到設定的長度.

update : (2006/9/21)

增加onchange的事件處理,以解決用滑鼠複製貼上時無法計算字數