摘要:如何開啟一個可控制大小的新視窗?
以下提供一個可以直接使用的範例,說明應該很清楚。可以直接抄過去使用。
VB:
''' <summary>
''' 使用 JavaScript 開啟一個新視窗
''' </summary>
''' <param name="form">呼叫程式的 Me</param>
''' <param name="jsWindowUrl">jsWindowUrl - 要開啟的 URL</param>
''' <param name="jsWindowTarget">jsWindowTarget - 要開啟視窗在哪裡,預設值是 _blank</param>
''' <param name="intervalCheckFocus">intervalCheckFocus - 每隔多少時間強迫子視窗 focus 以免被母視窗遮蓋,預設值為 700</param>
''' <param name="timeStayTop">timeStayTop - 隔多久時間之後不再強迫子視窗 focus,預設值為 6000</param>
Public Sub openWindow(ByVal form As System.Web.UI.Page, _
ByVal jsWindowUrl As String, _
Optional ByVal jsWindowTarget As String = "_blank", _
Optional ByVal intervalCheckFocus As String = "700", _
Optional ByVal timeStayTop As String = "6000", _
Optional ByVal jsWindowTop As String = "", _
Optional ByVal jsWindowLeft As String = "", _
Optional ByVal jsWindowWidth As String = "", _
Optional ByVal jsWindowHeight As String = "", _
Optional ByVal jsWindowToolbar As String = "", _
Optional ByVal jsWindowMenubar As String = "", _
Optional ByVal jsWindowLocation As String = "", _
Optional ByVal jsWindowDirectories As String = "", _
Optional ByVal jsWindowStatus As String = "", _
Optional ByVal jsWindowScrollbars As String = "", _
Optional ByVal jsWindowResizable As String = "")
form.Response.Write("<script language='javascript' type='text/javascript'>")
form.Response.Write(" OptString = 'top= " & jsWindowTop & ",")
form.Response.Write(" left= " & jsWindowLeft & ",")
form.Response.Write(" width= " & jsWindowWidth & ",")
form.Response.Write(" height= " & jsWindowHeight & ",")
form.Response.Write(" toolbar= " & jsWindowToolbar & ",")
form.Response.Write(" menubar= " & jsWindowMenubar & ",")
form.Response.Write(" location= " & jsWindowLocation & ",")
form.Response.Write(" directories= " & jsWindowDirectories & ",")
form.Response.Write(" status= " & jsWindowStatus & ",")
form.Response.Write(" scrollbars= " & jsWindowScrollbars & ",")
form.Response.Write(" resizable= " & jsWindowResizable & "';")
form.Response.Write(" subWin=window.open( '" & jsWindowUrl & "', '" & jsWindowTarget & "', OptString);")
form.Response.Write(" timerID = setInterval('subWin.focus()', " & intervalCheckFocus & ");")
form.Response.Write(" setTimeout('clearInterval(timerID)', " & timeStayTop & ");")
form.Response.Write("</script>")
End Sub
在這裡補充說明一下。為什麼一定要使用 subWin.focus() 來使子視窗被強迫 focus,主要是因為在某些情況下,我發現母視窗在開啟子視窗後,不知道為什麼會自動跑到畫面最上層,以致於把子視窗給遮蓋了。所以只好使用程式方法讓子視窗跑上來。
如果你認為讓子視窗被母視窗遮蓋也無所謂,那麼可以把程式最後面兩行拿掉。
此外,如果這個程式不是寫在網頁中,而是寫在類別庫專案中,那麼你可能必須手動在專案裡加上 System.Web.dll 這個參考。
以下再補上一個較完整的 C# 版本:
public class jsWindow { /// <summary> /// 指定新視窗將被開啟在哪裡, 可以使用的值如下: /// "_blank" 或 "" - 開啟在一個新視窗中 /// "_self" - 開啟在原視窗; 若網頁中有定義 frameset 則開啟在原 frameset 中 /// "_top" - 如果原網頁未定義 frameset 的話, 如此設定的結果和 _self 一樣; 若有定義 frameset 則會開啟在原視窗並取消所有 frameset /// "_parent" - 如果原網頁未定義 frameset 的話, 如此設定的結果和 _self 一樣; 若有定義 frameset 則會開啟在原 frameset 的上一層 /// </summary> public string Target = "_blank"; /// <summary> /// 每隔多少時間強迫被開啟的新視窗被 focus, 單位為 ms, 預設值為 700ms /// </summary> public string intervalCheckFocus = "700"; /// <summary> /// 在多少時間後解除強迫被開啟的新視窗被 focus 的動作, 單位為 ms, 預設值為 6000ms /// </summary> public string timeStayTop = "6000"; /// <summary> /// 指定新視窗是否開啟為劇場模式 (theator mode); 此設定將取代 height, width, top 與 left 的指定值 /// 可以使用的值有 yes | no | 1 | 0, 預設為 "no" /// </summary> public string Channelmode = ""; /// <summary> /// 指定新視窗是否開啟為全螢幕模式; 此設定將取代 height, width, top 與 left 的指定值, 且隱藏標題列與選單列 /// 可以使用的值有 yes | no | 1 | 0, 預設為 "no" /// </summary> public string FullScreen = ""; /// <summary> /// 指定新視窗上緣距離螢幕最上方的高度, 單位為 pixel, 值必須大於或等於 0 /// </summary> public string Top = ""; /// <summary> /// 指定新視窗左緣距離螢幕最左方的寬度, 單位為 pixel, 值必須大於或等於 0 /// </summary> public string Left = ""; /// <summary> /// 指定新視窗的寬度, 單位為 pixel, 最小值是 250 /// </summary> public string Width = ""; /// <summary> /// 指定新視窗的高度, 單位為 pixel, 最小值是 150 /// </summary> public string Height = ""; /// <summary> /// 指定新視窗是否顯示工具列 /// 可以使用的值有 yes | no | 1 | 0, 預設為 "yes" /// </summary> public string Toolbar = ""; /// <summary> /// 指定新視窗是否顯示選單列; 在 IE 7 以上, 除非按著 Alt 鍵, 否則選單列預設並不出現; 但若此值設為 no/0 則按著 Alt 也不會出現選單列 /// 可以使用的值有 yes | no | 1 | 0, 預設為 "yes" /// </summary> public string Menubar = ""; /// <summary> /// 指定新視窗是否顯示導覽列; 在 IE 7 以上導覽列包括上一頁、下一頁等按鈕 /// 可以使用的值有 yes | no | 1 | 0, 預設為 "yes" /// </summary> public string Location = ""; /// <summary> /// 指定新視窗是否出現狀態列 /// 可以使用的值有 yes | no | 1 | 0, 預設為 "yes" /// </summary> public string Status = "yes"; /// <summary> /// 指定新視窗是否出現 scroll bars /// 可以使用的值有 yes | no | 1 | 0, 預設為 "yes" /// </summary> public string Scrollbars = ""; /// <summary> /// 指定新視窗是否可調整大小; 在 IE 7 以上, 若此值設為 no/0 則同時取消 tab 功能 /// 可以使用的值有 yes | no | 1 | 0, 預設為 "yes" /// </summary> public string Resizable = ""; /// <summary> /// 指定要開啟的 URL; 請注意, 字串請以 http:// 開頭, 否則會使用當前網頁的相對位址 /// </summary> public string url = ""; public void open(System.Web.UI.Page page) { if (!string.IsNullOrEmpty(url.Trim())) open(page, url); } public void open(System.Web.UI.Page page, string url) { if (!string.IsNullOrEmpty(url.Trim())) { StringWriter sw = new StringWriter(); sw.WriteLine("<script language='javascript' type='text/javascript'>"); sw.Write("OptString = '"); sw.Write("channelmode = " + Channelmode + ","); sw.Write("fullscreen = " + FullScreen + ","); sw.Write("top = " + Top + ","); sw.Write("left =" + Left + ","); sw.Write("width =" + Width + ","); sw.Write("height =" + Height + ","); sw.Write("toolbar =" + Toolbar + ","); sw.Write("menubar =" + Menubar + ","); sw.Write("location =" + Location + ","); sw.Write("status =" + Status + ","); sw.Write("scrollbars = " + Scrollbars + ","); sw.WriteLine("resizable= " + Resizable + "';"); sw.WriteLine(" subWin=window.open('" + url + "', '" + Target + "', OptString);"); sw.WriteLine(" timerID = setInterval('subWin.focus()', " + intervalCheckFocus + ");"); sw.WriteLine(" setTimeout('clearInterval(timerID)', " + timeStayTop + ");"); sw.WriteLine("</script>"); ScriptManager.RegisterClientScriptBlock(page, page.GetType(), "myWindow", sw.ToString(), false); } } }
如果你用的是較舊的 ASP.NET (未支援 AJAX), 那麼你可以把程式的最後一行改成 Response.Write(sw.ToString()); 即可。
使用範例(在 .aspx.cs 中):
jsWindow js = new jsWindow(); js.open(Page, http://www.dotblogs.com.tw/johnny);
2010/2/10 補充 - 一時手癢, 把開啟 Modal Dialog 的程式也一起寫了:
using System.Web.UI; using System.IO; ... public class jsModalDialog { /// <summary> /// 指定要開啟的 URL; 請注意, 字串請以 http:// 開頭, 否則會使用當前網頁的相對位址 /// </summary> public string url = ""; /// <summary> /// 每隔多少時間強迫被開啟的新視窗被 focus, 單位為 ms, 預設值為 700ms /// </summary> public string intervalCheckFocus = "700"; /// <summary> /// 在多少時間後解除強迫被開啟的新視窗被 focus 的動作, 單位為 ms, 預設值為 6000ms /// </summary> public string timeStayTop = "6000"; /// <summary> /// 指定對話方塊的高度, 單位為 pixel /// </summary> public string Height = ""; /// <summary> /// 指定對話方塊左緣距離螢幕最左方的寬度, 單位為 pixel, 值必須大於或等於 0 /// </summary> public string Left = ""; /// <summary> /// 指定對話方塊上緣距離螢幕最上方的高度, 單位為 pixel, 值必須大於或等於 0 /// </summary> public string Top = ""; /// <summary> /// 指定對話方塊的寬度, 單位為 pixel /// </summary> public string Width = ""; /// <summary> /// 指定對話方塊是否在列印或預覽列印畫面中隱藏; 本設定只對信任的應用程式 (trusted application) 有效 /// 可以使用的值有 yes | no | 1 | 0 | on | off, 預設為 "yes" /// </summary> public string Center = "yes"; /// <summary> /// 指定對話方塊是否顯示在螢幕正中央 /// 可以使用的值有 yes | no | 1 | 0 | on | off, 預設為 "no" /// </summary> public string Hide = "no"; /// <summary> /// 指定對話方塊是否可調整大小 /// 可以使用的值有 yes | no | 1 | 0 | on | off, 預設為 "no" /// </summary> public string Edge; /// <summary> /// 指定對話方塊的邊框形狀 /// 可以使用的值有 sunken | raised, 預設為 "raised" /// </summary> public string Resizable = "no"; /// <summary> /// 指定對話方塊是否出現 scroll bars /// 可以使用的值有 yes | no | 1 | 0 | on | off, 預設為 "yes" /// </summary> public string Scroll = "yes"; /// <summary> /// 指定對話方塊是否出現狀態列 /// 可以使用的值有 yes | no | 1 | 0 | on | off, 預設為 "no" /// </summary> public string Status = "no"; /// <summary> /// 指定對話方塊是否出現邊框 (border window chrome); 本設定只對信任的應用程式 (trusted application) 有效 /// 可以使用的值有 yes | no | 1 | 0 | on | off, 預設為 "no" /// </summary> public string Unadorned = "no"; public void show(System.Web.UI.Page page) { if (!string.IsNullOrEmpty(url.Trim())) show(page, url); } public void show(System.Web.UI.Page page, string url) { if (!string.IsNullOrEmpty(url.Trim())) { StringWriter sw = new StringWriter(); sw.WriteLine("<script language='javascript' type='text/javascript'>"); sw.Write("OptString = '"); sw.Write("dialogHeight = " + Height + ","); sw.Write("dialogLeft =" + Left + ","); sw.Write("dialogTop = " + Top + ","); sw.Write("dialogWidth =" + Width + ","); sw.Write("center =" + Center + ","); sw.Write("dialogHide =" + Hide + ","); sw.Write("edge =" + Edge + ","); sw.Write("resizable= " + Resizable + ","); sw.Write("scroll = " + Scroll + ","); sw.Write("status = " + Status + ","); sw.WriteLine("unadorned = " + Unadorned + "';"); sw.WriteLine(" subWin=window.open('" + url + "', '', OptString);"); sw.WriteLine(" timerID = setInterval('subWin.focus()', " + intervalCheckFocus + ");"); sw.WriteLine(" setTimeout('clearInterval(timerID)', " + timeStayTop + ");"); sw.WriteLine("</script>"); ScriptManager.RegisterClientScriptBlock(page, page.GetType(), "myModalDialog", sw.ToString(), false); } } }
使用方式和原理與開啟視窗的程式一樣, 就不多說了。