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

午接到博客訪客的反饋，表示博客中的鏈接在原窗口打開的話，網(wǎng)站的體驗(yàn)非常的不好，而自己又懶的一個(gè)個(gè)去修改博客網(wǎng)頁中的鏈接打開方式，就加了一個(gè)強(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)前頁面上的所有的相對(duì)鏈接規(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">我是相對(duì)鏈接，我可以打開 https://www.feiniaomy.com/post/1.html</a>
 <a href="http://www.baidu.com">我是絕對(duì)鏈接,我可以打開 http://www.baidu.com</a>
</body>
</html>

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

1、一個(gè)頁面中，<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)簽

近有同學(xué)私信我看一個(gè)看起來還挺有趣的效果，問我怎么做，我大概的模仿了一下，當(dāng)然原效果是有動(dòng)畫的，我這里只是簡(jiǎn)單用圖片來模仿一下，思路其實(shí)是差不多的。

大家現(xiàn)在可以看到我打開了一個(gè)瀏覽器窗口，里面有一張圖片，我給它再打開一個(gè)窗口，同樣也是這個(gè)頁面，然后我把這個(gè)窗口拖出來，非常神奇的一件事情，這兩個(gè)窗口的這張圖片竟然可以交匯融合起來，可以融合成一張圖片，我給它再打開一個(gè)，再拖出來，很厲害對(duì)吧？三個(gè)窗口里面的這張圖片都可以交匯融合起來，無論你拖到任何位置，它們都可以合成一張圖片。

這個(gè)效果光是這樣子來看，好像還挺厲害的，這些窗口之間好像有一定的聯(lián)系和交互，像這一個(gè)它是怎么樣做到的？其實(shí)這個(gè)非常非常簡(jiǎn)單，我們用JS來做就幾句JS代碼就可以搞定了，html非常簡(jiǎn)單，就一個(gè)點(diǎn)，然后就是背景圖片和定位，就這么多，現(xiàn)在就這么一個(gè)圖片，然后我們來分析一下思路。

·首先我們?cè)谝苿?dòng)這些窗口的過程中，要保證每個(gè)窗口的圖片可以融合在一起，要確保一點(diǎn)，就是你窗口可以動(dòng)，但是圖片你給我保持在原地不動(dòng)，那要怎么樣可以做得到這點(diǎn)窗口移動(dòng)但是圖片還保持在原來的位置呢？也很簡(jiǎn)單，因?yàn)榇翱谝苿?dòng)的這個(gè)距離，無論是水平方向的距離，還是垂直方向的距離，都是可以通過JS獲取到的。

本來你這個(gè)圖片，要跟著這個(gè)窗口一起移動(dòng)這個(gè)距離，但是我們可以通過定位，讓這個(gè)圖片再回退返回同樣的距離，那這個(gè)圖片它是不是就還保留在原地了，OK思路出來，那就非常簡(jiǎn)單了。

·來寫一下JS，先來獲取一下這個(gè)對(duì)象，C，S上面我是定義了兩個(gè)變量，等一下用來更改這個(gè)圖片位置的，等一下要修改TOP left的位置。

·回到JS我們來寫一個(gè)專門用來更新位置的函數(shù)，我們可以用setProperty這個(gè)方法，setProperty用來設(shè)置更新剛才我們?cè)O(shè)置的這個(gè)變量，這個(gè)變量就用它來保存拖動(dòng)窗口的時(shí)候窗口水平方向移動(dòng)的距離。這里面是可以通過window.screenX屬性值獲取到的，垂直方向移動(dòng)的距離也一樣可以獲取到。

·再回到CSS，讓圖片往回跑相同的距離就可以了。這里就用一個(gè)calculate計(jì)算的函數(shù)，讓它減去窗口移動(dòng)的距離，水平方向的計(jì)算是一樣的。

·剩下的就是怎么樣讓瀏覽器去監(jiān)測(cè)窗口的位置有沒有發(fā)生變化，不斷地去更新設(shè)置這兩個(gè)變量的值。這里可以開個(gè)定時(shí)器，又或者直接用requestAnimationFrameAPI把update函數(shù)傳進(jìn)去，在函數(shù)里面也要調(diào)用一下。這里的作用和開定時(shí)器是一樣的，只不過性能方面可能會(huì)好一點(diǎn)。

現(xiàn)在這個(gè)功能其實(shí)就已經(jīng)完成了，是不是非常簡(jiǎn)單？就這么幾句JS的代碼，來看一下效果。再來打開一個(gè)窗口，把窗口拖出來，沒有問題，可以交匯融合起來，沒有問題，再給它多開一個(gè)，效果是一樣的。

思路就是這樣的，這個(gè)視頻就先到這里，感謝大家的收看。

頁可見區(qū)域?qū)挘篸ocument.body.clientWidth

網(wǎng)頁可見區(qū)域高：document.body.clientHeight

網(wǎng)頁可見區(qū)域?qū)挘篸ocument.body.offsetWidth (包括邊線的寬)

網(wǎng)頁可見區(qū)域高：document.body.offsetHeight (包括邊線的寬)

網(wǎng)頁正文全文寬：document.body.scrollWidth

網(wǎng)頁正文全文高：document.body.scrollHeight

網(wǎng)頁被卷去的高：document.body.scrollTop

網(wǎng)頁被卷去的左：document.body.scrollLeft

網(wǎng)頁正文部分上：window.screenTop

網(wǎng)頁正文部分左：window.screenLeft

屏幕分辨率的高：window.screen.height

屏幕分辨率的寬：window.screen.width

屏幕可用工作區(qū)高度：window.screen.availHeight

屏幕可用工作區(qū)寬度：window.screen.availWidth

HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

scrollHeight: 獲取對(duì)象的滾動(dòng)高度。

scrollLeft:設(shè)置或獲取位于對(duì)象左邊界和窗口中目前可見內(nèi)容的最左端之間的距離

scrollTop:設(shè)置或獲取位于對(duì)象最頂端和窗口中可見內(nèi)容的最頂端之間的距離

scrollWidth:獲取對(duì)象的滾動(dòng)寬度

offsetHeight:獲取對(duì)象相對(duì)于版面或由父坐標(biāo) offsetParent 屬性指定的父坐標(biāo)的高度

offsetLeft:獲取對(duì)象相對(duì)于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算左側(cè)位置

offsetTop:獲取對(duì)象相對(duì)于版面或由 offsetTop 屬性指定的父坐標(biāo)的計(jì)算頂端位置

event.clientX 相對(duì)文檔的水平座標(biāo)

event.clientY 相對(duì)文檔的垂直座標(biāo)

event.offsetX 相對(duì)容器的水平坐標(biāo)

event.offsetY 相對(duì)容器的垂直坐標(biāo)

document.documentElement.scrollTop 垂直方向滾動(dòng)的值

event.clientX+document.documentElement.scrollTop 相對(duì)文檔的水平座標(biāo)+垂直方向滾動(dòng)的量

IE，F(xiàn)ireFox 差異如下：

IE6.0、FF1.06+：

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5：

clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(需要提一下：CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight均無關(guān))

網(wǎng)頁可見區(qū)域?qū)挘?document.body.clientWidth

網(wǎng)頁可見區(qū)域高： document.body.clientHeight

網(wǎng)頁可見區(qū)域?qū)挘?document.body.offsetWidth (包括邊線的寬)

網(wǎng)頁可見區(qū)域高： document.body.offsetHeight (包括邊線的高)

網(wǎng)頁正文全文寬： document.body.scrollWidth

網(wǎng)頁正文全文高： document.body.scrollHeight

網(wǎng)頁被卷去的高： document.body.scrollTop

網(wǎng)頁被卷去的左： document.body.scrollLeft

網(wǎng)頁正文部分上： window.screenTop

網(wǎng)頁正文部分左： window.screenLeft

屏幕分辨率的高： window.screen.height

屏幕分辨率的寬： window.screen.width

屏幕可用工作區(qū)高度： window.screen.availHeight

屏幕可用工作區(qū)寬度： window.screen.availWidth

－－－－－－－－－－－－－－－－－－－

技術(shù)要點(diǎn)

本節(jié)代碼主要使用了Document對(duì)象關(guān)于窗口的一些屬性，這些屬性的主要功能和用法如下。

要得到窗口的尺寸，對(duì)于不同的瀏覽器，需要使用不同的屬性和方法：若要檢測(cè)窗口的真實(shí)尺寸，在Netscape下需要使用Window的屬性；在IE下需要深入Document內(nèi)部對(duì)body進(jìn)行檢測(cè)；在DOM環(huán)境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。

Window對(duì)象的innerWidth屬性包含當(dāng)前窗口的內(nèi)部寬度。Window對(duì)象的innerHeight屬性包含當(dāng)前窗口的內(nèi)部高度。

Document對(duì)象的body屬性對(duì)應(yīng)HTML文檔的標(biāo)簽。Document對(duì)象的documentElement屬性則表示HTML文檔的根節(jié)點(diǎn)。

document.body.clientHeight表示HTML文檔所在窗口的當(dāng)前高度。document.body. clientWidth表示HTML文檔所在窗口的當(dāng)前寬度。

實(shí)現(xiàn)代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>請(qǐng)調(diào)整瀏覽器窗口</title>

</head>

<body>

<h2 align="center">請(qǐng)調(diào)整瀏覽器窗口大小</h2><hr>

瀏覽器窗口的實(shí)際高度: <input type="text" name="availHeight" size="4"><br>

瀏覽器窗口的實(shí)際寬度: <input type="text" name="availWidth" size="4"><br>

</form>

<!--

var winWidth = 0;

var winHeight = 0;

function findDimensions() //函數(shù)：獲取尺寸

{

//獲取窗口寬度

if (window.innerWidth)

winWidth = window.innerWidth;

else if ((document.body) && (document.body.clientWidth))

winWidth = document.body.clientWidth;

//獲取窗口高度

if (window.innerHeight)

winHeight = window.innerHeight;

else if ((document.body) && (document.body.clientHeight))

winHeight = document.body.clientHeight;

//通過深入Document內(nèi)部對(duì)body進(jìn)行檢測(cè)，獲取窗口大小

if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)

{

winHeight = document.documentElement.clientHeight;

winWidth = document.documentElement.clientWidth;

}

//結(jié)果輸出至兩個(gè)文本框

document.form1.availHeight.value= winHeight;

document.form1.availWidth.value= winWidth;

}

findDimensions();

//調(diào)用函數(shù)，獲取數(shù)值

window.onresize=findDimensions;

//-->

</script>

</body>

</html>

源程序解讀

（1）程序首先建立一個(gè)表單，包含兩個(gè)文本框，用于顯示窗口當(dāng)前的寬度和高度，并且，其數(shù)值會(huì)隨窗口大小的改變而變化。

（2）在隨后的JavaScript代碼中，首先定義了兩個(gè)變量winWidth和winHeight，用于保存窗口的高度值和寬度值。

（3）然后，在函數(shù)findDimensions ( )中，使用window.innerHeight和window.innerWidth得到窗口的高度和寬度，并將二者保存在前述兩個(gè)變量中。

（4）再通過深入Document內(nèi)部對(duì)body進(jìn)行檢測(cè)，獲取窗口大小，并存儲(chǔ)在前述兩個(gè)變量中。

（5）在函數(shù)的最后，通過按名稱訪問表單元素，結(jié)果輸出至兩個(gè)文本框。

（6）在JavaScript代碼的最后，通過調(diào)用findDimensions ( )函數(shù)，完成整個(gè)操作。

在線咨詢

上一篇：2分鐘了解 HTML 的基本結(jié)構(gòu)和語法規(guī)則
下一篇：網(wǎng)頁切圖過程中div+css命名規(guī)則

您的項(xiàng)目需求

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

整合營(yíng)銷服務(wù)商