整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
午接到博客訪客的反饋，表示博客中的鏈接在原窗口打開的話，網站的體驗非常的不好，而自己又懶的一個個去修改博客網頁中的鏈接打開方式，就加了一個強制頁面所有鏈接新窗口打開的代碼，一招解決問題。
<base target="_blank">
將此代碼放到，網頁中的 <head>標簽之內即可實現，當前頁面所有A鏈接新窗口打開
<base>：標簽當前頁面上的所有的相對鏈接規定默認 URL 或 默認目標。
語法：
<base href="網址" target="打開的方式">
屬性;
herf：規定的默認鏈接
target：鏈接打開的方式，參數有 _blank，_self 等，與A標簽的 target 屬性相同
<base target="_blank">
<base target="_self">
<!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>
1、一個頁面中，<base> 標簽只能出現一次
2、<base> 標簽只能在 <head></head>標簽中出現
3、<base> 屬于單標簽，沒有結束標簽，類似 <img> 標簽
近有同學私信我看一個看起來還挺有趣的效果，問我怎么做，我大概的模仿了一下，當然原效果是有動畫的，我這里只是簡單用圖片來模仿一下，思路其實是差不多的。
大家現在可以看到我打開了一個瀏覽器窗口，里面有一張圖片，我給它再打開一個窗口，同樣也是這個頁面，然后我把這個窗口拖出來，非常神奇的一件事情，這兩個窗口的這張圖片竟然可以交匯融合起來，可以融合成一張圖片，我給它再打開一個，再拖出來，很厲害對吧？三個窗口里面的這張圖片都可以交匯融合起來，無論你拖到任何位置，它們都可以合成一張圖片。
這個效果光是這樣子來看，好像還挺厲害的，這些窗口之間好像有一定的聯系和交互，像這一個它是怎么樣做到的？其實這個非常非常簡單，我們用JS來做就幾句JS代碼就可以搞定了，html非常簡單，就一個點，然后就是背景圖片和定位，就這么多，現在就這么一個圖片，然后我們來分析一下思路。
·首先我們在移動這些窗口的過程中，要保證每個窗口的圖片可以融合在一起，要確保一點，就是你窗口可以動，但是圖片你給我保持在原地不動，那要怎么樣可以做得到這點窗口移動但是圖片還保持在原來的位置呢？也很簡單，因為窗口移動的這個距離，無論是水平方向的距離，還是垂直方向的距離，都是可以通過JS獲取到的。
本來你這個圖片，要跟著這個窗口一起移動這個距離，但是我們可以通過定位，讓這個圖片再回退返回同樣的距離，那這個圖片它是不是就還保留在原地了，OK思路出來，那就非常簡單了。
·來寫一下JS，先來獲取一下這個對象，C，S上面我是定義了兩個變量，等一下用來更改這個圖片位置的，等一下要修改TOP left的位置。
·回到JS我們來寫一個專門用來更新位置的函數，我們可以用setProperty這個方法，setProperty用來設置更新剛才我們設置的這個變量，這個變量就用它來保存拖動窗口的時候窗口水平方向移動的距離。這里面是可以通過window.screenX屬性值獲取到的，垂直方向移動的距離也一樣可以獲取到。
·再回到CSS，讓圖片往回跑相同的距離就可以了。這里就用一個calculate計算的函數，讓它減去窗口移動的距離，水平方向的計算是一樣的。
·剩下的就是怎么樣讓瀏覽器去監測窗口的位置有沒有發生變化，不斷地去更新設置這兩個變量的值。這里可以開個定時器，又或者直接用requestAnimationFrameAPI把update函數傳進去，在函數里面也要調用一下。這里的作用和開定時器是一樣的，只不過性能方面可能會好一點。
現在這個功能其實就已經完成了，是不是非常簡單？就這么幾句JS的代碼，來看一下效果。再來打開一個窗口，把窗口拖出來，沒有問題，可以交匯融合起來，沒有問題，再給它多開一個，效果是一樣的。
思路就是這樣的，這個視頻就先到這里，感謝大家的收看。
頁可見區域寬：document.body.clientWidth
網頁可見區域高：document.body.clientHeight
網頁可見區域寬：document.body.offsetWidth (包括邊線的寬)
網頁可見區域高：document.body.offsetHeight (包括邊線的寬)
網頁正文全文寬：document.body.scrollWidth
網頁正文全文高：document.body.scrollHeight
網頁被卷去的高：document.body.scrollTop
網頁被卷去的左：document.body.scrollLeft
網頁正文部分上：window.screenTop
網頁正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的寬：window.screen.width
屏幕可用工作區高度：window.screen.availHeight
屏幕可用工作區寬度：window.screen.availWidth
HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 獲取對象的滾動高度。
scrollLeft:設置或獲取位于對象左邊界和窗口中目前可見內容的最左端之間的距離
scrollTop:設置或獲取位于對象最頂端和窗口中可見內容的最頂端之間的距離
scrollWidth:獲取對象的滾動寬度
offsetHeight:獲取對象相對于版面或由父坐標 offsetParent 屬性指定的父坐標的高度
offsetLeft:獲取對象相對于版面或由 offsetParent 屬性指定的父坐標的計算左側位置
offsetTop:獲取對象相對于版面或由 offsetTop 屬性指定的父坐標的計算頂端位置
event.clientX 相對文檔的水平座標
event.clientY 相對文檔的垂直座標
event.offsetX 相對容器的水平坐標
event.offsetY 相對容器的垂直坐標
document.documentElement.scrollTop 垂直方向滾動的值
event.clientX+document.documentElement.scrollTop 相對文檔的水平座標+垂直方向滾動的量
IE，FireFox 差異如下：
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均無關)
網頁可見區域寬： document.body.clientWidth
網頁可見區域高： document.body.clientHeight
網頁可見區域寬： document.body.offsetWidth (包括邊線的寬)
網頁可見區域高： document.body.offsetHeight (包括邊線的高)
網頁正文全文寬： document.body.scrollWidth
網頁正文全文高： document.body.scrollHeight
網頁被卷去的高： document.body.scrollTop
網頁被卷去的左： document.body.scrollLeft
網頁正文部分上： window.screenTop
網頁正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的寬： window.screen.width
屏幕可用工作區高度： window.screen.availHeight
屏幕可用工作區寬度： window.screen.availWidth
－－－－－－－－－－－－－－－－－－－
技術要點
本節代碼主要使用了Document對象關于窗口的一些屬性，這些屬性的主要功能和用法如下。
要得到窗口的尺寸，對于不同的瀏覽器，需要使用不同的屬性和方法：若要檢測窗口的真實尺寸，在Netscape下需要使用Window的屬性；在IE下需要 深入Document內部對body進行檢測；在DOM環境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。
Window對象的innerWidth屬性包含當前窗口的內部寬度。Window對象的innerHeight屬性包含當前窗口的內部高度。
Document對象的body屬性對應HTML文檔的標簽。Document對象的documentElement屬性則表示HTML文檔的根節點。
document.body.clientHeight表示HTML文檔所在窗口的當前高度。document.body. clientWidth表示HTML文檔所在窗口的當前寬度。
實現代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>請調整瀏覽器窗口</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<body>
<h2 align="center">請調整瀏覽器窗口大小</h2><hr>
<form action="#" method="get" name="form1" id="form1">
<!--顯示瀏覽器窗口的實際尺寸-->
瀏覽器窗口 的 實際高度: <input type="text" name="availHeight" size="4"><br>
瀏覽器窗口 的 實際寬度: <input type="text" name="availWidth" size="4"><br>
</form>
<script type="text/javascript">
<!--
var winWidth = 0;
var winHeight = 0;
function findDimensions() //函數：獲取尺寸
{
//獲取窗口寬度
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內部對body進行檢測，獲取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//結果輸出至兩個文本框
document.form1.availHeight.value= winHeight;
document.form1.availWidth.value= winWidth;
}
findDimensions();
//調用函數，獲取數值
window.onresize=findDimensions;
//-->
</script>
</body>
</html>
源程序解讀
（1）程序首先建立一個表單，包含兩個文本框，用于顯示窗口當前的寬度和高度，并且，其數值會隨窗口大小的改變而變化。
（2）在隨后的JavaScript代碼中，首先定義了兩個變量winWidth和winHeight，用于保存窗口的高度值和寬度值。
（3）然后，在函數findDimensions ( )中，使用window.innerHeight和window.innerWidth得到窗口的高度和寬度，并將二者保存在前述兩個變量中。
（4）再通過深入Document內部對body進行檢測，獲取窗口大小，并存儲在前述兩個變量中。
（5）在函數的最后，通過按名稱訪問表單元素，結果輸出至兩個文本框。
（6）在JavaScript代碼的最后，通過調用findDimensions ( )函數，完成整個操作。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
