426 字3 分钟

打开链接，在新窗口还是同一窗口

2007-07-04更新于 2014-09-12设计开发#JavaScript

刚才在PCHome 下载频道找东西，发现首页底部有个“不打开新窗口”，选中后打开链接就不是在新窗口打开了……

觉得挺有意思的，就研究了一下，现在分析源代码，教你把它用在自己的网页上！

STEP 1

首先，在 </head> 上发现这样一句代码，加载了一个 JavaScript 文件：

1
<script type="text/javascript" src="http://images.pchome.net/global/js/external.js"></script>

这里就不提供这个文件的下载了，如果有需要直接到上面的地址下载（右键 - 目标另存为）；

STEP 2

接着往下看，在 </head> 下面发现：

1
<base target="_blank" />

这个很简单，就是让页面中所有链接都在新窗口打开；

STEP 3

最后，在页面底部找到了上面图中选项部分的代码，

1
<!-- 新窗自定义控制区 OP -->
2
<div id="settinglink">
3
  <form action="/">
4
    <div class="tLinkBox">
5
      <input type="checkbox" onchange="javascript:toggleLinkAttributes();" id="toggleLinks" />
6
      <script type="text/javascript">
7
        <!--
8
        var ifCookie = getCookie("externalLinks");
9
        if (ifCookie == "true") {
10
          document.getElementById("toggleLinks").checked = true;
11
          toggleLinkAttributes();
12
        } else {
13
          document.getElementById("toggleLinks").checked = false;
14
          toggleLinkAttributes();
15
        }
16
        //-->
17
      </script>
18
    </div>
19
    <div class="words">
20
      <label for="toggleLinks" title="Open in new window?"><strong>不打开新窗口?</strong></label>
21
      <br />如果您需要在同一窗口中打开所有链接,请使用此选项
22
    </div>
23
  </form>
24
</div>
25
<!-- 新窗自定义控制区 ED -->

以上代码是直接从PCHome 下载频道首页源文件中复制过来的，所以 DIV 的 CSS 不一定适合你，请适当修改使用；

STEP 4

必须在所有使用该功能的链接代码后加上 rel=“external” ，也就是把链接的代码写成：

1
<a href="http://www.pchome.net/" rel="external">首页</a>

文章信息