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

法一：<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: seehttps://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中形式！