首页 web前端 js教程 JAVASCRIPT实现的WEB页面跳转以及页面间传值方法_javascript技巧

JAVASCRIPT实现的WEB页面跳转以及页面间传值方法_javascript技巧

May 16, 2016 pm 06:27 PM
web 页面跳转

但有时候,需要当某事件触发时,我们先做一些操作,然后再跳转,这时,就要用JAVASCRIPT来实现这一跳转功能。
下面是具体的做法:
一:跳转到新页面,并且是在新窗口中打开时:

复制代码 代码如下:

function gogogo()
{
//do someghing here...
window.open("test2.html");
}

window是一个javascript对象,可以用它的open方法,需要注意的是,如果这个页面不是一相相对路径,那么要加http://,比如:
复制代码 代码如下:

function gogogo()
{
window.open( "http://www.google.com");
}

二:就在本页面窗口中跳转:
复制代码 代码如下:

function totest2()
{
window.location.assign( "test2.html");
}

如果直接使用location.assgin()也可以,但是window.location.assign()好像更合理一些,当前窗口的location对象的assign()方法。
另外,location对象还有一个方法replace()也可以做页面跳转,它跟assign()方法的区别在于:
replace() 方法不会在 History 对象中生成一个新的纪录。当使用该方法时,新的 URL 将覆盖 History 对象中的当前纪录。

下面学习如何在页面跳转的时候进行值的传递,当使用window.open()打开新页面时,浏览器会认为这两个窗口之间有一种打开与被打开的关系,所以在被打开的新窗口中在当前窗口的window对象中有一个window.opener 属性,这个值里面放着打开窗口的引用,所以可以获得这个值,进而引用上一页面内的对象的值,示例如下:

复制代码 代码如下:



test1













复制代码 代码如下:



test2












这两个页面,可以从后一个页面中获得前一个页面中的值,但是我感觉好像不大实用。。。。。。
优点:取值方便.只要window.opener指向父窗口,就可以访问所有对象.
不仅可以访问值,还可以访问父窗口的方法.值长度无限制.
缺点:两窗口要存在着关系.就是利用window.open打开的窗口.不能跨域.

下面看看另一种方法,使用URL附加字段在页面跳转间传值,前面用XMLHttpRequest时,用到过这种方式。简单原始的示例如下:

复制代码 代码如下:



test3













复制代码 代码如下:



test1















我记得前面在看XMLHttpRequest的时候有一个QueryString对象可以直接从URL参数中取值,我不清楚这儿可不可以直接用,试了一下好像不行。

最后一种页面间传值的方法就是COOKIE共享,这个比较容易理解,由一个页面在客户端机器放置一个COOKIE文件,下一个页面访问的时候,直接读取这里面的值就OK了。
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

<🎜>:泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系统,解释
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆树的耳语 - 如何解锁抓钩
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1665
14
CakePHP 教程
1424
52
Laravel 教程
1321
25
PHP教程
1269
29
C# 教程
1249
24
PHP页面跳转函数详解:header、location、redirect等函数的页面跳转技巧 PHP页面跳转函数详解:header、location、redirect等函数的页面跳转技巧 Nov 18, 2023 pm 05:08 PM

PHP页面跳转函数详解:header、location、redirect等函数的页面跳转技巧,需要具体代码示例引言:在开发Web网站或应用时,页面之间的跳转是一个必不可少的功能。PHP提供了多种方式来实现页面跳转,其中包括header函数、location函数以及一些第三方库提供的跳转函数,如redirect。本文将详细介绍这些函数的使用方

如何使用Golang实现Web应用程序的表单验证 如何使用Golang实现Web应用程序的表单验证 Jun 24, 2023 am 09:08 AM

表单验证是Web应用程序开发中非常重要的一个环节,它能够在提交表单数据之前对数据进行有效性检查,避免应用程序出现安全漏洞和数据错误。使用Golang可以轻松地实现Web应用程序的表单验证,本文将介绍如何使用Golang来实现Web应用程序的表单验证。一、表单验证的基本要素在介绍如何实现表单验证之前,我们需要知道表单验证的基本要素是什么。表单元素:表单元素是指

web标准是什么东西 web标准是什么东西 Oct 18, 2023 pm 05:24 PM

Web标准是一组由W3C和其他相关组织制定的规范和指南,它包括HTML、CSS、JavaScript、DOM、Web可访问性和性能优化等方面的标准化,通过遵循这些标准,可以提高页面的兼容性、可访问性、可维护性和性能。Web标准的目标是使Web内容能够在不同的平台、浏览器和设备上一致地展示和交互,提供更好的用户体验和开发效率。

使用uniapp实现页面跳转动画效果 使用uniapp实现页面跳转动画效果 Nov 21, 2023 pm 02:15 PM

标题:使用uniapp实现页面跳转动画效果近年来,移动应用的用户界面设计已经成为吸引用户的重要因素之一。页面跳转动画效果在提升用户体验和可视化效果方面起着重要的作用。本文将介绍如何使用uniapp实现页面跳转动画效果,并提供具体的代码示例。uniapp是一个基于Vue.js开发的跨平台应用开发框架,可以通过一套代码编译生成小程序、H5、App等多个平台的应用

如何从驾驶舱Web用户界面启用管理访问 如何从驾驶舱Web用户界面启用管理访问 Mar 20, 2024 pm 06:56 PM

Cockpit是一个面向Linux服务器的基于Web的图形界面。它主要是为了使新用户/专家用户更容易管理Linux服务器。在本文中,我们将讨论Cockpit访问模式以及如何从CockpitWebUI切换Cockpit的管理访问。内容主题:驾驶舱进入模式查找当前驾驶舱访问模式从CockpitWebUI启用Cockpit的管理访问从CockpitWebUI禁用Cockpit的管理访问结论驾驶舱进入模式驾驶舱有两种访问模式:受限访问:这是驾驶舱的默认访问模式。在这种访问模式下,您不能从驾驶舱Web用户

web是什么意思 web是什么意思 Jan 09, 2024 pm 04:50 PM

web是全球广域网,也称为万维网,是互联网的一种应用形式。Web 是一种基于超文本和超媒体的信息系统,它允许用户通过超链接在不同的网页之间跳转,从而浏览和获取信息。Web 的基础是互联网,它使用统一、标准化的协议和语言,使得不同计算机之间能够进行数据交换和信息共享。

如何在Vue中使用路由实现页面跳转? 如何在Vue中使用路由实现页面跳转? Jul 21, 2023 am 08:33 AM

如何在Vue中使用路由实现页面跳转?随着前端开发技术的不断发展,Vue.js已经成为了目前最热门的前端框架之一。而在Vue开发中,实现页面跳转是必不可少的一部分。Vue提供了VueRouter来管理应用的路由,通过路由可以实现页面之间的无缝切换。本文将介绍如何在Vue中使用路由实现页面跳转,并附有代码示例。首先,在Vue项目中安装vue-router插件。

PHP代码示例:如何用POST方式传参并实现页面跳转 PHP代码示例:如何用POST方式传参并实现页面跳转 Mar 07, 2024 pm 01:45 PM

标题:PHP代码示例:使用POST方式传参并实现页面跳转的方法在Web开发中,经常会涉及到如何通过POST方式传递参数,并在服务器端进行处理后实现页面跳转的需求。PHP作为一种流行的服务器端脚本语言,提供了丰富的函数和语法来实现这一目的。下面将通过一个实际的示例来介绍如何使用PHP来实现这一功能。首先,我们需要准备两个页面,一个用来接收POST请求并处理参数

See all articles