温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

window.open()被浏览器拦截怎么解决

发布时间:2022-07-07 11:49:23 来源:亿速云 阅读:245 作者:iii 栏目:开发技术

本篇内容介绍了“window.open()被浏览器拦截怎么解决”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

一、问题描述

以下是浏览器拦截示例:

window.open()被浏览器拦截怎么解决

window.open()被浏览器拦截怎么解决

window.open()被浏览器拦截怎么解决

window.open()被浏览器拦截怎么解决

二、问题分析

浏览器之所以拦截新开窗口是因为该操作并不是用户主动触发的,所以它认为这是不安全的就拦截了,即使 ajax 回调函数中模拟执行 click 或者 submit 等用户行为(trigger('click')),浏览器也会认为不是由用户主动触发的,因此不能被安全执行,所以被拦截。

三、window.open()语法

window.open(url, name, features, replace)
  Arguments - 参数  url
  可选字符串参数,指向要在新窗口中显示的文档的URL。如果省略该参数,或者参数为空字符串,新窗口不会显示文档。
  name
  可选字符串参数,该参数可以设置新窗口的名称。
  相同name的窗口只能创建一个,要想创建多个窗口则name不能相同。
  features
  可选字符串参数,该参数用于设定新窗口的功能。因为该参数是可选的,如果没有指定该参数,新窗口有所有的标准功能。
  replace
  可选布尔参数,设置新窗口中的操作历史的保存方式。
  true - 创建新历史记录
  false - 替换旧的历史记录
Returns - 返回值
  一个根据name参数对新创建的或已存在的窗口对象的引用。
Description - 描述
  open()方法可以查找一个已经存在的或者新建的浏览器窗口。如果name参数指定了一个已经存在的刘浏览器窗口,则返回对该窗口的引用。返回的窗口中将显示URL中指定的文档,但是features参数会被忽略。open()方法是JavaScript中唯一通过名称获得浏览器窗口引用的途径。
  如果没有指定name参数,或者不存在name参数指定的名称的窗口,open()方法将创建一个新的浏览器窗口。
  name参数用于指定新窗口的名称,该名称必须由字母、数字和下划线字符组成。它可以被HTML文档中的<a>标记或<form>标记指向。
  当你使用window.open()方法加载一个新的文档到一个已经存在了命名的窗口中时,你可以通过replace参数设置历史记录的保存方式.。如果该参数是true, 新文档的历史记录将取代旧文档的历史记录。 如果该参数为false或这没有指定该参数,新的文件在窗口的浏览历史记录中将建立自己的条目。该参数提供了location.replace()相同功能的方式。
  不要把"Window.open( ) "和"Document.open( )"混淆;这是两个完全不一样的方法。为了让代码更明晰,你可以用"Window.open( )"代替 "open( )"。作为HTML属性定义事件处理程序时, "open( )" 一般被解释为"Document.open( )",所以在这种情况下,你必须使用"Window.open( )"。
Window Features - 窗口特性
  feature参数是一个用逗号分隔的功能列表。如果该参数为空或者没有指定该参数,新的窗口将拥有所有的功能。另一方面, 如果feature参数只指定了某一项或某几项功能,那么其他没有被指定的功能将不会出现在新的窗口中。该字符串不能包含任何空格或其它空字符串。
  列表中的每个元素的格式:功能[=值]
  对于绝大多数的功能来说,它们的值一般都是yes或no。对这些功能,等号和值都可以省略不写。 对于 width和height特性,必须给它们指定一个以像素为单位的值。
  一下是一些普遍支持的功能和它们的含义:
  height
  设定窗口显示区域的像素宽度
  left
  浏览器窗口距离屏幕左边的距离
  location
  指明地址栏在新窗口中是否可见
  menubar
  指明菜单栏在新窗口中是否可见
  resizable
  指明新窗口是否可以调整大小
  scrollbars
  指明滚动栏在新窗口中是否可见
  status
  指明状态栏在新窗口中是否可见
  toolbar
  指明工具栏在新窗口中是否可见
  top
  设定新窗口距屏幕上方的距离
  width
  设定窗口显示区域的像素宽度
  alwaysLowered
  指定窗口隐藏在所有窗口之下
  alwaysRaised
  指定窗口浮在所有窗口之上
  dependent
  指定打开的窗口为父窗口的一个子窗口。并随父窗口的关闭而关闭
  directions
  指定Navigator 2和3的目录栏是否在新窗口中可见
  hotkeys
  在没有菜单栏的新窗口设置安全退出热键
  innerHeight
  设置新窗口中文档的像素高度
  innerWidth
  设置新窗口中文档的像素宽度
  menubar
  指明菜单栏在新窗口中是否可见
  outerHeight
  设定窗口(包括装饰边框)的像素高度
  outerWidth
  设定窗口(包括装饰边框)的像素宽度
  screenX
  设定新窗口离屏幕边界的像素长度
  screenY
  设定新窗口离屏幕上边界的像素长度
  titlebar
  指明菜单题目栏在新窗口是否可见
  z-look
  在文档中包含各个 <pplet>标签的数组
  fullscreen
  打开的窗体是否进行全屏显示

四、代码模拟

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>测试弹框拦截</title>
  <script>
    window.open("http://www.cnblogs.com/chenyablog/","测试弹框","top=nInt,left=nInt,width=nInt,height=nInt,location=yes,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no");
  </script>
</head>
<body>
   <h2>测试弹框拦截</h2>
</body>
</html>

五、解决方案在

ajax请求之前,先用window.open 打开一个空白窗口,然后在ajax的响应函数中设置该窗口的location属性为新的url。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>测试弹框拦截</title>
  <script>
    async displayProjectileFrame (type) {
      const title = '测试弹框拦截'
      // 先打开一个窗口
      let newWindow = window.open()
      //给新窗口设置标题
      newWindow.document.title = title
      try {
        const base = 'xxxxxxxxxx'
          // 这里是模拟ajax,不同使用场景需要有所变化
        const openUrl = await this.$axios.$get('/xxx/xxxx', {
          params: {
            base
          }
        })
        if (openUrl) {
          // 重定向
          newWindow.location = openUrl
        }
      } catch (e) {
        this.$axiosError(e)
      }
    }
  </script>
</head>
<body>
   <h2>测试弹框拦截</h2>
</body>
</html>

“window.open()被浏览器拦截怎么解决”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI