js 有框架页面跳转(target)三种情况下的应用-前端开发

下面就来详细讲解一下“js 有框架页面跳转(target)三种情况下的应用”的攻略。

下面就来详细讲解一下“js 有框架页面跳转(target)三种情况下的应用”的攻略。

什么是框架页面跳转？

框架页面跳转通俗地说就是网页中嵌套了多个页面，其中一个主页面中包含了若干个子页面，用户可以在主页面中通过点击链接或者按钮切换显示不同的子页面。这种页面架构成为框架页面。

而在js中，我们可以通过修改a标签的target属性来实现页面跳转的不同渲染方式。目前常用的有三种情况：在本窗口中打开页面、在新窗口中打开页面和在框架中打开页面。接下来分别进行详细讲解。

在本窗口中打开页面

当你点击一个链接时，默认情况下链接指定的文档会显示在当前的浏览器窗口中。这也是标签target属性的默认值。如果你希望链接外的文档显示在新的窗口中，可以使用"_blank"，如下所示：

<a href="http://www.baidu.com" target="_blank">百度一下，你就知道</a>

其中，"target"属性的值为"_blank"，这个属性将会在新窗口中打开链接。

在新窗口中打开页面

和在本窗口中打开页面不同，这种方式会在新的窗口中打开文档。这种方式可以避免跳出当前的页面，如下所示：

<a href="http://www.baidu.com" target="_top">百度一下，你就知道</a>

其中，"target"属性的值为"_top"，这个属性将会在最顶层的框架中打开链接，如果当前窗口没有框架，它将会在整个窗口中打开。

在框架中打开页面

这个方法是用来在一个指定的框架中打开文档，比如说页面中有一个左侧的菜单栏，右侧是文档区域。那么你就可以这样设置超链接：

<a href="http://www.baidu.com" target="right">百度一下，你就知道</a>

其中，"target"属性的值为"right"，这个属性将会在名为"right"的框架中打开超链接文档。

注意：使用框架页面时，应该特别注意标题、代码结构等方面的设计。如果代码不规范，可能会出现多个框架之间相互覆盖或者布局混乱等问题。

示例说明：

以常见的导航栏为例，当用户点击某个导航选项时，需要在该导航栏所在框架的右侧打开指定链接页面，代码示例如下：

<html>
  <head>
    <title>示例代码：导航栏在框架中打开链接</title>
    <script type="text/javascript">
      function openPage(url) {
        var frame = parent.document.getElementById("nav-content");
        frame.src = url;
      }
    </script>
  </head>
  <frameset cols="150,*">
    <frame src="menu.html" name="nav-menu">
    <frame src="about.html" name="nav-content" id="nav-content">
  </frameset>
  <noframes>
    <body>
      <p>This page requires a frames-capable browser.</p>
    </body>
  </noframes>
</html>

在这个代码示例中，我们使用frameset元素创建了一个带有菜单栏和文档详情栏的框架页面，其中菜单栏和文档详情栏都是通过frame元素实现的。而当点击菜单栏时，我们会调用JavaScript函数openPage()，该函数会通过获取文档详情栏的iframe元素，将其src属性设置为指定的url，从而在文档详情栏中打开指定页面。

另一个例子是，在查看某个商品详情时需要在主页面的容器上方弹出新的浮层，用于展示更详细的商品信息，代码示例如下：

<html>
  <head>
    <title>示例代码：商品详情页弹出浮层</title>
    <script type="text/javascript">
      function showLayer(url) {
        var container = parent.document.getElementById("page-container");
        var mask = document.createElement("div");
        mask.style.position = "absolute";
        mask.style.top = "0";
        mask.style.left = "0";
        mask.style.width = "100%";
        mask.style.height = "100%";
        mask.style.backgroundColor = "rgba(0,0,0,0.5)";
        container.appendChild(mask);
        var frame = document.createElement("iframe");
        frame.style.position = "absolute";
        frame.style.top = "10%";
        frame.style.left = "10%";
        frame.style.width = "80%";
        frame.style.height = "80%";
        frame.src = url;
        mask.appendChild(frame);
      }
    </script>
  </head>
  <body>
    <h1>商品详情页</h1>
    <p>详细信息，请<a href="javascript:void(0);" onclick="showLayer('layer.html')">点击这里</a></p>
  </body>
</html>

在这个代码示例中，我们在商品详情页中使用了一个链接，当用户点击该链接时，会调用JavaScript函数showLayer()，该函数会在主页面的容器上方添加一个遮罩层（使用div元素实现），并在遮罩层上再添加一个iframe元素，用于展示更详细的商品信息（使用src属性加载层页面），从而实现一个简单的弹出浮层效果。