如何開啟一個可控制大小的新視窗?

摘要:如何開啟一個可控制大小的新視窗?

以下提供一個可以直接使用的範例,說明應該很清楚。可以直接抄過去使用。

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);
        }
    }
}

使用方式和原理與開啟視窗的程式一樣, 就不多說了。


Dev 2Share @ 點部落