發表文章

目前顯示的是有「JavaScript」標籤的文章

解決使用BloggerAds廣告拖垮部落格載入時間的問題

最近我的網誌加入的BloggerAds的廣告,但是卻發現我的網頁載入速度變的異常的慢,本來我以為大概是我的Server的關係,但是久了情況似乎沒有改善,於是我就先把我的廣告拿掉,結果速度就變快了,於是我只好將廣告的那一段JavaScript獨立出來在另外一個html檔來執行,相信網路上大家也可以找到很多篇相關的文章,沒錯就是用iframe,但是我要稍為教大家用一下跟網路上教的不太一樣的方法。 在網路上的文章大都教寫死高度的方式,但本人認為此方法不太妥,萬一廣告的高度如果調大或調小,又要進來改一次程式,這實在是太不符合經濟效益了,我教大家另外一種方法,也是先前兩篇文章有說到的方式請參閱【 IFrame在非IE瀏覽器指定Src及動態改變高度的問題 】和【 iframe頁面呼叫主視窗的JavaScript Method 】,廢話不多說請大家自行參考下面的語法。

GoogleMap 判斷多個座標位置動態改變Zoom Size

最近有個需求就是一個地圖畫面可以隨意的讓使用者加入多個地標,而且要在第一次載入畫面的同時自動調整地圖大小來將所有地標呈現在可視範圍內。 在網路上找了許多文章,但幾乎(或者我沒找到)都是用GoogleMap API V2來實現,但是此次我試的例子是使用GoogleMap API V3來完成,因此沒辦法適用,在這裡我先說明一下V2的版本如何來完成。 //首先宣告 GLatLngBounds物件 var bounds = new GLatLngBounds(); //跑回圈將所有的座標加入 for(var i = 0; i V3版本,人家講了一大堆,結果都是Copy的根本無法使用,最後來是乖乖的上Google API 找答案比較快,解決方法如下(jQuery使用的是先前自己擴展的方法,這裡不再敘述) //在V3的版本請改用此物件 var bounds = new google.maps.LatLngBounds(); for (var i = 0; i

網頁AJAX技術,非Micorosft AJAX

在ASP.NET裡面有提供UpdatePanel來達成非同步的JavaScript與XML技術(AJAX),但是直接使用此方式固然方便,但是要是此頁面非常複雜又有多個Events都必須觸發PostBack的話,那麼會使的該頁面的效能極差無比,這時候就是使用XMLHttpRequest來完成的最好時機了。 舉幾個例子來看 1. 生日 → 如果要使用另外一個網頁來驗證回傳星座(當然也可以直接使用JavaScript來完成) 2. 帳號驗證 3. XML格式的資料清單

iframe在非IE瀏覽器指定Src及動態改變高度的問題

在IE瀏覽器內想要改變iframe頁框的Src值,只需要直接指定 iframe.src='XXXX.htm'; ,如此就可以改變連結的路徑,但是其他瀏覽器可就不吃這一套了(至少我試了Firefox,Chrome都是如此)。 1. 在其它瀏覽器內iframe若要指定src有反應,必須要補齊所需要的網頁元素。如 html,head,body ...... 2. 另外若要動態指定iframe的高度IE瀏覽器也與其它瀏覽器有所不同 IE  →  iframe.Document.body.scrollHeight Other →  iframe.contentDocument.body.offsetHeight

iframe頁面呼叫主視窗的JavaScript Method

我們有時候在A畫面嵌入一個IFrame的時候會有一些特殊需求需要IFrame載入的時候主畫面要做某些動作,舉例來說,在我的部落格裡有運用到iframe畫面PostBack後需要動態改變主畫面iframe頁框的高度,因此我就必須先在主畫面定義一個Method來提供iframe畫面呼叫,詳細的說明如下語法( 注意本範例使用jQuery來完成,必須先引入jqery.js )

showModalDialog 子視窗搖控父視窗在IE以外流覽器失效

在IE我們在使用showModalDialog打開一個畫面後,如果要使用子視窗來改變父視窗的值只需要使用 window.dialogArguments.document.getElementById("父視窗物件ID").value = "想改變的值"; 但是我在FireFox使用此方法發現無效,原來除了IE以外的瀏覽器,大部分的瀏覽器不是使用此方法來改變父視窗的值而是採用下面此方法來達成 if (window.dialogArguments != null) //IE使用 var querytype = window.dialogArguments.document.getElementById("父視窗物件ID"); else //其他如 Friefox,Chrome var querytype = opener.window.document.getElementById("父視窗物件ID"); querytype.value = 'Return Value'; window.close();

showModalDialog 跳出後背景灰階的語法

圖片
function GridView_OpenDialog2(url, widthpx, heightpx, imgurl) { var dialogcenter = ";dialogTop:" + ((window.screen.height / 2) - (heightpx.replace("px", "") / 2)) + " ; dialogLeft:" + ((window.screen.width / 2) - (widthpx.replace("px", "") / 2)) + ";"; if (imgurl) { var mask = document.createElement("DIV"); mask.id = "GridView_mask"; var style = ""; style += "background-color:white;"; style += "width:100%; height:100%;"; style += "position:fixed; top:0; left:0; zindex:1000;"; style += "filter:alpha(opacity=70); opacity:0.7; zoom:1;-moz-opacity:0.7;"; mask.style.cssText = style; //=======下面這些只有IE支援不建議這樣使用 //mask.style.position = "fixed"; //mask.style.top = 0; //mask.style.left = 0; //mask.style.width = "100%"; ...

使用JavaScript取得網址列資訊

圖片
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write ( unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E" ) );

javascript比較日期大小

將兩個物件傳入下面的函數就可得到時間的大小,可視情況自行修改 function checkDate(obj1, obj2) { var d1 = obj1.value; var d2 = obj2.value; //d1 = d1.replace(/-/g, "/"); //d2 = d2.replace(/-/g, "/"); //======str.repalce(/-/g, "/"); g 代表替換str字串中全部"-"為"/" d1 = new Date(d1); d2 = new Date(d2); var times = d2.getTime() - d1.getTime(); var days = parseInt(times / (1000 * 60 * 60 * 24)); //return (days

取得Html下拉式選單物件的內容

document.getElementById("drp開盤價").options[0].text; document.getElementById("drp開盤價").options[1].text; document.getElementById("drp開盤價").options[2].text; document.getElementById("drp開盤價").options[3].text;

JavaScript 跳出新視窗在螢幕正中間的方法

使用showModalDialog開啟新視窗,通常必須指定距離左邊和上面高度來設定初始位置,但若遇到不同解析度的瀏覽器的話,位置通常會跑掉,因此就必須使用JavaScript的window.screen來達成,以下面紅色字體部分來解釋

Firefox內使用style.display="block"無作用的問題

IE顯示隱藏區的Javascript語法為document.all.object.style.display="block"但此用法在Firefox並不適用 function exeInsert() { //Firefox使用空白顯示有別於IE的block document.getElementById("divInsert").style.display=""; document.getElementById("divEdit").style.display="none"; document.getElementById("txtInsert").value = ""; document.getElementById("txtSearch").value = ""; //document.all.divInsert.style.display="block"; //document.all.divEdit.style.display="none"; }

Firefox使用showModalDialog回傳時觸發事件

此範例因為使用ASP.NET的MastPage的關係,所以導致按鈕的ID與平常不一樣,須特別注意。 主頁面 window.showModalDialog('ContentInfo.aspx?class=edit&sno='+ e ,self,feature); //執行回傳按鈕事件 if(document.all) { //Name document.getElementById("ctl00$ContentPlaceHolder1$btnReload").click(); } else { //Firefox 專用 var evt = document.createEvent("MouseEvents"); evt.initEvent("click", true, true); document.getElementById("ctl00_ContentPlaceHolder1_btnReload").dispatchEvent(evt); } 主頁面呼叫的按鈕事件 <asp:Button ID="btnReload" runat="server" Text="" onclick="btnReload_Click" />

正則表達式

正則表達式生來就為了處理字串而活,偏偏卻很難看的懂,例如以下舉例是在檢查E-mail帳號是否正確 var objMail = document.all.txtMail; var rege = /^[\w]+([._-]?[a-z0-9]+)*@[\w]+([._-]?[\w]+)*[\w]$/; if(objMail.length == 0 || rege.exec(objMail .value) == null) { alert('錯誤'); } else { alert('對了'); } 看不懂的話只要多測試,相信應該不會很困難 以下幾個網站可以提供參考 http://caterpillar.onlyfun.net/Gossip/JavaGossip-V1/RegularExpression.htm Java驗證格式 http://momokao.pixnet.net/blog/post/10307155 Java驗證格式 http://www.fboss.com/article.asp?id=683 JavaScript驗證格式 http://annyhunt.pixnet.net/blog/post/537799 JavaScript驗證格式 http://phone.idv.tw/cs2/forums/thread/424.aspx ASP.NET驗證格式