关于html:HTML页面跳转的5中方式

45次阅读

共计 1282 个字符,预计需要花费 4 分钟才能阅读完成。

法一:<a/>
// target="_blank" 示意保留以后页面,用新标签页关上
<a href="https://smallpdf.cn" target="_blank"  rel="noreferrer"> 收集优质网站资源 </a>
法二:window.location.href
window.location.href="https://smallpdf.cn";
法三:window.open()
// "_blank" 示意保留以后页面,用新标签页关上
window.open("https://smallpdf.cn", "_blank");

<a>正告信息
问题形容
<a href="https://smallpdf.cn" target="_blank"/>

# 下面的写法,会呈现上面的正告信息:warning  Using target="_blank" without rel="noreferrer" is a security risk: see
https://html.spec.whatwg.org/multipage/links.html#link-type-noopener  react/jsx-no-target-blank
解决方案
# 减少属性:rel="noreferrer"
<a href="https://smallpdf.cn" target="_blank" rel="noreferrer"/>
起因详解

当应用 target="_blank" 关上新标签页时,新页面的 window.opener 是指向前一个页面,这样就能够管制前一个页面。譬如:当新旧页面在同一个域名下时,在新页面控制台输出 window.opener.alert(1),会发现旧页面弹出音讯 1。当新旧页面不在同一个域名时,通过window.opener.location.replace 能够扭转旧页面的 url。所以还是加上rel="noreferrer",把opener 对象设置为null,以防后患。

相干链接
  • window 对象具体阐明
  • window.opener 对象具体阐明

页面跳转传递参数
# 传参页面
let a = {key:'value'}
// 对参数进行序列化
let astr = JSOS.stringfy(a);let url = 'https://learn-anything.cn/search?input='+astr;
window.open(url);
# 承受参数页面:https://learn-anything.cn/search
// window.location,存储了本页面相干所有数据
let query = window.location.query;

# 参数解析形式:const urlTemp = require('url');
let parsedUrl = urlTemp.parse(window.location.href, true);
let para = parsedUrl.query.astr;

# 反序列化失去参数,如果是非序列化参数,无需此步间接应用参数
let a = JSON.parse(para);
相干链接
  • HTML 页面跳转的 5 中形式!

正文完
 0