页面跳转和嵌套

开发工具与关键技术：VS js

作者：陆桂超

撰写时间：2019年4月22日

当我们浏览网页的时候肯定会遇到页面的跳转，例如我们用电脑浏览页面的时候，如果细心去留意， 你会发现页面跳转是有几种不同效果的。那么页面的跳转功能是怎么实现的呢？这里我准备了页面一(page1)和页面二(page2)两个页面。给页面一绑定页面跳转事件。

1、
从页面一跳转到页面二后不能通过后退键返回页面一。

如上图所示，location是js的对像，该对象包含有关当前url的信息。replace()是HTML
DOM方法，当使用该方法时新的页面路径将覆盖旧的页面路径，这样当页面一跳到页面二的时候就不能再返回了。("/main/page2")是跳转路径
2、
从页面一跳转到页面二后可通过后退键返回页面一。

与replace不同的是，href是HTML DOM的一个属性，使用该属性，当页面一跳转到页面二的时候，还可以通过后退键返回页面一。

3、
以上两种跳转方法都是通过覆盖旧路径在同一窗口打开新网页，并没有打开新的窗口，下面来看看打开新窗口的写法。

显然，open就是打开的意思，open()方法在HTML DOM中解释为打开一个新的窗口。
4、页面嵌套。把子页面嵌套在父页面里。

如图所示，div用于容纳子页面，iframe标签用于嵌套子页面，给iframe设置id。

页面嵌套语句用到prop方法，content就是上图iframe标签的id值。