1. 程式人生 > >JS window.open()屬性

JS window.open()屬性

一. Window 物件

Window 物件是 JavaScript 層級中的頂層物件。

Window 物件代表一個瀏覽器視窗或一個框架。

Window 物件會在 <body> 或 <frameset> 每次出現時被自動建立。

二.

open() 方法用於開啟一個新的瀏覽器視窗或查詢一個已命名的視窗。

三.

window.open(URL,name,features,replace)

引數描述
URL 一個可選的字串,聲明瞭要在新視窗中顯示的文件的 URL。如果省略了這個引數,或者它的值是空字串,那麼新視窗就不會顯示任何文件。
name 一個可選的字串,該字串是一個由逗號分隔的特徵列表,其中包括數字、字母和下劃線,該字元聲明瞭新視窗的名稱。這個名稱可以用作標記 <a> 和 <form> 的屬性 target 的值。如果該引數指定了一個已經存在的視窗,那麼 open() 方法就不再建立一個新視窗,而只是返回對指定視窗的引用。在這種情況下,features 將被忽略。
features 一個可選的字串,聲明瞭新視窗要顯示的標準瀏覽器的特徵。如果省略該引數,新視窗將具有所有標準特徵。在視窗特徵這個表格中,我們對該字串的格式進行了詳細的說明。
replace

一個可選的布林值。規定了裝載到視窗的 URL 是在視窗的瀏覽歷史中建立一個新條目,還是替換瀏覽歷史中的當前條目。支援下面的值:

  • true - URL 替換瀏覽歷史中的當前條目。
  • false - URL 在瀏覽歷史中建立新的條目。

四.視窗特徵(Window Features)

channelmode=yes|no|1|0 是否使用劇院模式顯示視窗。預設為 no。
directories=yes|no|1|0 是否新增目錄按鈕。預設為 yes。
fullscreen=yes|no|1|0 是否使用全屏模式顯示瀏覽器。預設是 no。處於全屏模式的視窗必須同時處於劇院模式。
height=pixels 視窗文件顯示區的高度。以畫素計。
left=pixels 視窗的 x 座標。以畫素計。
location=yes|no|1|0 是否顯示地址欄位。預設是 yes。
menubar=yes|no|1|0 是否顯示選單欄。預設是 yes。
resizable=yes|no|1|0 視窗是否可調節尺寸。預設是 yes。
scrollbars=yes|no|1|0 是否顯示滾動條。預設是 yes。
status=yes|no|1|0 是否新增狀態列。預設是 yes。
titlebar=yes|no|1|0 是否顯示標題欄。預設是 yes。
toolbar=yes|no|1|0 是否顯示瀏覽器的工具欄。預設是 yes。
top=pixels 視窗的 y 座標。
width=pixels 視窗的文件顯示區的寬度。以畫素計。

五.

注意:     

window.open(URL,name,features,replace)

如果name使用名字已經存在,那麼不會建立一個新的視窗,而是會返回對已經存在的視窗的引用。

否則,則建立一個新的視窗。

我就是沒有注意這點,網頁全屏時候,花了很多時間。

六.具體業務功能

6.1 開啟一個全屏的視窗

<script type="text/javascript">

window.open("http://google.com/",'新開googleWin',"fullscreen=1")

</script>

6.2 使本頁面全屏

解決方案:先開啟一個全屏的目標視窗,然後關閉本視窗。

程式碼:

<script type="text/javascript">

     var url=document.location.href; //獲得本視窗屬性名
      newWin=window.open(url,'','fullscreen=1,scrollbars=0');      
      window.opener=null;//出掉關閉時候的提示視窗
      window.open('','_self'); //ie7      
      window.close();

</script>

注意:如果你在open方法中指定第二個引數,併為他賦予特定的值話,那麼第二次使用上面方法,將無法建立新的視窗,因為系統預設的返回已經存在視窗的索引。

按ESC退出全屏

<script type="text/javascript">

// Esc退出全屏
      function exitFullScreenMe()
         {
             var esc=window.event.keyCode;
             if(esc==27) //判斷是不是按的Esc鍵,27表示Esc鍵的keyCode.
             {
              var url=document.location.href;
              
       win=window.open(url,'','fullscreen=0,directories=1,location=1,menubar=1,resizable=1,scrollbars=1,status=1,titlebar=1,toolbar=1'); //讓新開啟的視窗全屏                          
       
       window.opener=null;//出掉關閉時候的提示視窗
       window.open('','_self');//ie7          
       window.close(); //先關閉老的視窗          
                 
             }
         }
         document.onkeydown = exitFullScreenMe ; //當onkeydown(按鍵觸發) 事件發生時呼叫hotkey函式

</script>

6.3同時彈出兩個視窗

<script type="text/javascript">

window.open("http://google.com/",'新開googleWin1',"height=300, width=300, top=0, left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=n o, status=no")

window.open("http://google.com/",'新開googleWin2',"height=300, width=300, top=0, left=400,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=n o, status=no")
</script>

注意:(1)視窗的名字不能相同,但可以都為空;

(2)要注意兩個視窗的佈局,是否符合你的要求。

6.4

第一次進入頁面才彈出視窗.cookie解決

首先,將如下程式碼加入主頁面HTML的<HEAD>區:

  <script>
  function openwin(){
  window.open("page.html","","width=200,height=200")
  }
  function get_cookie(Name) {
  var search = Name + "="
  var returnvalue = "";
  if (document.cookie.length > 0) {
  offset = document.cookie.indexOf(search)
  if (offset != -1) {
  offset += search.length
  end = document.cookie.indexOf(";", offset);
  if (end == -1)
  end = document.cookie.length;
  returnvalue=unescape(document.cookie.substring(offset, end))
  }
  }
  return returnvalue;
  }  
  function loadpopup(){
  if (get_cookie('popped')==''){
  openwin()
  document.cookie="popped=yes"
  }
  }
  </script>

  然後,用<body onload="loadpopup()">(注意不是openwin而是loadpop啊!)替換主頁面中原有的<BODY>這一句即可。你可以試著重新整理一下這個頁面或重新進 入該頁面,視窗再也不會彈出了。