E库技术学院--您的网络技术顾问! 网站首页素材图片库设计原稿网页模板网站赏析下载中心明星图库E库论坛  
E库技术学院
设为首页
加入收藏
我要投稿
E库首页学院首页 ┊ 图形图象 ┊ 网页设计 ┊ 网络编程 ┊ 数据库 ┊ 服务器 ┊ 建站技术 ┊ 业界新闻 ┊ 作者专栏 ┊ 常用范文 ┊ 预留栏目
  当前位置:学院首页>>网页设计教程>>Html/Css教程>>WEB标准学习:自定义打开链接的方式
WEB标准学习:自定义打开链接的方式
[ 来源: | 作者: | 时间:2006-7-25 21:38:34 | 浏览:人次 ]
收藏到新浪ViVi收藏到365KEY收藏到我摘 ┊ 双击滚屏 单击停止
 

  最近继续在准备一个新产品的网站,涉及到W3C标准以及自定义等方面的内容,所以做了一个链接小实例,由于在XHTML1.0过渡型标准之前,target="_blank"属性一直是点击链接后弹出新窗口的方法,但是XHTML1.0严格型标准以及XHTML1.1之后就不再支持target属性,也就是说不能再用target="_blank"来弹出一个新的窗口!本实例探讨的就是在XHTML1.1标准下弹出新窗口的方法,并结合Cookies实现客户端自定义弹出新窗口的方法。

  代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>自定义打开链接的方式</title>
<style type="text/css">
<!--
#main {
    width: 600px;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid #006699;
    height: 600px;
}
#title {
    background-color: #006699;
    padding: 10px;
    width: 100%;
    font-family: Verdana, Arial;
    font-size: 16px;
    color: #FFFFFF;
    font-weight: bold;
}
#property {
    margin: 10px;
    border: 1px solid #99CC00;
    height: 24px;
    background-color: #F8FEE9;
    font-size: 12px;
    line-height: 24px;
}
#link {
    margin: 10px;
    border: 1px solid #0099CC;
    background-color: #EFEEFF;
    font-size: 12px;
    height: 366px;
    padding: 20px;
}
#copyright {
    font-size: 12px;
    padding: 20px;
    color: #003333;
    line-height: 16px;
}
img{
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}
.center {
    text-align: center;
}
-->
</style>
<script type="text/javascript">
<!--
function onlinks(){

if(getCookie("links")=="_blank"){
document.getElementById("c1").checked=true;
document.getElementById("c2").checked=true;
newlinks();//dolinks();
}
else{
document.getElementById("c1").checked=false;
document.getElementById("c2").checked=false;
newlinks();//dolinks();
}
}

function dolinks(){
document.getElementById("c2").checked?setCookie('links','_blank',1):deleteCookie('links');
}

function newlinks() {
 document.getElementById("c1").checked?fc1():fc2()
 function fc1(){
 linktarget="_blank";document.getElementById("cookies_p").style.display="block"}
 function fc2(){
 linktarget="";document.getElementById("cookies_p").style.display="none"}

 var anchors = document.getElementsByTagName("a");
 for (var i=0; i<anchors.length; i++) {
   var anchor = anchors[i];
   if (anchor.getAttribute("href"))
     anchor.target = linktarget;
 }
}

function getCookie(name) {
    var start = document.cookie.indexOf( name + "=" );
    var len = start + name.length + 1;
    if ( ( !start ) && ( name != document.cookie.substring( 0, name.length ) ) ) {
        return null;
    }
    if ( start == -1 ) return null;
    var end = document.cookie.indexOf( ";", len );
    if ( end == -1 ) end = document.cookie.length;
    return unescape( document.cookie.substring( len, end ) );
}   

function setCookie( name, value, expires, path, domain, secure ) {
    var today = new Date();
    today.setTime( today.getTime() );
    if ( expires ) {
        expires = expires * 1000 * 60 * 60 * 24;
    }
    var expires_date = new Date( today.getTime() + (expires) );
    document.cookie = name+"="+escape( value ) +
        ( ( expires ) ? ";expires="+expires_date.toGMTString() : "" ) + //expires.toGMTString()
        ( ( path ) ? ";path=" + path : "" ) +
        ( ( domain ) ? ";domain=" + domain : "" ) +
        ( ( secure ) ? ";secure" : "" );
}
   
function deleteCookie( name, path, domain ) {
    if ( getCookie( name ) ) document.cookie = name + "=" +
            ( ( path ) ? ";path=" + path : "") +
            ( ( domain ) ? ";domain=" + domain : "" ) +
            ";expires=Thu, 01-Jan-1970 00:00:01 GMT";
}
-->
</script>
<script src="http://www.google-analytics.com/urchin.js&qu ... /javascript">
</script>
<script type="text/javascript">
_uacct = "UA-97125-1";
urchinTracker();
</script>
</head>
<body onload="onlinks();">
<div id="main">
  <div id="title">自定义打开链接的方式</div>
  <div id="property">
    <label>
    <input type="checkbox" id="c1" value="checkbox" onclick="newlinks();" />
    打开链接为新窗口</label>
    <span id="cookies_p" style="display:none">
    <label>
    <input type="checkbox" id="c2" value="checkbox" onclick="dolinks();" />
    记住我的选择</label></span>
  </div>
  <div id="link">
    <p><a href="http://www.163.com"> 网易</a></p>
    <p><a href="http://www.sina.com.cn"> 新浪</a></p>
    <p><a href="http://www.microsoft.com/china"> 微软中国</a></p>
    <p><a href="http://www.blueidea.com"> 蓝色理想</a></p>
  </div>
  <div id="copyright">
最近由于要做一个新产品网站,涉及到W3C标准以及自定义等方面的内容,所以做了一个链接小实例,由于在XHTML1.0过渡型标准之前,target="_blank"属性一直是点击链接后弹出新窗口的方法,但是XHTML1.0严格型标准以及XHTML1.1之后就不再支持target属性,也就是说不能再用target="_blank"来弹出一个新的窗口!本实例探讨的就是在XHTML1.1标准下弹出新窗口的方法,并结合Cookies实现客户端自定义弹出新窗口的方法。 </div>
<p class="center">
<a href="http://validator.w3.org/check?uri=referer"><imgsrc="http://www.w3.org/Icons/valid-xhtml11&quo ... 31"width="88"/></a></p></div>
</body>
</html>

 [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

“WEB标准学习:自定义打开链接的方式”教程到此结束==>||
 相关教程
☉暂无相关教程
特别声明: 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员,我们尽快予以更正。

投稿作者:  信息来源:  录入时间: 2006-7-25 21:38:34
投稿信箱: web#iecool.com
设为首页 - 加入收藏 - 关于我们 - 广告服务 - 版权申明 - 友情链接 - 联系方式 - 会员投稿
E库技术学院 © 2004-2005 Edu.IEcool.Com  浙ICP备05015070号