熟悉 WEB 标准的朋友都知道,在 XHTML-Strict 模式下,不能给链接设置 target 属性,但是,通常我们都希望外部链接(非本站链接)能够在新窗口打开,如何解决这个冲突呢?本文给出了一个解决方法,希望对您有用!
在 XHTML-Strict 模式下实现新窗口打开外部链接 – 示例
本文的解决方法是在页面加载完成后先用 document.getElementsByTagName(‘a’) 获取页面上所有链接,然后通过搜索链接中是否包含站点 URL ,如果不包含,就说明是外部链接,这时,我们可以通过设置 setAttribute(‘target’, ‘_blank’); 来达到在新窗口打开的目的。
<script type="text/javascript"> <!-- // 说明:在 XHTML-Strict 模式下实现新窗口打开外部链接 // 作者:CodeBit.cn // 链接:http://www.codebit.cn function setExternalLinkTarget() { // 从当前 url 中解析主机名 var locationMatch = document.location.href.match(/^(http://)?([^/]+)/i); // 设置站点链接 var siteUrl = locationMatch[2]; // 获取页面上所有链接 var allLinks = document.getElementsByTagName('a'); var len = allLinks.length; if(len > 0) { var externalLink; for(i=0; i<len; i++) { // 设置当前链接 externalLink = allLinks[i]; // 如果链接 href 里面没有发现站点链接(外部链接) if (externalLink.href.indexOf(siteUrl) == -1) { // 设置 target 属性 externalLink.setAttribute('target', '_blank'); } } } } window.onload = function() { setExternalLinkTarget(); } //--> </script>
看起来不错,不过其中是否需要Css实现,希望给出的代码能复制却可运行
本站新改版,使用了 JS 版的代码高亮工具 SyntaxHighlighter , 现在代码都可以直接复制了。欢迎常来转转!