深入挖掘IE瀏覽器視窗的功能

來源:互聯網
上載者:User
瀏覽器

  不要小瞧了這普普通通的windows,除了常用的window.open()與window.resizeTo()方法來開啟視窗外,仔細挖掘,你還能找到許多奧秘在裡頭,下面就跟著我一起來探索探索吧!

  一、繼續解剖window.open()

  說明:如無特別說明,以下紅色標註的代碼就是關鍵代碼

  1、彈啟一個全屏視窗

  window.open('http://www.webjx.com','example01','fullscreen')

<html><body ><b>www.webjx.com</b></body></html>

  我的電腦螢幕整個都是一張網頁了,怎麼樣,是不是有點觸控螢幕的味道呢?(手指不由自主地點了上去)。

  2、彈啟一個被F11化後的視窗

  window.open('http://www.webjx.com','example02','channelmode')

<html><body ><b>www.webjx.com</b></body></html>

  這樣的視窗類別似於被按了F11後的瀏覽器模式。

  3、彈啟一個帶有收藏連結工具列的視窗

window.open('http://www.webjx.com','example03','width=400,height=300,directories')

<html><body ><b>www.webjx.com</b></body></html>

  呵呵,平時IE上的連結工具列不太用,所以對這個不太感冒,但或許有的朋友用得上,權當是送給他們吧。

  二、對話方塊視窗

  IE協助下關於Internet Explorer選項開啟後的視窗,大家是否注意過(哪個傢伙會無聊到這種程度?),我們也可以用對話方塊視窗來實現,這就要用到showModalDialog()或是showModelessDialog()

<html><SCRIPT LANGUAGE="JavaScript"><!--showModalDialog('http://www.webjx.com','example04','dialogWidth:400px;dialogHeight:300px;dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;status:yes')//--></SCRIPT><b>www.webjx.com</b></body></html>

<html><SCRIPT LANGUAGE="JavaScript"><!--showModelessDialog('http://www.webjx.com','example05','dialogWidth:400px;dialogHeight:300px;dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;status:yes')//--></SCRIPT><b>www.webjx.com</b></body></html>

  以上我只是嘗試做了一種類型而已,這裡面更多的驚奇還等著你去發現,至於showModalDialog()與showModelessDialog()的區別,在於showModalDialog()開啟的視窗(簡稱強制回應視窗),置在父視窗上,必須關閉才能訪問父視窗(建議盡量少用,以免招人反感);showModelessDialog()(簡稱無強制回應視窗),開啟後不必關閉也可訪問父視窗開啟的視窗。

  現在我將這裡的一些參數說明一下,你聽了別嫌我煩
dialogHeight: iHeight 設定對話方塊視窗的高度。
dialogWidth: iWidth 設定對話方塊視窗的寬度。   
dialogLeft: iXPos 設定對話方塊視窗相對於案頭左上方的left位置。
dialogTop: iYPos 設定對話方塊視窗相對於案頭左上方的top位置。
center: {yes | no | 1 | 0 } 指定是否將對話方塊在案頭上置中,預設值是“yes”。
help: {yes | no | 1 | 0 } 指定對話方塊視窗中是否顯示上下文敏感的協助表徵圖。預設值是“yes”。   
resizable: {yes | no | 1 | 0 } 指定是否對話方塊視窗大小可變。預設值是“no”。
status: {yes | no | 1 | 0 } 指定對話方塊視窗是否顯示狀態列。對於非強制回應對話方塊視窗,預設值是“yes”;對於強制回應對話方塊視窗,預設值是 “no”。
相信看完了上面那些參數,你也一定能做出一個仿IE協助下的視窗,哈哈~~~有趣吧  

  三、HTA視窗

  它就是最後要出場的主角啦,或許有的人對這位仁兄還不太熟悉,我簡單介紹一下,HTA的全名為HTML Application,翻譯過來就是HTML應用程式,你只要簡單的用.hta為副檔名儲存HTML頁面就算建立了一個HTA檔案,下面我們就用HTA來編個視窗,將以下這段代碼儲存為.hta檔案,然後再用瀏覽器開啟,會發現什嗎?買個關子,自己去瞧瞧。

<HTML>
<HEAD>
<TITLE>www.webjx.com</TITLE>
<HTA:APPLICATION ID="oHTA"
APPLICATIONNAME="myApp"
  BORDER="thin"
  BORDERSTYLE="normal"
  CAPTION="yes"
  ICON="filename.ico"
  MAXIMIZEBUTTON="yes"
  MINIMIZEBUTTON="yes"
  SHOWINTASKBAR="no"
  INGLEINSTANCE="no"
  SYSMENU="yes"
  VERSION="1.0"
  WINDOWSTATE="normal" />
</HEAD>
<BODY>
<b>www.webjx.com</b>
</BODY>
</HTML>

  有人會發現上面這些代碼與平時的html有點不同,多了HTA:APPLICATION標籤,這就是關鍵之處,hta通過它來提供一系列面嚮應用程式的功能,接下來再講一講它的屬性(我的頭又在發脹)

  APPLICATIONNAME屬性(applicationName)
  此屬性為設定HTA的名稱。
  BORDER屬性(border)
  此屬性為設定為HTA的視窗邊框類型,預設值為 thick。
  它可以設為 thick 指定視窗為粗邊框
        dialog window 指定視窗為對話方塊
        none 指定視窗無邊框
        thin 指定視窗為窄邊框
  BORDERSTYLE屬性(borderStyle)
  此屬性為設定HTA視窗的邊框格式,預設值為 normal。
  它可以設為
   normal 普通邊框格式
   complex 凹凸格式組合邊框
   raised 凸出的3D邊框
   static 3D邊框格式
   sunken 凹進的3D邊框
  CAPTION屬性(caption)
  此屬性為設定HTA視窗是否顯示標題列或標題,預設值為 yes。
  ICON屬性(icon)
  此屬性為設定應用程式的表徵圖。
  MAXIMIZEBUTTON屬性(maximizeButton)
  此屬性為設定是否在HTA視窗中顯示最大化按鈕,預設值為 yes。
  MINIMIZEBUTTON屬性(minimizeButton)
  此屬性為設定是否在HTA視窗中顯示最小化按鈕,預設值為 yes。
  SHOWINTASKBAR屬性(showInTaskBar)
  此屬性為設定是否在工作列中顯示此應用程式,預設值為 yes。
  SINGLEINSTANCE屬性(singleInstance)
  此屬性為設定是否此應用程式同時只能運行一次。次屬性以APPLICATIONNAME屬性作為標識,預設值為 no。
  SYSMENU屬性(sysMenu)
  此屬性為設定是否在HTA視窗中顯示系統菜單,預設值為 yes。
  VERSION屬性(version)
  此屬性為設定應用程式的版本,預設值為空白。
  WINDOWSTATE屬性(windowState)
  此屬性為設定HTA視窗的初始大小,預設值為 normal。
  它可以設為 normal 預設大小
        minmize 最小化
        maximize 最大化

  以上括弧中的是在指令碼引用的屬性。在指令碼中以上屬性皆為唯讀屬性。此外,在指令碼中還可以使用commandLine屬性來檢索應用程式啟動時的參數。

  在HTA中還可以繼續使用html中的絕大多數標籤、指令碼等。

  好了,我們的探索之旅就到此結束了,你是否有意尤未盡的感覺呢?其實寫這篇文章,只是想起到一個拋磚引玉的作用,更多的內容還需要你們繼續去實驗去研究,如果“淘”到了什麼好東西,可別忘記公布出來哦。



相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.