Web Standard Learning: Customizing how links are opened

Source: Internet
Author: User
Tags date end implement return window xmlns domain client
Web|web Standard | link

Recently continued to prepare a new product site, related to the standards of the web and customization, and so on, so do a small link, because before the XHTML1.0 transition standard, target= "_blank" property is a click on the link after a new window pop-up method, However, the target attribute is no longer supported by the XHTML1.0 strict standard and XHTML1.1, which means no more target= "_blank" to pop up a new window! This example explores the method of ejecting a new window under the XHTML1.1 standard and combining cookies to implement a client-side custom pop-up window.

Code:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd XHTML 1.1//en" "Http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Customize how links are opened </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):d Eletecookie (' links ');
}

function Newlinks () {
document.getElementById ("C1"). CHECKED?FC1 (): FC2 ()
function Fc1 () {
linktarget= "_blank";d Ocument.getelementbyid ("cookies_p"). style.display= "Block"}
function Fc2 () {
Linktarget= "";d Ocument.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)? ";p ath=" + Path: "") +
(domain)? ";d omain=" + domain: "") +
(secure)? "; Secure": "");
}

function Deletecookie (name, path, domain) {
if (GetCookie (name)) Document.cookie = name + "=" +
((path)? ";p ath=" + Path: "") +
(domain)? ";d omain=" + 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>
<body >
<div id= "Main" >
<div id= "title" > Customize how the link is opened </div>
<div id= "Property" >
<label>
<input type= "checkbox" id= "C1" value= "checkbox"/>
Open link for new window </label>
<span id= "cookies_p" style= "Display:none" >
<label>
<input type= "checkbox" id= "C2" value= "checkbox"/>
Remember my choice </label></span>
</div>
<div id= "link" >
<p><a href= "http://www.163.com" > NetEase </a></p>
<p><a href= "http://www.sina.com.cn" > Sina </a></p>
<p><a href= "Http://www.microsoft.com/china" > Microsoft China </a></p>
<p><a href= "http://www.blueidea.com" > Blue ideal </a></p>
</div>
<div id= "Copyright" >
Recently because to do a new product Web site, related to the standard and customization, such as the content, so do a small link, because before XHTML1.0 transition standard, target= "_blank" property is to click the link after the new window pop-up method, However, the target attribute is no longer supported by the XHTML1.0 strict standard and XHTML1.1, which means no more target= "_blank" to pop up a new window! This example explores the method of ejecting a new window under the XHTML1.1 standard and combining cookies to implement a client-side custom pop-up window. </div>
<p class= "center" >
<a href= "Http://validator.w3.org/check?uri=referer" ></a></p></div>
</body>

<! DOCTYPE HTML PUBLIC "-//w3c//dtd XHTML 1.1//en" "Http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd ><ptml xmlns=" http://www.w3.org/1999/xhtml "><pead><meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/><title> Customize the way the link is opened </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):d Eletecookie (' Links ');} function Newlinks () {document.getElementById ("C1"). CHECKED?FC1 (): FC2 () function fc1 () {linktarget= "_blank"; document.getElementById ("cookies_p"). style.display= "Block"} function Fc2 () {linktarget= "";d Ocument.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 + "=" + (PA TH)? ";p ath=" + 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" &GT;_UACCT = "ua-97125-1"; Urchintracker ();</script></pead> <body ><div id= "main" > <div id= "title" > Customizing how to open Links </div> <div id= "Property" > &LT;LABEL&G T <input type= "checkbox" id= "C1" value= "checkbox"/> Open link for new window </label> <span id= "cookies_p" style= "disp" Lay:none "> <label> <input type=" checkbox "id=" C2 "value=" checkbox "/> Remember my choice </label></sp an> </div> <div id= "link" > <p><a href= "http://www.163.com" > NetEase </a></p>;p ><a href= "http://www.sina.com.cn" > Sina </a></p> <p><a href= "http://www.microsoft.com" /china "> Microsoft China </a></p> <p><a href=" http://www.blueidea.com "> Blue ideal </a></p> </div> <div id= "copyright" > recently due to do a new product site, involving the standards of the web and customization, and so on, so do a small example of links, due to the XHTML1.0 of the transition standard before target= " The _blank property has always been a way to pop up a new window after clicking on a link, but XHTML1.0 strict standards and XHTML1.1 no longer support the target attribute, which means you can't use target= "_blank" to pop up a new window! This example explores the method of ejecting a new window under the XHTML1.1 standard and combining cookies to implement a client-side custom pop-up window. </div><p class= "center" ><a href= http://validator.w3.org/check?uri=referer "></a></p></div> </body></ptml>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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