如何用JavaScript創(chuàng)建彈出窗口

擊右上方紅色按鈕關(guān)注“小鄭搞碼事”，每天都能學(xué)到知識，搞懂一個問題！

大家好！我是/小鄭搞碼事/的小鄭

今天和大家分享一下JS如何操作瀏覽器窗口。只講如何打開一個新窗口

先來看效果圖

上面這個圖界面效果就是我們要實(shí)現(xiàn)的。

我們常常需要創(chuàng)建一個新窗口，用來向用戶顯示額外的信息，同時又避免他們正在閱讀的信息消失。從實(shí)現(xiàn)方案上來看，盡管我們可以用HTML打開一個新的瀏覽器窗口，但是使用JavaScript可以對新窗口的內(nèi)容和特性進(jìn)行更多的控制。

接下來，我們看一下怎么實(shí)現(xiàn)的

一、定義窗口打開函數(shù)

定義一個打開新窗口的函數(shù)newWindow。如上面代碼所示，變量catWindow包含一個新的窗口對象，這個對象引用圖像文件icon.png，這個新窗口的名稱是catWin，必須設(shè)置名稱，因?yàn)槲覀円院罂赡芟Ｍ赼或另一個腳本中引用這個窗口。新窗口的寬度是350像素，高度是260像素，位置是左邊400，上邊400。

二、寫一個調(diào)用函數(shù)

頁面中，包含一個onload事件處理程序，它調(diào)用newWinLinks函數(shù)，newWinLinks循環(huán)遍歷頁面上的a，檢查是否有任何a包含class屬性值newWin。如果有，就設(shè)置這個a元素的onclick事件處理程序，從而，當(dāng)點(diǎn)擊這個a時，調(diào)用newWindow函數(shù)。

總結(jié)一下

需要注意兩個地方：

1、newWindow中，在寬度和高度參數(shù)中的逗號之間不能有任何空格，如果有空格，那么腳本可能在某些瀏覽器中無效，總地來說，當(dāng)腳本出現(xiàn)錯誤，需要進(jìn)行高度時，要首先查找這樣的小問題。

2、比如向窗口中添加參數(shù)時，希望窗口具有工具欄，地址欄，滾動條

toolbar=yes,location=yes,scrollbars=yes

參數(shù)默認(rèn)是no，可以不填。當(dāng)然瀏覽器上表現(xiàn)也有不同，需要知道。

午接到博客訪客的反饋，表示博客中的鏈接在原窗口打開的話，網(wǎng)站的體驗(yàn)非常的不好，而自己又懶的一個個去修改博客網(wǎng)頁中的鏈接打開方式，就加了一個強(qiáng)制頁面所有鏈接新窗口打開的代碼，一招解決問題。

html頁面強(qiáng)制所有鏈接新窗口打開的代碼

<base target="_blank">

將此代碼放到，網(wǎng)頁中的 <head>標(biāo)簽之內(nèi)即可實(shí)現(xiàn)，當(dāng)前頁面所有A鏈接新窗口打開

html <base> 標(biāo)簽

<base>：標(biāo)簽當(dāng)前頁面上的所有的相對鏈接規(guī)定默認(rèn) URL 或默認(rèn)目標(biāo)。

語法：

<base href="網(wǎng)址" target="打開的方式">

屬性;

herf：規(guī)定的默認(rèn)鏈接

target：鏈接打開的方式，參數(shù)有 _blank，_self 等，與A標(biāo)簽的 target 屬性相同

例：html頁面所有鏈接強(qiáng)制新窗口打開

<base target="_blank">

例：html頁面所有鏈接強(qiáng)制在當(dāng)前窗口打開

<base target="_self">

例：設(shè)置默認(rèn)的URL

<!DOCTYPE html>
<html lang="en">
<head>
 <base href="https://www.feiniaomy.com" target="_blank">
 <title>Document</title>
</head>
<body>
 <a href="/post/1.html">我是相對鏈接，我可以打開 https://www.feiniaomy.com/post/1.html</a>
 <a href="http://www.baidu.com">我是絕對鏈接,我可以打開 http://www.baidu.com</a>
</body>
</html>

<base> 標(biāo)簽使用注意事項(xiàng)

1、一個頁面中，<base> 標(biāo)簽只能出現(xiàn)一次

2、<base> 標(biāo)簽只能在 <head></head>標(biāo)簽中出現(xiàn)

3、<base> 屬于單標(biāo)簽，沒有結(jié)束標(biāo)簽，類似 <img> 標(biāo)簽

單擊帶有超鏈接的文件時，超鏈接的內(nèi)容有多種，打開方式，如替換當(dāng)前頁打開，在新窗口打開等。而用來指定打開方式的是＜a>標(biāo)簽的target屬性。

如果在一個<a>標(biāo)簽內(nèi)容含一個target屬性，瀏覽器將會載入和顯示用這個標(biāo)簽的href屬性命名的、名稱與這個目標(biāo)吻合的框架或者窗口中的文檔。如果這個指定名稱或id的框架或者窗口不存在，瀏覽器將打開一個新窗口，并給這個窗口一個指定的標(biāo)記，然后將新的文檔載入那個窗口。從此以后，超鏈接文檔就可以指向這個新的窗口。

target屬性的代碼格式如下：

其中value有四個參數(shù)可用，這4個保留的目標(biāo)名稱用作特殊的文檔重定向操作。

（1）-blank。瀏覽器總在一個新打開、未命名的窗口中載入目標(biāo)文檔。

（2）-self。這個目標(biāo)的值對所有未指定目標(biāo)的<a>標(biāo)簽是默認(rèn)目標(biāo)，使得目標(biāo)文檔載入并顯示在相同的框架或者窗口中作為源文檔。這個目標(biāo)是多余且不必要的，除非和文檔標(biāo)題 <base>標(biāo)簽中的target屬性一起使用。

（3）-parent。這個目標(biāo)使得文檔載入父窗口或者包含超鏈接引用的框架的框架集。如果這個引用是在窗口或者頂級框架中，那么它與目標(biāo)-self等效。

（4）-top。這個目標(biāo)使的文檔載入包含這個超鏈接的窗口，用-tap目標(biāo)將會清除所有被包含的框架并將文檔載入整個瀏覽器窗口。

小提示：這些target的所有4個值都以下劃線開始。任何其他用一個下劃線作為開頭的窗口或者目標(biāo)都會被瀏覽器忽略，因此，不要將下劃線作為文檔中定義的任何框架name或id的第一個字符。

下面舉例說明target屬性的使用方法。

(1)編寫代碼如下圖所示：

（2）在瀏覽器中打開文件，預(yù)覽效果如下所示：

（3）單擊超鏈接，在新窗口打開連接頁面，下圖所示

（4）修改代碼并單擊鏈接。

將“-blank”換成“-self”，即代碼修改為“<a target="_self">新浪</a>”，單擊鏈接后，直接在當(dāng)前窗口打開新鏈接，如圖所示：

在線咨詢

上一篇：開源精粹（第四期）！CSS+JS實(shí)現(xiàn)的文字伸縮炫彩動畫，真炫酷
下一篇：超贊 vue2/3 可視化打印設(shè)計VuePluginPrint

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商