噗落格的資訊空間-網路技術分享-Asp.Net.VB.C#.程式開發.微網誌.網路行銷.facebook 行銷.噗浪行銷.社群行銷

分享 ASP，ASP.NET，VB，C#，程式開發，網站設計，部落格，微網誌，網路行銷，facebook 行銷，噗浪行銷，社群行銷，電腦硬體軟體，網路賺錢等資訊內容。『噗落格』裡的文章大多是從各網站摘錄(轉貼)下來的，僅提供研究及筆記之用途，如有侵權請留言告知！一開始不打算賺錢,一個不可能中的可能

顯示具有 JavaScrip 標籤的文章。顯示所有文章

2011年8月19日星期五

javascript 去除(移除)文本中的 html Tag 元素標籤

利用 javascript 移除html標籤

function RemoveHTML( strText ) {

    var regEx = /<[^>]*>/g;

    return strText.replace(regEx, "");

}

利用 javascript 移除a標籤

function RemoveA ( strText )

{

    var regEx = /]*>[^>]*<[^>]a>/g;

    return strText.replace(regEx, "");

}

利用 javascript 移除A標籤及A標籤內容

function RemoveAH ( strText ){

    var regEx = /(]*>)|(<[^>]a>)/g;

    return strText.replace(regEx, "");

}

測試 javascript 移除 HTML


<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>標記刪除測試</title></head><body>

<script>

alert(RemoveHTML("fad<a>af</a><b>fdf</b><table><tr><td>fd<td></tr></table>"));

alert(RemoveAH("fad<a href=#>af</a><b>f</b><table><tr><td>fd<td></tr></table><a href=#>bbb</a>"));

alert(RemoveA("fad<a href=#>af</a><b>fdf</b><table><tr><td>fd<td></tr></table><a href=#>bbb</a>"));

function RemoveHTML( strText )

{

    var regEx = /<[^>]*>/g;

    return strText.replace(regEx, "");

}



function RemoveA ( strText )

{

    var regEx = /<a[^>]*>[^>]*<[^>]a>/g;

    return strText.replace(regEx, "");

}



function RemoveAH ( strText )

{

    var regEx = /(<a[^>]*>)|(<[^>]a>)/g;

    return strText.replace(regEx, "");

}



</script></body></html>

想要留下哪種標籤，自己再加

function RemoveHTMLwithoutIMG_P_BR( strText ) {

    var regEx = <(?!img|br|p).*?>/ig;

    return strText.replace(regEx, "");

}

或是

function RemoveHTMLwithoutIMG_P_BR( strText ) {

    return strText.replace(<(?!img|br|p).*?>/ig,"");

}

簡單的說，就是用『|』這個「or」符號，看你哪些想要留下的標籤，就給她加進去就好啦！

2011年8月13日星期六

JavaScript 的 replace() 不太一樣，如何去除字串空白

JavaScript 的 replace() 函數只會取代一個字元

'google'.replace('o', '0')

取代所有的字元需要用到正規表達式

'google'.replace(/[o]/g, '0');

取代字串為空白字串

'google'.replace(/[o]/g, "");

2011年8月11日星期四

如何用 Javascript 取得和設定修改 Fckeditor (CKEditor) 的值

假設 CKEditor 欄位名稱叫做 body，那麼當阿舍想用 Javascript 來取得 CKEditor 裡的 HTML 碼時，就可以用下面方式來取得，傳回值會是一個字串：

var ckeditorString = CKEDITOR.instances.body.getData();

相反的，如果要用 Javascript 來塞值到 CKEditor 裡去，那就用 setData() 的方式來做，做法如下：

CKEDITOR.instances.body.setData( '<b>Hello World !</b>' );

取得編輯器中HTML内容

function getEditorHTMLContents(EditorName) {   

    var oEditor = FCKeditorAPI.GetInstance(EditorName);   

    return(oEditor.GetXHTML(true));   

}

取得編輯器中文字内容

function getEditorTextContents(EditorName) {   

    var oEditor = FCKeditorAPI.GetInstance(EditorName);   

    return(oEditor.EditorDocument.body.innerText);   

}

修改編輯器中内容

function SetEditorContents(EditorName, ContentStr) {   

    var oEditor = FCKeditorAPI.GetInstance(EditorName) ;   

    oEditor.SetHTML(ContentStr) ;   

}

//在當前頁面獲得 FCK編輯器
var Editor = FCKeditorAPI.GetInstance('InstanceName');

//从 FCK 編輯器的彈出窗口中獲得FCK編輯器
var Editor = window.parent.InnerDialogLoaded().FCK;

//以框架夜面的子框架中取得其他框架中FCK編輯器
var Editor = window.FrameName.FCKeditorAPI.GetInstance('InstanceName');

//以頁面彈出視窗中獲得父窗口FCK編輯器
var Editor = opener.FCKeditorAPI.GetInstance('InstanceName');

//抓取 FCK 編輯器的內容
oEditor.GetXHTML(formatted); // formatted 为：true|false，表示是否按HTML格式取出
也可用：
oEditor.GetXHTML();

//設定 FCK 編輯器的內容
// 第二個參數為：true|false，是否以所得即所得的方式設定內容。此方法通常用在設定初始值或表單重設oEditor.SetHTML("content", false);

//將內容插入 FCK 編輯器：
oEditor.InsertHtml("html"); // "html"為HTML文本

//檢查 FCK 編輯器內容是否有改變
oEditor.IsDirty();

2011年8月8日星期一

jQuery - javascript 呼叫 Button click

頁面上A.ASPX

<div style=" display:none"><asp:Button ID="B_AddData" runat="server" Text="觸發" onclick="B_AddData_Click" /></div>



<script type="text/javascript">

    function clickPageButton(buttonID) {

        var pageButton = $get(buttonID);

        pageButton.click();        

    }

</script>

程式 A.ASPX.CS

ScriptManager.RegisterStartupScript(Page, Page.GetType(), "Confi", "if(confirm('請確定資料是否正確')  == true){ clickPageButton('" + B_AddData.ClientID + "');}", true);

2011年6月11日星期六

JavaScrip 取消所有enter 鍵

<body onkeydown="if(event.keyCode==13) return false;">

javascript 關閉網頁並跳出訊息視窗

<input type="button" value="關閉窗口" onClick="window.opener=null;window.close();">

<a href=javascript:window.opener=null;window.close();>關閉窗口</a>

JavaScript C# 將網頁中的TextBox資料複製到剪貼簿中

在網頁中有 TextBox 與 Button 控制項，假如使用者在 TextBox 輸入完成後，按下Button，並不是把值帶到任何別的網頁或資料庫，只是把 TextBox 的值複製到系統剪貼簿clipboard中，之後可以在任何網址列或文字文件把值在度貼上。

可以使用 JavaScript 的 window.clipboardData.setData 達成

C# 語法

this.Button1.Attributes.Add("onclick", @"javascript:window.clipboardData.setData('Text',document.getElementById('" + this.TextBox1.UniqueID + @"').value);");

VB.NET 語法

Me.Button1.Attributes.Add("onclick", "javascript:window.clipboardData.setData('Text',document.getElementById('" & Me.TextBox1.UniqueID & "').value);")

2011年5月30日星期一

檢查瀏覽器是否支援WMP(Windows Media Player)

最近群裡有朋友提到用WMP外掛程式做網頁mp3播放機，在使用時需要檢查流覽器是否支援WMP；WMP的支援，IE下是用ActiveX，其它流覽器一般是用外掛程式。閒暇查了一下相關資料，寫了下面的檢測代碼，支持所有主流流覽器：

數位媒體串流-Windows Media Services - 使用JavaScrip操作撥放器及抓取clientData 元件(用戶端資料)資訊

<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" type="application/x-oleobject" 
id="wmp" width="0" height="0" style="width:0px;height:0px;"></object>

//基本屬性　 
wmp.URL:String; //指定媒體位置，本機或網路位址 
wmp.uiMode:String; //播放機介面模式，可為Full, Mini, None, Invisible 
wmp.playState:integer; //播放狀態，1=停止，2=暫停，3=播放，6=正在緩衝，9=正在連接，10=準備就緒 
wmp.enableContextMenu:Boolean; //啟用/禁用右鍵菜單 
wmp.fullScreen:boolean; //是否全屏顯示 
//播放機常用控制 
wmp.controls.play; //播放 
wmp.controls.pause; //暫停 
wmp.controls.stop; //停止 
wmp.controls.currentPosition:double; //當前進度 
wmp.controls.currentPositionString:string; //當前進度，字串格式。如“00:23” 
wmp.controls.fastForward; //快進 
wmp.controls.fastReverse; //快退 
wmp.controls.next; //下一曲 
wmp.controls.previous; //上一曲 
//播放機常用設置 
wmp.settings.volume:integer; //音量，0-100 
wmp.settings.autoStart:Boolean; //是否自動播放 
wmp.settings.mute:Boolean; //是否靜音 
wmp.settings.playCount:integer; //播放次數 
wmp.settings.balance = -100; //(左聲) 
wmp.settings.balance=100; //(右聲) 
wmp.settings.balance=0; //(全聲) 
//常用當前媒體屬性 
wmp.currentMedia.duration:double; //媒體總長度 
wmp.currentMedia.durationString:string; //媒體總長度，字串格式。如“03:24” 
wmp.currentMedia.getItemInfo(const string); //獲取當前媒體資訊 
wmp.currentMedia.setItemInfo(const string); //通過屬性名設置媒體資訊 
wmp.currentMedia.name:string; //同currentMedia.getItemInfo("Title") 
wmp.network.bufferingProgress; //緩衝百分比 
wmp.network.downloadProgress; //下載百分比

2010年9月8日星期三

如何動態載入Javascript或CSS

在網頁中，我們多半是在</head>中宣告要Include的js檔或css檔，例如:

<head>
<script type="text/javascript" src="blah.js"></script>
<link src="blah.css" type="text/css" ref="stylesheet"></link>
</head>

在某些情況下，可能需要依狀況動態載入不同的Javascript檔或CSS Stylesheet，要怎麼做呢? 看了以下的範例大家就明白了。

var headID = document.getElementsByTagName("head")[0]; 

var newCss = document.createElement('link');
newCss.type = 'text/css';
newCss.rel = "stylesheet";
newCss.href = "blah.css";
headID.appendChild(newCss);

var newJs = document.createElement('script');
newJs .type = 'text/javascript';
newJs .src= "blah.js";
headID.appendChild(newJs);

2010年9月2日星期四

javascript 補0

程式

    function padLeft(str, lenght) { //左邊補0
        if (str.length >= lenght)
            return str;
        else
            return padLeft("0" + str, lenght);
    }

    function padRight(str, lenght) { //右邊補0
        if (str.length >= lenght)
            return str;
        else
            return padRight(str + "0", lenght);
    }

用法

        var numkey = padLeft("10", 4);
        alert(numkey);

2010年9月1日星期三

[jQuery] 如何自動取得所有前端 JavaScript 錯誤以提升網站品質

這個需求透過 jQuery 來做最方便了，透過 error(fn) 事件即可達成此一目標：

$(window).error(function(msg, url, line){  
jQuery.post("/js_error_log.ashx", { msg: msg, url: url, line: line });
});

透過這個技巧即可有效獲得即時的前端資訊，看你要儲存到資料庫、EventLog、File、或郵寄出來都可以，不過唯一要小心的地方是當錯誤非常多時，這個錯誤追蹤的量可能會非常大，這時要特別注意程式的寫法，不要因為前端的錯誤槁掛了你的伺服器，而且有查到錯誤就要立即處理，降低錯誤發生的次數與提升網站品質。

2010年8月26日星期四

javascript 垂直輪播(跑馬燈、vertical carousel)

首先設定一個style(也可以直接放在標籤裡)

.ann{overflow:hidden;height:20px;}

這是html的部份，包在外面的div高度跟裡面個別的div高度設定成一樣

<div id="ann_box" class="ann" style="width:100px;">
  <div id="a1" class="ann"><a href="exp01.php" >exp01</a></div>
  <div id="a2" class="ann"><a href="exp02.php" >exp02</a></div>
  <div id="a3" class="ann"><a href="exp03.php" >exp03</a></div>
  <div id="a4" class="ann"><a href="exp04.php" >exp04</a></div>
  <div id="a5" class="ann"><a href="exp05.php" >exp05</a></div>
</div>

這是javascript的部份

function slideLine(box,stf,delay,speed,h)
{
  //取得id
  var slideBox = document.getElementById(box);
  //預設值 delay:幾毫秒滾動一次(1000毫秒=1秒)
  //       speed:數字越小越快，h:高度
  var delay = delay||1000,speed = speed||20,h = h||20;
  var tid = null,pause = false;
  //setInterval跟setTimeout的用法可以咕狗研究一下~
  var s = function(){tid=setInterval(slide, speed);}
  //主要動作的地方
  var slide = function(){
  //當滑鼠移到上面的時候就會暫停
    if(pause) return;
  //滾動條往下滾動 數字越大會越快但是看起來越不連貫，所以這邊用1
    slideBox.scrollTop += 1;
  //滾動到一個高度(h)的時候就停止
    if(slideBox.scrollTop%h == 0){
  //跟setInterval搭配使用的
      clearInterval(tid);
  //將剛剛滾動上去的前一項加回到整列的最後一項
      slideBox.appendChild(slideBox.getElementsByTagName(stf)[0]);
  //再重設滾動條到最上面
      slideBox.scrollTop = 0;
  //延遲多久再執行一次
      setTimeout(s, delay);
    }
  }
  //滑鼠移上去會暫停 移走會繼續動
  slideBox.onmouseover=function(){pause=true;}
  slideBox.onmouseout=function(){pause=false;}
  //起始的地方，沒有這個就不會動囉
  setTimeout(s, delay);
}
//網頁load完會執行一次
//五個屬性各別是：外面div的id名稱、包在裡面的標籤類型
//延遲毫秒數、速度、高度
slideLine('ann_box','div',2000,25,20);

這是範例 http://ex.hsin.tw/exp06.php

2010年8月25日星期三

JavaScrip 自動輪播頁籤 ( IE 與 Mozilla 通用 )

CSS

.ImgTab {cursor:hand}　←這行可有可無，不影響程式執行
.MsgHide {height:174px;border:1px solid #aaa;padding:10px;font:normal 12px 細明體;display:none}

HTML ( 以下為完整頁籤架構 )

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img name="Tag_COMM" class="ImgTab" src="Tab_Img10.gif" onmouseover="Rot_Msg(1)" onmouseout="Rot_Msg()" onclick="Pause_Msg()"></td>
<td><img name="Tag_COMM" class="ImgTab" src="Tab_Img20.gif" onmouseover="Rot_Msg(2)" onmouseout="Rot_Msg()" onclick="Pause_Msg()"></td>
<td><img name="Tag_COMM" class="ImgTab" src="Tab_Img30.gif" onmouseover="Rot_Msg(3)" onmouseout="Rot_Msg()" onclick="Pause_Msg()"></td>
</tr>
<tr><td colspan="3">
<div id="Tag_IE" name="Tag_FF" class="MsgHide">
訊息內容...
</div>
<div id="Tag_IE" name="Tag_FF" class="MsgHide">
訊息內容...
</div>
<div id="Tag_IE" name="Tag_FF" class="MsgHide">
訊息內容...
</div>
</td></tr>
</table>

JavaScript ( 更改輪播速度，範例為3000毫秒 )

Msg_Timer=setTimeout("Rot_Msg()",3000);

2010年6月20日星期日

利用 Java Script 抓取系統時間

要在網頁上秀出 Server 的時間，如果使用 Java Script 來抓，顯示的會是 Client 的時間，可是如果一直去後端拿，那 Server 的負擔就很大了，因此 demo 想到一個「偷吃步」的方式來解決這需求。

DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss");
DateTime d1 = new DateTime(1970, 1, 1);
DateTime d2 = DateTime.Now.ToUniversalTime();
TimeSpan ts = new TimeSpan(d2.Ticks - d1.Ticks);
ViewData["serverTime"]= ts.TotalMilliseconds;

JavaScrip防止回上一頁

下一頁

2010年4月28日星期三

Javascript的IE和Firefox相容性

以下以 IE 代替 Internet Explorer，以 MF 代替 Mozzila Firefox
1. document.form.item 問題
(1)現有問題：
現有代碼中存在許多 document.formName.item("itemName") 這樣的語句，不能在 MF 下運行
(2)解決方法：
改用 document.formName.elements["elementName"]
(3)其它
參見 2

2. 集合類物件問題
(1)現有問題：
現有代碼中許多集合類物件取用時使用 ()，IE 能接受，MF 不能。
(2)解決方法：
改用 [] 作為下標運算。如：document.forms("formName") 改為 document.forms["formName"]。
又如：document.getElementsByName("inputName")(1) 改為document.getElementsByName("inputName")[1]
(3)其它

3. window.event
(1)現有問題：
使用 window.event 無法在 MF 上運行
(2)解決方法：
MF 的 event 只能在事件發生的現場使用，此問題暫無法解決。可以這樣變通：
原代碼(可在IE中運行)：

<input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit()"/>
...
<script language="javascript">
function gotoSubmit() {
...
alert(window.event); // use window.event
...
}
</script>

新代碼(可在IE和MF中運行)：

<input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit(event)"/>
...
<script language="javascript">
function gotoSubmit(evt) {
evt = evt ? evt : (window.event ? window.event : null);
...
alert(evt); // use evt
...
}
</script>

此外，如果新代碼中第一行不改，與老代碼一樣的話(即 gotoSubmit 調用沒有給參數)，則仍然只能在IE中運行，但不會出錯。所以，這種方案 tpl 部分仍與老代碼相容。

4. HTML 物件的 id 作為物件名的問題
(1)現有問題
在 IE 中，HTML 物件的 ID 可以作為 document 的下屬物件變數名直接使用。在 MF 中不能。
(2)解決方法
用 getElementById("idName") 代替 idName 作為物件變數使用。

5. 用idName字串取得物件的問題
(1)現有問題
在IE中，利用 eval(idName) 可以取得 id 為 idName 的 HTML 物件，在MF 中不能。
(2)解決方法
用 getElementById(idName) 代替 eval(idName)。

6. 變數名與某 HTML 物件 id 相同的問題
(1)現有問題
在 MF 中，因為物件 id 不作為 HTML 物件的名稱，所以可以使用與 HTML 物件 id 相同的變數名，IE 中不能。
(2)解決方法
在聲明變數時，一律加上 var ，以避免歧義，這樣在 IE 中亦可正常運行。
此外，最好不要取與 HTML 對象 id 相同的變數名，以減少錯誤。
(3)其它
參見問題4

2010年4月23日星期五

javascript dojo.indexOf 說明與範例

dojo.indexOf 是 dojo 的陣列處理函數之一，用來取得指定字串在陣列中第一次出現的位置，如果找不到指定的字串時，會傳回 -1 表示，用法如下：

var 字串位置 = dojo.indexOf(陣列名稱, "搜尋字串");

程式範例如下：

<script type="text/javascript">
   dojo.addOnLoad(function(){
    var arrSample = ["apple", "dog", "book","book","desk"];
    var position = dojo.indexOf(arrSample, "book");
        alert(position);
    });
</script>

2010年4月20日星期二

javascript 滑鼠事件

事件　　　　　　　說明
onabort　　　　　圖片下載被中斷時
onblur　　　　當游標離開元件時
onchange　　　　當使用者更改欄位內容時
onclick　　　　　滑鼠單擊物件時
ondblclick　　滑鼠雙擊物件時
onerror　　　　載入文件或圖片發生錯誤時
onfocus　　　　　當游標定位在元件上時
onkeydown　　　　當鍵盤的按鍵被壓下時
onkeypress　　　當鍵盤的按鍵被壓下再放開時
onkeyup　　　　　當鍵盤的按鍵被放開時
onload　　　　　當網頁或圖片載入完成時
onmousedown　　滑鼠按鍵被壓下時
onmousemove　　滑鼠指標移動時
onmouseout　　　滑鼠指標離開物件時
onmouseover　　滑鼠指標移到物件上時
onmouseup　　　滑鼠按鍵被放開時
onreset　　　　當reset按鍵被點擊時
onresize　　　　當視窗或框架被改變大小時
onselect　　　　當文字被選取時
onsubmit　　　　當sumbit按鍵被點擊時
onunload　　　　當使用者離開畫面時

2010年4月2日星期五

javaScript substr和substring的差異

javaScript substr和substring的差異如下：

String.substr(N1,N2) ：從N1(指定位置)截取N2（所要截取之字元長度）
String.substring(N1,N2) ：從N1(指定位置)截取到N2(指定位置）

PS. javascript的起始位置是０

訂閱：文章 (Atom)

2011年8月19日 星期五

2011年8月13日 星期六

2011年8月11日 星期四

2011年8月8日 星期一

2011年6月11日 星期六

2011年5月30日 星期一

2010年9月8日 星期三

2010年9月2日 星期四

2010年9月1日 星期三

2010年8月26日 星期四

2010年8月25日 星期三

2010年6月20日 星期日

2010年4月28日 星期三

2010年4月23日 星期五

2010年4月20日 星期二

2010年4月2日 星期五