利用window.name实现页面跳转之间的数据传递

本文介绍了一种通过window.name属性实现在同一域名下不同页面间传递数据的方法,并给出了具体实现步骤及代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

先描述一下需求情景
有一个生成节日贺卡的页面,a页面最后部分用来填写用户名和贺卡内容,点击提交按钮跳转到贺卡页面b,b页面显示的就是a页面填写的内容和用户名。(a页面和b页面是没有跨域的...)


一开始我只想到用ajax提交数据来实现,不过一想,是直接提交到b页面吗?一时之间,我也不知道该如何进行页面跳转之间的数据传递。百度许久,终于看到window.name这个方法。
ps:今天谷歌回来了吗? 并没有


实现过程

a页面中表单提交的方法:
$("#submit").click(function(){
    var nickname = $("#nickname").val(); //获取填写的用户名
    var message = $("#message").val(); //获取填写的贺卡内容
    var jsonData = {"nickname":nickname,"message":message}; //转化为json格式
    window.name = JSON.stringify(jsonData); //window.name只接受字符串格式,所以需要把json转换一下
    window.location = "b.html"; //跳转到b页面
}
b页面中获取数据的方法:
var jsonData = JSON.parse(window.name); //将window.name转化为json对象
$(".signame").text(jsonData.nickname); //填充数据
$(".message").text(jsonData.message); //填充数据

这样就完成了,挺简单的吧.
当然因为我这个需求并不要求跨域,所以可以这样用。、
如果你的需求需要跨域的话,可能就不能这样简单的使用了。

参考文章:

  1. 利用window.name+iframe跨域获取数据详解

  2. 「JavaScript」四种跨域方式详解

window.open是一个用于在浏览器中打开新窗口的方法。在Vue中,可以使用window.open进行页面跳转。 你可以使用以下两种方式进行跳转: 1. 普通跳转跳转的是路由):通过Vue Router的resolve方法解析目标路由,得到目标路由的href,然后使用window.open打开新窗口。例如: ```javascript const { href } = this.$router.resolve({ name: "newDate", query: { floor_id: this.floor_id } }); window.open(href, '_blank'); ``` 这样会在新窗口中打开名为"newDate"的路由页面,并传递参数floor_id。 2. 跳转到新的网页:通过window.open直接跳转到新的网页。例如: ```javascript window.open("https://www.baidu.com/", "_blank"); ``` 这样会在新窗口中打开百度网页。 需要注意的是,使用window.open进行页面跳转时,大部分浏览器会拦截弹出窗口,因此有些情况下可能无法正常跳转。 在Vue Router 2.1.0版本后,可以使用resolve方法解析路由并获取目标路由的href,然后使用window.open打开新窗口。例如: ```javascript const { href } = this.$router.resolve({ name: 'foo', query: { bar } }); window.open(href, '_blank'); ``` 这样可以在新窗口中打开名为"foo"的路由页面,并传递参数bar。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [vue的跳转方式——window.open & router-link标签 & this.$router.push跳转 & this.$router.replace跳转 & ...](https://blog.csdn.net/weixin_44867717/article/details/120503404)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值