2.1.3 HTML的跳转方法
HTML页面的跳转方法主要分两种：第一种叫作原页面跳转，另一种叫作新页面跳转。下面就来介绍一下这两种页面跳转的方法和区别。
原页面跳转其实就是通过更改当前浏览器地址栏中的URL地址来实现跳转，把当前页面定位到另一个站点或者页面。我们通常使用window.location对象实现，或者使用a标签进行跳转。下面我们分别看一下这两种方法的代码实现。
window.location对象的原页面跳转方法实现如代码清单2-2所示。
代码清单2-2 window.location原页面跳转
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" content="电商">
<meta property="og:type" content="article">
<meta property="og:title" content="我是标题">
<meta property="og:url" content="https://www.xxxxx.com">
<meta property="og:description" content="我是内容">
</head>
<body>
我是商品页
</body>
<script>
window.location.href = "http://www.baidu.com"
</script>
</html>
这段代码会在用户访问这个页面之后立刻跳转到百度首页，不需要其他操作。还有一种方法——使用a标签，如代码清单2-3所示。
代码清单2-3 a标签原页面跳转
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" content="电商">
<meta property="og:type" content="article">
<meta property="og:title" content="我是标题">
<meta property="og:url" content="https://www.xxxxx.com">
<meta property="og:description" content="我是内容">
</head>
<body>
<a href="http://www.baidu.com">我要跳转百度</a>
</body>
</html>
a标签方式与window.location最大的区别就是，window.location不需要用户做任何操作，但是a标签需要用户点击一下。当我们访问代码清单2-3所描述的页面时，会看到图2-1所展示的页面，点击“我要跳转百度”链接，就会看到图2-2所展示的界面。细心的人可以发现，在图2-2左上角处的浏览器的后退按钮是可操作的状态，即无论页面跳转方式是a标签方式还是window.location方式，跳转都可以后退。
图2-1 a标签跳转
图2-2 开发机的图标界面（PC开发机）
下面介绍前端页面的新页面跳转。新页面跳转与原页面跳转之间的差异在于，新页面跳转不能后退并且会产生一个新的页面，新的页面会跳转到目标地址。所以跳转新页面也可以称为打开新页面。在浏览器的window对象中有一个实现该功能的函数，它就是window.open()。让我们看一下代码实现，如代码清单2-4所示。
代码清单2-4 window.open实现
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" content="电商">
<meta property="og:type" content="article">
<meta property="og:title" content="我是标题">
<meta property="og:url" content="https://www.xxxxx.com">
<meta property="og:description" content="我是内容">
</head>
<body>
我是商品页
</body>
<script>
window.open(http://www.baidu.com)
</script>
</html>
当我们访问代码清单2-2实现的这个页面的时候，浏览器会打开一个新的浏览器页面，并且这个页面的URL地址会指向www.baidu.com。
那么a标签的新页面跳转是如何实现的呢？具体如代码清单2-5所示，a的新页面跳转只需要加入一个target属性，并且把它的值设置为_blank，就可以达到跳转新页面的效果了。
代码清单2-5 a标签新页面跳转
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" content="电商">
<meta property="og:type" content="article">
<meta property="og:title" content="我是标题">
<meta property="og:url" content="https://www.xxxxx.com">
<meta property="og:description" content="我是内容">
</head>
<body>
<a href=http://www.baidu.com target=_blank>我要跳转百度</a>
</body>
</html>