URL跳转空白页参数传递封装
这东西主要是为了vue和平时打开一个空白界面_blank时的参数传递,不涉及到浏览器存储(session,local等)
众所周知,请求传参无非就用的query和params,相对应就是get和post,在当前界面下进行跳转情况下,使用
this.$router.push({
path:'/xxx',
query: {
id:"xxxxxx"
}
})
//接收参数
this.$route.query.id
或者这样
this.$router.push({
path:'/xxx',
name:'xxx', //params传参 需要使用 name 否则取不到;对应路由配置的 name
params: {
id:"xxxxxx"
}
})
//接收参数
this.$route.params.id
使用params传参时 刷新页面参数消失
配置路由 在path加 /:id
对应需要传的参数名
//路由配置
path: '/userManager/:id',
注意 :传参是 router,接收参数是 route
上面是在同界面传参跳转,下面的是跳转到空白界面带参数方法
//打开新页面
var { href } = this.$router.resolve({
path: '/showDocPdf',
query: {
pdfUrl: item.id
}
});
window.open(href);
//新界面接收参数
created() {
var id = this.$route.query.pdfUrl;
}
上面是对vue的跳转方式进行总结,下面是对于原生js的跳转空白页传参跳转后获取传参的值
第一种就是,单独取值,要什么取什么
/**
* title: 获取URL参数
* name:key的名称
* 公司大佬的封装函数,借用学习一番
**/
function getUrlParam(name, url) {
url = url || window.location.href; // 不传默认拿当前的url
url = url.toString();
var newUrl, reg, result;
newUrl = url.substr(url.indexOf('?') + 1, url.length);
reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
result = newUrl.match(reg);
if (result !== null) {
result = decodeURIComponent(decodeURI(result[2])); //防止二次编码情况 //完全解码
return xss(result); //防止参数展示时xss攻击---方法就自己写了,本人也看不懂xss的拦截
}
return '';
};
然后有个替换URL的参数方法,没有就添加进去,这个功能个人觉得很鸡肋,没啥作用
/**
* title: 替换url参数,没有则添加
* key:key名称
* value:替换的值
* url:替换的url,默认本窗口url
**/
function changeURL(key, value, url) {
url = url || window.location.href;
var par = key + "=" + value;
if (url.indexOf("?" + key + "=") == -1 && url.indexOf("&" + key + "=") == -1) {
var flag = url.indexOf("?") >= 0 ? "&" : "?";
url = url + flag + par;
} else {
url = url.replace(eval('/(' + key + '=)([^&]*)/g'), par);
}
return url;
};
上面是对一个值单独获取,下面是一次性拿取url的所有传值
/**
* title: url参数转成json对象
* url:默认本窗口url
**/
function paramToJson(url) {
url = url || window.location.href; // 获取当前浏览器的URL
var param = {};
url.replace(/([^?&]+)=([^?&]+)/g, function (s, v, k) {
param[v] = decodeURIComponent(k); //解析字符为中文
return k + '=' + v;
});
return param;
}
对于这个decodeURIComponent函数可能自己一直都用不到吧orz,JS解码的函数
然后又看到了大佬封装的新打开窗口可以设置窗口参数的方法,类似弹窗广告那种吧,缺点也写的很清楚,会给拦截(大概是给当成广告了)
/**
* title: 弹出新窗口中打开链接(会被拦截,不推荐使用)
* url:打开路径
* winName:窗口名称
* parameters:窗口参数,没有则默认全屏(有width=*,height=*宽高则默认居中)
**/
that.openWin = function (url, winName, parameters) {
winName = winName || '_blank';
parameters = parameters || '';
if (url.length == '0') {
return;
}
var winW, winH, top, left, param = 'toolbar=no, menubar=no, scrollbars=yes, resizable=no, location=no, status=no,';
winW = that.getUrlParam('width', '?' + parameters.replace(',', '&'));
winH = that.getUrlParam('height', '?' + parameters.replace(',', '&'));
if (winW && winH) {
//获得窗口的垂直位置
top = (window.screen.availHeight - 50 - Number(winH.replace('px', ''))) / 2;
//获得窗口的水平位置
left = (window.screen.availWidth - 20 - Number(winW.replace('px', ''))) / 2;
param += 'left=' + left + ',top=' + top + ',';
}
if (parameters) {
param += parameters;
} else {
param = 'width=' + (window.screen.availWidth - 20) + ',height=' + (window.screen.availHeight - 50) + ',top=0,left=0,' + param;
}
if (/.*[\u4e00-\u9fa5]+.*$/.test(url)) {
url = encodeURI(encodeURI(url)); //含有中文则编码
}
window.open(url, winName, param);
};
暂时就写道这吧,后面还有挺多url函数的封装方法,有时间再来补充了
URL跳转空白页参数传递封装的更多相关文章
- DZNEmptyDataSet,优秀的空白页或者出错页封装
简介 项目主页:https://github.com/dzenbot/DZNEmptyDataSet 提示:主要用于UITableView和UICollectionView,也可以用于UIScroll ...
- window.location.href跳转至空白页
现象:window.location.href = "XXX"调到了空白页,但是将XXX在窗口地址栏输入就会可以访问到. 原因:就是XXX前缀没有加上"http://&q ...
- React-Native 之 GD (十一)加载更多功能完善 及 跳转详情页
1.加载更多功能完善 GDHome.js /** * 首页 */ import React, { Component } from 'react'; import { StyleSheet, Text ...
- AngularJS进阶(八)实现页面跳转并进行参数传递
angularjs实现页面跳转并进行参数传递 注:请点击此处进行充电! Angular页面传参有多种办法,我在此列举4种最常见的: 1. 基于ui-router的页面跳转传参 (1) 在Angular ...
- mui scrollTo到指定位置,出现空白页及拉不动的问题解决
使用方式简介 mui 列表页使用的是 mui的插件实现的上拉加载下拉刷新,但是从详情页回到列表页时 不能回到之前的位置.所以想到了使用缓存. 第一次和第二次的试验是失败的.失败后,就想用其他办法来解决 ...
- android端,webview内url跳转到app本地
这是和一个前端同事沟通. app内嵌入他的web页,要通过web页内的url跳转到app的详细内容. 他的android同事,没有思路. 其实嵌入web页,用的webview控件,只要能找到webvi ...
- tp5页面输出时,搜索后跳转下一页的处理
tp5页面输出时,搜索功能在跳转下一页时,如果不做任何处理,会返回原有是第二页输出的数据.为了保证跳转下一页时输出的是搜索到的数据,做以下处理. (要根据自己的搜索字段进行适当修改) 页面js代码,给 ...
- idea jsp html 空白页的问题
摘要 最近没事儿瞎折腾java web,在idea中,突然发现无法显示页面了. 问题 为什么会出现这个问题? 接触了过滤器的内容,然后在项目中添加了这样的一个过滤器,用来对post过来的数据进行ut8 ...
- 安全测试4_客户端的安全漏洞(XSS、CSRF、点击劫持、URL跳转)
那个fanh前面学习的都是基础,现在开始正式学习下安全的知识,这一章主要讲解客户端常见的安全漏洞. 看到这个不错,给大家记一下: 1.常见的安全事件: 2.XSS(跨站脚本),英文全称:Cross S ...
随机推荐
- CycleGAN
目录 概 主要内容 代码 Zhu J., Park T., Isola P. & Efros A. Unpaired Image-to-Image Translation using Cycl ...
- 编写Java程序,使用List集合和Map集合输出 市和区
如图: 代码: import java.util.ArrayList; import java.util.HashMap; import java.util.Iterator; import java ...
- Python+flask+flask-apscheduer实现定时下发任务
Python+flask+flask-apscheduer实现定时下发任务 背景: 使用python+flask+mamaca实现的自动化用例管理平台,可以下发任务到具体的节点,进行执行测试用例,没有 ...
- 初识python: 斐波拉契数(生成器获取)
使用 生成器(yield) 获取斐波拉契数. 代码如下: def fun(n): a,b,c = 0,0,1 while a < n: yield b # b, c = c, b + c 以下 ...
- Python 国内镜像源
让 python pip 使用国内镜像源 国内镜像源: 清华:https://pypi.tuna.tsinghua.edu.cn/simple 阿里云:http://mirrors.aliyun.co ...
- javascript中new url()属性,轻松解析url地址
1.首先写一个假的地址(q=URLUtils.searchParams&topic=api)相当于当前的window.location.href const urlParams = new U ...
- vue 图片拖拽和滚轮缩放
这里注意如果自己的页面有滚动条,一定阻止滚动事件的默认行为,否则缩放图片的时候,页面会跟着滚动@mousewheel.prevent 阻止默认行为 <div ref="imgWrap& ...
- JavaScript的执行过程(深入执行上下文、GO、AO、VO和VE等概念)
JavaScript的执行过程 前言 编写一段JavaScript代码,它是如何执行的呢?简单来说,JS引擎在执行JavaScript代码的过程中需要先解析再执行.那么在解析阶段JS引擎又会进行哪些操 ...
- 曼孚科技:“四管齐下”筑牢AI数据隐私安全防线
谈及数据,绕不开的一个话题就是数据隐私与数据安全.随着数字化进程加快,数据安全事件频发,据Risk Based Security统计,去年国际数据泄露事件近5000起,被泄露数据近41亿条,数据造成的 ...
- DASCTF-Sept-X-浙江工业大学秋季挑战赛-pwn-wp
目录 DASCTF-Sept-X-浙江工业大学秋季挑战赛-pwn-wp 总结 datasystem check分析 漏洞点 利用思路 exp hehepwn 漏洞点 exp hahapwn 漏洞点 e ...