JS window.open()打開新窗口(非常詳細(xì))

使用 window 對象的 open() 方法可以打開一個新窗口山卦。用法如下:

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

參數(shù)列表如下:

  • URL:可選字符串鞋邑,聲明在新窗口中顯示網(wǎng)頁文檔的 URL账蓉。如果省略枚碗,或者為空,則新窗口就不會顯示任何文檔铸本。
  • name:可選字符串,聲明新窗口的名稱箱玷。這個名稱可以用作標(biāo)記 <a> 和 <form> 的 target 目標(biāo)值。如果該參數(shù)指定了一個已經(jīng)存在的窗口壳坪,那么 open() 方法就不再創(chuàng)建一個新窗口,而只是返回對指定窗口的引用媚赖,在這種情況下珠插,features 參數(shù)將被忽略捻撑。
  • features:可選字符串磨隘,聲明了新窗口要顯示的標(biāo)準(zhǔn)瀏覽器的特征,具體說明如下表所示顾患。如果省略該參數(shù)番捂,新窗口將具有所有標(biāo)準(zhǔn)特征。
  • replace:可選的布爾值江解。規(guī)定了裝載到窗口的 URL 是在窗口的瀏覽歷史中創(chuàng)建一個新條目设预,還是替換瀏覽歷史中的當(dāng)前條目。

該方法返回值為新創(chuàng)建的 window 對象犁河,使用它可以引用新創(chuàng)建的窗口鳖枕。

<caption>新窗口顯示特征</caption>

特征 說明
fullscreen = yes | no | 1 | 0 是否使用全屏模式顯示瀏覽器。默認(rèn)是 no桨螺。處于全屏模式的窗口同時處于劇院模式
height = pixels 窗口文檔顯示區(qū)的高度宾符。單位為像素。
left = pixels 窗口的 x 坐標(biāo)灭翔。單位為像素魏烫。
location = yes | no | 1 | 0 是否顯示地址字段。默認(rèn)是 yes肝箱。
menubar = yes | no | 1 | 0 是否顯示菜單欄哄褒。默認(rèn)是 yes。
resizable = yes | no | 1 | 0 窗口是否可調(diào)節(jié)尺寸煌张。默認(rèn)是 yes读处。
scrollbars = yes | no | 1 | 0 是否顯示滾動條。默認(rèn)是 yes唱矛。
status = yes | no | 1 | 0 是否添加狀態(tài)欄罚舱。默認(rèn)是 yes井辜。
toolbar = yes | no | 1 | 0 是否顯示瀏覽器的工具欄。默認(rèn)是 yes管闷。
top = pixels 窗口的 y 坐標(biāo)
width = pixels 窗口的文檔顯示區(qū)的寬度粥脚。單位為元素。

新創(chuàng)建的 window 對象擁有一個 opener 屬性包个,引用打開它的原始對象刷允。opener 只在彈出窗口的最外層 window 對象(top)中定義,而且指向調(diào)用 window.open() 方法的窗口或框架碧囊。

示例1

下面示例演示了打開的窗口與原窗口之間的關(guān)系树灶。

var win = window.open();  //打開新的空白窗口
win.document.write ("<h1>這是新打開的窗口</h1>");  //在新窗口中輸出提示信息
win.focus ();  //讓原窗口獲取焦點
win.opener.document.write ("<h1>這是原來窗口</h1>");  //在原窗口中輸出提示信息
console.log(win.opener == window);  //檢測window.opener屬性值

使用 window 的 close() 方法可以關(guān)閉一個窗口。例如糯而,關(guān)閉一個新創(chuàng)建的 win 窗口可以使用下面的方法實現(xiàn)天通。

win.close;

如果在打開窗口內(nèi)部關(guān)閉自身窗口,則應(yīng)該使用下面的方法熄驼。

window.close;

使用 window.closed 屬性可以檢測當(dāng)前窗口是否關(guān)閉像寒,如果關(guān)閉則返回 true,否則返回 false瓜贾。

示例2

下面示例演示如何自動彈出一個窗口诺祸,然后設(shè)置半秒鐘之后自動關(guān)閉該窗口,同時允許用戶單擊頁面超鏈接祭芦,更換彈出窗口內(nèi)顯示的網(wǎng)頁 URL筷笨。

var url = "c.biancheng.net";  //要打開的網(wǎng)頁地址
var features = "height=500, width=800, top=100, left=100, toolbar=no, menubar=no,
scrollbars = no, resizable = no, location = no, status = no";  //設(shè)置新窗口的特性
//動態(tài)生成一個超鏈接
document.write('<a href="c.biancheng.net" target="newW">切換到C語言中文網(wǎng)首頁</a>');
var me = window.open(url, "newW", featrues);  //打開新窗口
setTimeout(function () {  //定時器
  if (me.closed) {
    console.log("創(chuàng)建的窗口已經(jīng)關(guān)閉。");
  } else {
    me.close();
  }
}, 5000);  //半秒鐘之后關(guān)閉該窗口
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>打開新窗口</title>
    
    <script type="text/javascript" >
    function OpenMyWinN(surl,w,h){
    window.open(surl, "popUpMyWinN", "scrollbars=yes,resizable=yes,statebar=no,width="+w+",height="+h+",left=200, top=100");
}
    </script>
</head>
<body>

<table width="98%" border="0" cellpadding="1" cellspacing="1" align="center" class="tbtitle" style="background:#cfcfcf;">
  <tr>
    <td height="28" colspan="11" bgcolor="#EDF9D5" background='images/tbg.gif'>
        <table width="98%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="30%"  style="padding-left:10px;"><strong>訂單列表:</strong> </td>
          <td width="45%" align="right" style="padding-top:4px">
              <input type="button" name="ss13" value="未付款" sonClick="javascript:OpenMyWinN('#',680,450);"  class='np coolbg'/>
          </td>
        </tr>
      </table>
      </td>
    </tr>
</table>
<a href="javascript:OpenMyWinN('shops_operations_cart.php?oid=S-P1586654454RN545',680,450);" >[詳情]</a>
效果如下圖:
image.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末龟劲,一起剝皮案震驚了整個濱河市胃夏,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌咸灿,老刑警劉巖构订,帶你破解...
    沈念sama閱讀 216,402評論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異避矢,居然都是意外死亡悼瘾,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評論 3 392
  • 文/潘曉璐 我一進(jìn)店門审胸,熙熙樓的掌柜王于貴愁眉苦臉地迎上來亥宿,“玉大人,你說我怎么就攤上這事砂沛√潭螅” “怎么了?”我有些...
    開封第一講書人閱讀 162,483評論 0 353
  • 文/不壞的土叔 我叫張陵碍庵,是天一觀的道長映企。 經(jīng)常有香客問我悟狱,道長,這世上最難降的妖魔是什么堰氓? 我笑而不...
    開封第一講書人閱讀 58,165評論 1 292
  • 正文 為了忘掉前任挤渐,我火速辦了婚禮,結(jié)果婚禮上双絮,老公的妹妹穿的比我還像新娘浴麻。我一直安慰自己,他們只是感情好囤攀,可當(dāng)我...
    茶點故事閱讀 67,176評論 6 388
  • 文/花漫 我一把揭開白布软免。 她就那樣靜靜地躺著,像睡著了一般焚挠。 火紅的嫁衣襯著肌膚如雪膏萧。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,146評論 1 297
  • 那天宣蔚,我揣著相機與錄音向抢,去河邊找鬼认境。 笑死胚委,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的叉信。 我是一名探鬼主播亩冬,決...
    沈念sama閱讀 40,032評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼硼身!你這毒婦竟也來了硅急?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,896評論 0 274
  • 序言:老撾萬榮一對情侶失蹤佳遂,失蹤者是張志新(化名)和其女友劉穎营袜,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體丑罪,經(jīng)...
    沈念sama閱讀 45,311評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡荚板,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,536評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了吩屹。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片跪另。...
    茶點故事閱讀 39,696評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖煤搜,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤娄涩,帶...
    沈念sama閱讀 35,413評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站淌哟,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏辽故。R本人自食惡果不足惜绞绒,卻給世界環(huán)境...
    茶點故事閱讀 41,008評論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望榕暇。 院中可真熱鬧蓬衡,春花似錦、人聲如沸彤枢。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽缴啡。三九已至壁晒,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間业栅,已是汗流浹背秒咐。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留碘裕,地道東北人携取。 一個月前我還...
    沈念sama閱讀 47,698評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像帮孔,于是被迫代替她去往敵國和親雷滋。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,592評論 2 353