整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          html頁面強制所有鏈接新窗口打開的方法

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

          html頁面強制所有鏈接新窗口打開的代碼

          <base target="_blank">

          將此代碼放到,網頁中的 <head>標簽之內即可實現,當前頁面所有A鏈接新窗口打開

          html <base> 標簽

          <base>:標簽當前頁面上的所有的相對鏈接規定默認 URL 或 默認目標。

          語法:

          <base href="網址" target="打開的方式">

          屬性;

          herf:規定的默認鏈接

          target:鏈接打開的方式,參數有 _blank,_self 等,與A標簽的 target 屬性相同

          例:html頁面所有鏈接強制新窗口打開

          <base target="_blank">

          例:html頁面所有鏈接強制在當前窗口打開

          <base target="_self">

          例:設置默認的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> 標簽使用注意事項

          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 ( )函數,完成整個操作。


          主站蜘蛛池模板: 伊人久久精品一区二区三区| 综合无码一区二区三区| 亚洲av午夜福利精品一区人妖| 日本精品视频一区二区| 日本午夜精品一区二区三区电影| 国产精品一区不卡| 成人毛片一区二区| 亚洲AV一区二区三区四区| 福利一区二区三区视频在线观看| 久久久久人妻一区精品| 亚洲欧洲一区二区三区| 夜夜爽一区二区三区精品| 国模精品视频一区二区三区| 亚洲日韩精品国产一区二区三区| 亚洲日本一区二区| 色狠狠一区二区三区香蕉| 风间由美性色一区二区三区| 亚洲无人区一区二区三区| 精品一区二区三区免费| 美女一区二区三区| 亚洲视频在线一区二区三区| 亚洲一区二区三区91| 无码国产精品一区二区免费虚拟VR | 亚洲av综合av一区二区三区 | 成人区人妻精品一区二区不卡网站 | 狠狠色成人一区二区三区| 国产精品无码一区二区在线观一| 一区二区三区免费在线观看| 无码人妻精品一区二区三区99不卡 | 国产99久久精品一区二区| 综合无码一区二区三区四区五区| 亚洲AV无码国产精品永久一区| 无码日韩AV一区二区三区| 四虎永久在线精品免费一区二区 | 人妻无码一区二区不卡无码av| 日韩精品一区二区三区老鸭窝 | 无码国产伦一区二区三区视频 | 免费无码A片一区二三区| 国产精品福利一区| av无码人妻一区二区三区牛牛| 精品无码日韩一区二区三区不卡 |