江苏SEO

资料来源：网络文/佚名

Let visitors decide whether or not will they open link in a new window

让用户决定是在打开链接的时候是以新窗口打开或当前窗口打开。

JS部分代码如下：<SCRIPT type=text/javascript>    // <![CDATA[      /************************************************        New window link        by Marko Dugonjic, http://www.maratz.com/      *************************************************/      // Config:      var path_to_icon     = 'icon.gif',        link_alt_text     = '(Open in new window?)',        link_title_text   = 'Open this link in new window!';              function new_window_link() {        var d   = document,          dn   = d.domain;                  if (!d.getElementById || !d.createTextNode || !dn) return;                var l = d.getElementsByTagName('a'),          lnk,          i = l.length - 1;                while (i--) {                    lnk = l[i];                    // skip mailto links          if (lnk.href.match(/^mailto:/)) continue;          // just for off-site links and links without target attribute          if (lnk.href.split('/')[2].replace(/www\./, '') != dn.replace(/www\./, '')            && !lnk.getAttribute('target')) {            // create new elements            var nwl     = d.createElement('a');            var nwi     = d.createElement('img');            var spc     = d.createTextNode(' ');            // setup image attributes            nwi.setAttribute('src',   path_to_icon);            nwi.setAttribute('alt',   link_alt_text);            nwi.setAttribute('title',   link_title_text);            // set link attributes            nwl.setAttribute('href',   lnk.getAttribute('href'));            nwl.setAttribute('target',   '_blank');            nwl.setAttribute('title',   link_title_text);            nwl.className = 'new_window_link';            // append new elements            nwl.appendChild(nwi);            lnk.parentNode.insertBefore(spc, lnk.nextSibling);            lnk.parentNode.insertBefore(nwl, lnk.nextSibling.nextSibling);          }                  }      }      onload = new_window_link;    // ]]>  </SCRIPT>
提示：您可以先修改部分代码再运行

In the old days of webmasters, target attribute provided control of browsers’ behavior. Web sites were breaking natural flow of the user’s travel from site to site. Users couldn’t go back even if they wanted to and they had difficulties following relations between sites. But webmasters and site owners were afraid that users will forget about their web sites and it was better that the site resides somewhere in the background. The fear of the site owners was justified, as their sometimes pretty poor content couldn’t keep users focused and users often went away in search for relevant content.

Many internet-savvy people expected that the off-site link (link to some other web site) will open in new window. More than often too many windows covered their desktops, so internet-savvy people started using better browsers. Those had some advanced options and were able to give control over the browser back to users. In the mean time, the W3C, which already advised separation of structure, presentation and behavior in a web page, removed all traces of behavior layer from XHTML specs and forced webmasters to find other ways...

Contemporary web professionals use JavaScript to control behavior layer of a web document. Some authors wrote about how to place target attribute to links with DOM. Other authors provided option for a user to decide (examples: 1, 2). Some authors found ways to label links according to file type the link points at. It was a matter of time when some authors will innovate a way to add Open in New Window link after every link in a document.

The Open in New Window link points to the same URL like the original, default link, but opens the page in a new window. It is created with DOM method document.createElement, which is well known in DOM experts’ circles. Example of using this method could be found in this page’s source. If one would be more interested in other DOM methods and examples, she would read some (if not all) of the following articles:

• Unobtrusive JavaScript
• DHTML Utopia: Modern Web Design Using JavaScript & DOM
• Client Side Coding : JavaScript & DHTML Tutorials
• DOM scripting Health and Safety
• JavaScript-enhanced image replacement
• Enhanced Form Widgets
• Reading out the “for” attribute via Javascript
• Fancy <select>s

    原文地址：http://webdesign.maratz.com/lab/new_window_link

版权声明：本文属转载作品，版权属原作者所有。

本文链接地址：http://www.demoseo.com/DemoSeo/Let-visitors-decide-open-way.html
如果你也喜欢本文，记得顶一下，支持我。你的支持是我继续发好文章的最大动力！谢谢！