摘要:如何開啟一個可控制大小的新視窗?
以下提供一個可以直接使用的範例,說明應該很清楚。可以直接抄過去使用。
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);
}
}
}
使用方式和原理與開啟視窗的程式一樣, 就不多說了。