- JavaScript程序設(shè)計(jì):基礎(chǔ)·PHP·XML
- (美)Elizabeth Drake
- 1207字
- 2020-10-30 18:12:24
1.6.7 open()和close()方法
網(wǎng)頁幾乎總是包含到網(wǎng)站中其他頁面的鏈接。然而,你有時(shí)可能不想用戶離開當(dāng)前頁而又想要用戶看到新頁面的內(nèi)容。當(dāng)單擊鏈接時(shí),你可以使用JavaScript打開新的窗口,從而使用戶能夠在新頁面和原頁之間切換。同樣,你可以使用JavaScript關(guān)閉窗口。打開窗口的語法看起來有一點(diǎn)復(fù)雜,有很多選項(xiàng):
對(duì)于open()方法,第一個(gè)參數(shù)是URL,它指定要打開頁面的網(wǎng)址。如果沒有指定URL,那么瀏覽器將打開空白頁面。
參數(shù)name是可選擇的,它指定窗口的目標(biāo)屬性或名字。支持下列值:
·_blank:將URL指定的頁面載入一個(gè)新窗口,這是默認(rèn)值。
·_parent:將URL指定的頁面載入父框架。
·_self:將URL指定的頁面替換當(dāng)前頁。
·_top:將URL指定的頁面替換任何可能被裝載的框架集。
·name:為新建窗口指定名字。
參數(shù)specs提供許多選項(xiàng),可以使用這些選項(xiàng)定義新窗口的大小或位置。例如,可以將新窗口指定為一個(gè)小窗口、有一個(gè)滾動(dòng)條或許多其他選項(xiàng)。表1-5列出了很多能夠被大多數(shù)瀏覽器支持的選項(xiàng)。
表1-5 window.open()的可選規(guī)格(以逗號(hào)分隔相鄰項(xiàng)目)
最后,參數(shù)replace是可選的,它指定URL是否應(yīng)該在歷史列表中建立一個(gè)新條目或者替換當(dāng)前條目。如果它設(shè)置為true,則URL將替換歷史列表中的當(dāng)前文檔;如果它設(shè)置為false,則URL將建立一個(gè)新條目。close()方法用來關(guān)閉窗口,你可能將它與一個(gè)按鈕關(guān)聯(lián)以允許用戶關(guān)閉一個(gè)已打開的窗口。例1.18混合使用了window.open()和window.close()方法。
例1.18 使用window.open()和window.close() 這個(gè)例子使用window.open()方法打開一個(gè)顯示一些文本的小窗口,其中的按鈕用來讓用戶打開或者關(guān)閉這個(gè)新窗口。
在最初裝載時(shí),頁面看起來像這樣:
當(dāng)用戶單擊“Opena small window”按鈕時(shí),第17行的指令調(diào)用<head>區(qū)域起始于第5行的函數(shù)openWin(),創(chuàng)建變量smallWindow,其值是通過window.open()方法定義的新窗口。第1個(gè)參數(shù)URL沒有定義,即賦值為空串(“”),意味著沒有URL。如果在引號(hào)內(nèi)放置了URL,那么新窗口將顯示這個(gè)網(wǎng)址的頁面。第2個(gè)參數(shù)name也是空的,意味著這個(gè)新窗口沒有標(biāo)識(shí)的名字。第3個(gè)參數(shù)為新窗口列出規(guī)格,即創(chuàng)建一個(gè)300個(gè)像素寬和200個(gè)像素高的小窗口,這只是表1-5所列的一些規(guī)格。最后,沒有給出可選參數(shù)replace,因?yàn)檫@個(gè)窗口不需要在瀏覽器歷史中替換任何東西。
第8行定義新窗口的內(nèi)容,注意點(diǎn)標(biāo)記用來標(biāo)識(shí)在哪里放置內(nèi)容。smallWindow.document.write()描述在哪里寫新內(nèi)容,即在新窗口(smallWindow)的文檔中。內(nèi)容本身放置在write()方法的圓括號(hào)內(nèi),并且用引號(hào)括起來。注意也可以包括任何HTML格式。在這個(gè)例子中,內(nèi)容包含在<p></p>標(biāo)簽對(duì)內(nèi),并且包括強(qiáng)制換行(<br/>)。在單擊“Open a small window”按鈕之后,屏幕看起來像這樣:
當(dāng)用戶單擊第二個(gè)按鈕“Close the small window”時(shí),第18行調(diào)用第10行的函數(shù)closeWin(),它使用close()方法簡(jiǎn)單地關(guān)閉smallWindow。
1.6節(jié)檢查點(diǎn)
1.23 填空題:所有對(duì)象有________和________。
1.24 哪個(gè)JavaScript方法讓你在一個(gè)網(wǎng)頁上顯示文本?
1.25 寫一條JavaScript語句,當(dāng)調(diào)用時(shí)將以2級(jí)標(biāo)題格式顯示一條歡迎信息,顯示"Welcome to my world!"。
以下代碼用于檢查點(diǎn)1.26和1.27。
1.26 寫一條JavaScript語句,它使用getElementById()方法訪問其id="cars"的容器的內(nèi)容,并且將變量命名為auto。
1.27 寫一條JavaScript語句,顯示"cars"容器的內(nèi)容。
1.28 寫一條按下列規(guī)格打開新窗口的JavaScript語句:窗口的高度是600個(gè)像素,寬度是400個(gè)像素,并且為新窗口指定名字"extraInfo"。
- Mastering OpenLayers 3
- HTML5移動(dòng)Web開發(fā)技術(shù)
- PyTorch自動(dòng)駕駛視覺感知算法實(shí)戰(zhàn)
- 跟老齊學(xué)Python:輕松入門
- Python爬蟲開發(fā)與項(xiàng)目實(shí)戰(zhàn)
- Scratch真好玩:教小孩學(xué)編程
- Web Application Development with MEAN
- PHP+MySQL+Dreamweaver動(dòng)態(tài)網(wǎng)站開發(fā)實(shí)例教程
- C# and .NET Core Test Driven Development
- Building Wireless Sensor Networks Using Arduino
- 機(jī)器學(xué)習(xí)微積分一本通(Python版)
- MATLAB GUI純代碼編寫從入門到實(shí)戰(zhàn)
- ABAQUS6.14中文版有限元分析與實(shí)例詳解
- Arduino電子設(shè)計(jì)實(shí)戰(zhàn)指南:零基礎(chǔ)篇
- HTML5移動(dòng)Web開發(fā)