跳转到主内容
新派编程网 - 新潮编程理念,全新技术课堂!

怎样在新窗口中打开目标网页_A标签TARGET属性设为BLANK

target="_blank"必须搭配rel="noopener noreferrer"才安全可用,否则现代浏览器会降级行为或保留危险的window.opener引用,导致原页面被劫持或跳转。
target="_blank"
是唯一可靠、广泛支持的让
标签在新标签页(或窗口)打开的方式,但单独写它几乎必然出问题——必须搭配
rel="noopener noreferrer"
才算真正可用。 为什么只写
target="_blank"
会失效或不安全 现代浏览器(Chrome 92+、Firefox 88+、Safari 15.4+)在检测到缺失
rel="noopener"
时,会主动降级行为:要么静默忽略
target
、仍在当前页跳转;要么新开标签页但保留危险的
window.opener
引用,导致原页面可被劫持。
target="blank"
(漏掉下划线)→ 浏览器当普通字符串处理,等同于
target="_self
,当前页跳转
target="_new"
或
target="new"
→ 非标准值,所有主流浏览器直接忽略
href="#"
、
href=""
或
href="javascript:void(0)"
→ 即使写了
target="_blank"
,也不会触发新窗口,因为没真实目标地址 微信内置 WebView、部分旧版 Android WebView → 完全无视
target
,必须用
window.open()
替代
rel="noopener noreferrer"
不是“锦上添花”,而是硬性要求 缺一不可:
noopener
切断
window.opener
引用,防止新页面调用
window.opener.location.replace()
劫持你的页面;
noreferrer
同时阻止 Referer 头泄露来源 URL(尤其对外链敏感场景)。 不要只写
rel="noreferrer"
:它不保证切断
window.opener
,Safari 旧版本仍可能暴露风险 不要写成
rel="noopener noreferrer noopener"
:冗余且无意义,
noopener
已隐含对应行为 兼容性底线:Chrome 49+、Firefox 52+、Safari 10.1+ 全支持
noopener
;若需支持 Safari 9 或更早,可加 fallback 逻辑,但现实项目中基本无需考虑 Vue/React 中动态生成链接容易漏掉什么 模板里写死的
没问题,但 JS 动态拼接或组件化渲染时,
rel
极易被遗漏——尤其是从 props 或 API 数据里取
href
后直接插进 DOM。 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更 下载 Vue 中用
v-bind
或
:rel
绑定时,确保值是字符串
"noopener noreferrer"
,不是布尔值或 undefined React 中 JSX 属性名是
rel
,不是
REL
或
Rel
,大小写敏感 推荐封装一个
SafeLink
组件,强制注入
target="_blank"
和
rel="noopener noreferrer"
,外部只传
href
和文本 检查控制台是否报
Blocked a frame with origin ... from accessing a cross-origin frame
—— 这是浏览器已拦截 opener abuse 的提示,说明你漏了
rel
什么时候该放弃
target="_blank"
,改用
window.open()
不是所有“新窗口”需求都适合
target
:表单提交、按钮点击、需要传参、或要控制窗口尺寸/位置时,
window.open()
更可控,但也更易踩坑。 必须在用户主动触发的事件回调内调用(如
onClick
),
setTimeout(() => window.open(...), 0)
会被弹窗拦截 第二个参数写
"_blank"
≠ HTML 的
target="_blank"
:它只是告诉浏览器“开匿名窗口”,不强制新标签页;写空字符串
""
效果相同 跨域页面无法通过
window.open()
获取返回值或通信,除非双方配合
postMessage
移动端 Safari 对
window.open()
限制极严,很多情况直接静默失败,无任何提示 最常被忽略的一点:即使你写对了所有属性,如果链接本身是同源的(比如内部页面跳转),且用户浏览器设置了「在新窗口中打开链接」,那依然可能弹出独立窗口而非标签页——这不是 bug,是用户可控的行为,开发者不该、也无法干预。

相关文章