cari

Rumah >hujung hadapan web >tutorial js >常用的js页面跳转代码

常用的js页面跳转代码

小云云
小云云asal
2018-03-28 17:11:531935semak imbas

一般来说页面的跳转可以通过a标签来进行，但是在某些情况下页面只是写了button或者其他的标签，这时我们就需要通过其他方式来实现页面的跳转。本文主要和大家分享常用的js页面跳转代码，希望能帮助到大家。

解决方案：

    方式一：Location 对象

测试源代码：

 <html>
<head>
<script type="text/javascript">
  //assign() 方法可加载一个新的文档。
  function newDoc(){
      window.location.assign("http://www.souvc.com/");
  }
  //reload() 方法用于重新加载当前文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。
  function reloadPage(){
     window.location.reload();
  }
  //replace() 方法不会在 History 对象中生成一个新的记录。当使用该方法时，新的 URL 将覆盖 History 对象中的当前记录。
  function replaceDoc(){
    window.location.replace("http://www.souvc.com");
  }
  function locationHref(){
    window.location.href("http://www.w3school.com.cn/");
  }
</script>
</head>
<body>
<input type="button" value="跳转页面（直接在按钮上加方法）" onClick="location.href=&#39;http://www.souvc.com/&#39;">
<br/>
<input type="button" value="跳转页面（加载一个新的文档）" onclick="newDoc()" />
<br/>
<input type="button" value="重新加载页面" onclick="reloadPage()" />
<br/>
<input type="button" value="Replace document" onclick="replaceDoc()" />
<input type="button" value="location href" onclick="locationHref()" />
</body>
</html>

方式二：History对象

方式三：其他对象

2


3

4

5

6

7

8

9

10

11

12

13

14

15

href="javascript:history.go(-1)">返回上一步

href="javascript:"onClick="window.open

('http://www.souvc.com/','','height=500,width=611,scrollbars=yes,status=yes')">souvc

self.location='http://www.souvc.com/';

top.location='http://www.souvc.com/';

window.navigate("top.jsp");

2

3

4

5

6

7

8

9

10

11

12

13

14

15

href="javascript:history.go(-1)">返回上一步

href="javascript:"onClick="window.open

('http://www.souvc.com/','','height=500,width=611,scrollbars=yes,status=yes')">souvc

self.location='http://www.souvc.com/';

top.location='http://www.souvc.com/';

window.navigate("top.jsp");

Atas ialah kandungan terperinci 常用的js页面跳转代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript JS number 对象 location history href http
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：解决vue2.0路由不显示router-view的问题Artikel seterusnya：vue-router进行build时不显示路由页面怎么处理

Artikel berkaitan

Lihat lagi