网站地图    收藏   

主页 > 前端 > javascript >

Javascript控制网站链接是否新窗口打开

来源:自学PHP网    时间:2014-09-19 14:47 作者: 阅读:

[导读] 我们这里是介绍在js中直接利用js来而控制页面是否打开新窗口或直接不打开,这个我在很多可以点击设置在新窗口打开或当前窗口打开,下面我来给各位介绍实现此功能的具体方法。...

不过在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,到此结束。这样就能判断本站链接就在当前窗口打开,站外链接就在新窗口打开了。

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论