资讯专栏INFORMATION COLUMN

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

lncwwn / 3541人阅读

摘要:页面和页面是没有跨域的一开始我只想到用提交数据来实现,不过一想,是直接提交到页面吗一时之间,我也不知道该如何进行页面跳转之间的数据传递。参考文章利用跨域获取数据详解四种跨域方式详解

先描述一下需求情景
有一个生成节日贺卡的页面,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); //填充数据

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

参考文章:

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

「JavaScript」四种跨域方式详解

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/86089.html

相关文章

  • 前端跨域方法论

    摘要:说明是否允许通讯同一域名允许同一域名下的不同文件夹允许不同端口号不允许不同协议不允许不同域名不允许主域相同,子域不同不允许跨域解决方案由于浏览器同源策略是允许标签这样的跨域资源嵌套的,所以标签的资源不受同源策略的限制。 前言 本着学习和总结的态度写的技术输出,文中有任何错误和问题,请大家指出。更多的技术输出可以查看我的 github博客。 整理了一些前端的学习资源,希望能够帮助到有需要...

    leejan97 评论0 收藏0
  • 常用跨域方法总结

    摘要:常用跨域方法总结为什么要跨域因为浏览器的一种安全机制同源策略的限制,导致不能直接获取不同源的资源,所以要跨域。那么什么才叫同源呢协议相同域名相同端口号相同图来自参见最后下面介绍常用的几种跨域方法。 常用跨域方法总结 为什么要跨域? 因为浏览器的一种安全机制——同源策略的限制,导致不能直接获取不同源的资源,所以要跨域。 同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行...

    jerryloveemily 评论0 收藏0
  • 常用跨域方法总结

    摘要:常用跨域方法总结为什么要跨域因为浏览器的一种安全机制同源策略的限制,导致不能直接获取不同源的资源,所以要跨域。那么什么才叫同源呢协议相同域名相同端口号相同图来自参见最后下面介绍常用的几种跨域方法。 常用跨域方法总结 为什么要跨域? 因为浏览器的一种安全机制——同源策略的限制,导致不能直接获取不同源的资源,所以要跨域。 同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行...

    Seay 评论0 收藏0
  • 跨文档通信7种方法

    摘要:摘要以下总结的跨文档通信方法,均是在服务器不参与的情况下服务端无需特殊的代码实现的这里的通信,是指页面向页面传递信息大致分为以下三类通过实现双向通信通过客户端存储实现通信在页面跳转的过程中携带信息中其中第一种方法没有跨域的限制,且实现的是双 摘要 以下总结的跨文档通信方法,均是在服务器不参与的情况下(服务端无需特殊的代码)实现的 这里的通信,是指页面A向页面B传递信息 大致分为以下三类...

    阿罗 评论0 收藏0

发表评论

0条评论

lncwwn

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<