首頁 > 開發者 > JavaScript

Javascript控制網站連結是否新視窗開啟

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

不過在w3c的驗證標準中，target="_blank" 這個屬性是不被驗證通過的

原因是那些磚家認為不經過使用者同意就開啟一個新視窗，這樣的行為屬於強X了使用者的思想。是不友好，不禮貌的行為。所以標準提出的是用 rel="external"來聲明，配合一個external.js來實現。在這裡貼一下這個js檔案的代碼，需要的朋友拿走。

 代碼如下 複製代碼

function externallinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "external nofollow")
anchor.target = "_blank";
}
}
window.onload = externallinks;

不過上面這些不是本文的主要內容，這裡我主要介紹一種新方法：

通過js實現使用者自主選擇是否在新視窗開啟連結：此代碼可以記錄cookie，儲存365天。即使用者選擇一次，在不刪除cookie的情況下會儲存此設定一定時間。

下面看代碼即示範：(建議另存新檔html檔案運行，這樣方便查看cookie情況)

 代碼如下 複製代碼

<html>
<head>
<script type="text/javascript">
window.onload=checkCookie;
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}

function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : "; expires="+exdate.toGMTString())
}

function checkCookie()
{
target=getCookie('target')
if (target!=null && target=="true")
  {
 document.getElementById("checkit").checked=true;
 openStyle("_blank");
  }
else
  {
 if (target!=null && target=="false")
 {document.getElementById("checkit").checked=false;
 openStyle("");}
  }
}

function openStyle(choice){
 var links = document.getElementsByTagName("a");
 for(var i=0;i<links.length;i++){
   links[i].target = choice;
 }
}
function setCheck(obj){
 if(obj.checked)
 {
  openStyle("_blank");
  setCookie('target','true',365);
 }
 else{
  openStyle("");
  setCookie('target','false',365);
 }
}
</script>
</head>
<body>

<input type="checkbox" id="checkit" onclick="setCheck(this);" />選擇是否在新視窗開啟<br/>
<a href="http://www.111cn.net" >baidu</a><br/>
<a href="http://www.111cn.net" >安卓主題</a>
</body>
</html>


進階進階部分：可自由設定站內站外連結是否新視窗開啟如果一些朋友需要設定站內的連結就在本視窗開啟，站外的連結全部是新視窗，怎麼辦呢？

首先添加代碼：

 代碼如下 複製代碼

var index=location.hostname; //擷取當前主域

然後修改openStyle函數為：

 代碼如下 複製代碼
function openStyle(choice){
var links = document.getElementsByTagName("a");
for(var i=0;i<links.length;i++){
if(links[i].href.indexOf(index)==-1 && links[i].href.indexOf('javascript') == -1){
links[i].target = choice;
}
}
}

ok，到此結束。這樣就能判斷本站連結就在當前視窗開啟，站外連結就在新視窗開啟了。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More