window.open在IE下ajax中的兼容性

最新推荐文章于 2021-08-05 18:02:41 发布
最新推荐文章于 2021-08-05 18:02:41 发布
阅读量735 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： WEB前端 文章标签： open IE ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xujiezi/article/details/51911673
本文介绍了一种解决Internet Explorer浏览器中使用Ajax时遇到的window.open方法被阻止问题的有效方案。通过预加载一个提示页面，确保了新标签页能够成功打开。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题：在ajax中window.open在IE下会弹出浏览器阻止窗口的问题,进而不再执行window.open打开新tab页的方法
解决方法：
在ajax方法之前加上：

windowOpenHandler = window.open("/loading-tips.html"); // /loading-tips.html 为提示加载页面

在ajax内部之前window.open的位置用下列方法替换：

windowOpenHandler.location.href = "http://www.realURl";
jquery ajax window.open,Ajax与弹窗被浏览器拦截（windows.open）的问题
weixin_42360972的博客
08-05 988
最近在项目中有这样一个需求：在前端页面的js文件中从后台获取一个URL，拿到URL后调用windows.open方法打开这个URL。URL由后端程序拼接而成，在开发过程中遇到了两个问题，前端js代码如下：showWindow : function() {Fw.Ajax.request({url : '/ebank/callCenter.do',params : {'COMPY_NAME':COMP...
window.open()实现post传递参数
09-03
在JavaScript中，`window.open()` 是一个非常常用的函数，用于打开一个新的浏览器窗口或者标签页。通常，`window.open()` 的使用方式是 `window.open(url, target, features)`，其中 `url` 是要打开的页面的地址，`...
Ajax请求响应中用window.open打开新窗口被拦截的解决方法
12-10
一、问题描述 ajax 异步请求成功后需要新开窗口打开 url，使用的是 window.open() 方法，但是会被浏览器给拦截了，需要用户点下。 二、问题分析 　　浏览器之所以拦截新开窗口是因为该操作并不是用户主动触发的，所以它认为这是不安全的就拦截了，即使 ajax 回调函数中模拟执行 click 或者 submit 等用户行为（trigger(‘click’)），浏览器也会认为不是由用户主动触发的，因此不能被安全执行，所以被拦截。 说明： 1、如果是在 这个中指定的 fun方法中
如何使用 window.open（） 处理ajax请求返回的url： 在本页面打开并防止浏览器拦截...
weixin_34132768的博客
04-19 555
ajax请求中用window.open（）打开请求返回url（例如实现下载功能时），可能会因为跨域问题导致浏览器拦截 解决办法是：在请求前，打开一个窗口，请求成功后将返回的url直接赋值给该窗口的href，如下 downPkg() { var mywin = window.open('','_self'); //注意一定要在请求前操作此步 thi...
window.open与ajax的同步
walle的博客
06-03 2878
$.ajax({             type: "POST",             url: "list.php?action=addArticle",             dataType: "json",             async: false,       //要同步的，否则发帖之后无法跳转到帖子页面.Andy,2014.6.3             da
ajax请求成功后新开窗口window.open()被拦截解决方法
weixin_34227447的博客
07-29 349
ajax 异步请求成功后需要新开窗口打开 url，使用的是 window.open() 方法，但是很可惜被浏览器给拦截了，怎么解决这个问题呢 问题： 前面开发项目时碰到一个问题，ajax 异步请求成功后需要新开窗口打开 url，使用的是 window.open() 方法，但是很可惜被浏览器给拦截了，怎么解决这个问题呢？ 分析： 浏览器之所以拦截新开窗口是因为该操作并不是用...
FF（火狐）浏览器无法执行window.close()解决方案
09-04
在网页开发过程中，有时我们需要通过JavaScript来控制窗口的关闭，比如在用户完成某项操作后自动关闭当前窗口。然而，不同浏览器对JavaScript的`...在实际开发中，应尽可能遵循最佳实践，确保代码的兼容性和安全性。
【动态内容加载】：window.open在内容异步展示中的应用
!... # 摘要 本文详细探讨了动态内容加载与window.open方法的基本概念及其在异步内容加载中的应用。首先介绍了window.open方法在JavaScript中的语法、参数、行为模式和特性，随后深入分析了异步请求技术，包括AJAX/XM
JavaScript中windows.open()、windows.close()方法详解
12-02
JavaScript中的`window.open()`和`window.close()`方法是两个与窗口操作密切相关的函数，它们在网页...同时，考虑到跨浏览器兼容性和用户体验，尽量减少弹出窗口的使用，而是利用模态对话框或者AJAX来实现类似的功能。
window.XMLHttpRequest详解（AJAX工作原理）1
05-05
在现代Web开发中，**AJAX**（Asynchronous JavaScript and XML）技术是一项至关重要的技术，它允许网页在不重新加载整个页面的情况下从服务器获取数据并更新部分网页内容。实现这一功能的核心组件是`window....
ajax回调打开新窗体防止浏览器拦截有效方法
weixin_30629653的博客
11-16 203
ajax回调打开新窗体防止浏览器拦截，就这么做！ 问题剖析： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function click_fun(){ window.open("www.baidu.com");//能打开 $.ajax({ 'ur...
ajax请求响应中window.open拦截解决
小白努力走
11-23 6470
问题原因：ajax回调函数中执行window.open或者模拟click事件，由于跳转操作不是用户主动触发，会被认为不安全，浏览器会进行拦截。 1： 在fun方法中调用window.open是不会被拦截的。 2：如果不是打开新窗口，而是改原来的网页地址，可以使用window.location = newurl 来实现，这样不会被拦截。具体解决：function fun(){ var
ajax回调函数中window.open()新窗口被浏览器拦截
cloud_tian's blog
12-03 641
原因：当浏览器检测到非用户操作产生的新标签页，则会对其进行阻止。因为浏览器认为这可能是一个广告，存在安全隐患，不是一个用户希望看到的页面。 解决方案： 非ajax回调函数，可以通过模拟用户点击操作的行为打开新标签页。新创建一个a标签，添加href属性，调用click()，然后移除a标签。 function openWin(url, id) { let a = document.create...
window.open兼容ie8
chenxiaoyi0207的博客
04-16 1357
1.使用window.open(url,’_blank’) 需要分开使用： let newWindow=window.open('_blank'); newWindow.location=url;
IE浏览器不能使用window.open()的解决方案
热门推荐
u012565281的博客
04-26 1万+
1.判断浏览器是否为IEvar userAgent = navigator.userAgent; //取得浏览器的userAgent字符串  var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器  if(isIE){//如果...
点击和ajax使用window.open 处理
iteye_19351的博客
09-24 858
今天做支付，点击提交订单后确认支付，想法是打开一个新的tab页让用户完成支付。 做的过程中发现 点击 ajax 订单提交完成后，使用window.open 直接用window.open(url)方式会弹出一个新的浏览器无状态窗口，后来网上搜索，将代码改为如下，ok。 var w = window.open(); $('#submitOrder').form('submit',{ ...
ajax同步通信的小细节_IE浏览器中open函数的参数设置问题
haitunxiaomo的专栏
04-27 939
ajax同步通信的小细节_IE浏览器中open函数的参数设置问题
ajax无法open,ajax中打开新页面使用window.open方法被拦截的解决方法
weixin_39902598的博客
08-05 775
$('.testA').unbind('click').bind('click',function(){var result="";$.ajax({url:'http://localhost/demo/windowopen/test.php','type':'POST',async:false,dataType:'json',success: function(data){if(data &amp...
vue2项目中window.open打开html页面
最新发布
03-20
<think>嗯，用户的问题是在Vue2项目中使用window.open方法打开HTML页面，需要方法和注意事项。首先，我得回忆一下window.open的基本用法，然后结合Vue2的特殊情况来考虑可能的坑。 用户提供的引用里提到，直接在Vue里调用window.open可能被浏览器拦截，尤其是异步回调里。比如在点击事件里直接调用可能没问题，但如果放在setTimeout或者AJAX回调里，浏览器可能会阻止弹窗。所以需要注意调用时机，最好是在用户直接触发的处理函数里执行。 然后，引用里提到第三种方案是先打开一个空白页，再重定向。这可能是因为某些情况下直接打开会被拦截，而通过用户点击先打开一个窗口，再修改location.href可以绕过拦截。这个思路需要代码示例，比如在methods里定义openPage方法，先打开空白窗口，再设置其location。 另外，Vue的路由系统和window.open结合使用时，可能需要处理同源策略和窗口命名的问题。比如引用3中的示例，使用window.open时指定窗口名称，可以复用已打开的窗口，避免重复打开。这可能和业务需求相关，是否需要每个页面都新开窗口，还是激活已存在的。 还有，Vue2项目中使用window.open打开静态HTML文件，路径的问题。如果HTML文件放在public目录下，需要使用绝对路径或者process.env.BASE_URL来确保路径正确。比如，使用window.open('/static/my-page.html')或者通过require获取正确路径，避免开发环境和生产环境的路径差异。 注意事项方面，浏览器的拦截机制很重要，需要确保window.open是由用户触发的，比如点击按钮的事件处理函数中直接调用。异步操作中调用容易被拦截，所以可能需要同步执行或者在用户操作后立即调用。 另外，新窗口的兼容性需要考虑，比如移动端可能无法控制窗口大小，所以参数如width、height可能无效。安全性方面，跨域问题可能导致新窗口无法访问父窗口的变量，需遵循同源策略。 还有，引用2中提到在单页应用中管理窗口状态，避免重复打开，这可能涉及到在Vue组件中维护已打开窗口的引用，通过名称来判断是否存在，存在则激活，否则新建。不过用户的问题可能更基础，是如何正确打开HTML页面，而不是管理多个窗口的状态，但这也是一个需要注意的点。 总结下来，回答的结构应该是先给出基本用法示例，然后讨论可能的问题和解决方案，比如路径处理、浏览器拦截、异步问题，最后列出注意事项。需要确保示例代码正确，比如在methods里调用window.open，处理路径，以及可能的变通方案如先打开空白窗口再重定向。</think>在Vue2项目中通过$window.open$打开HTML页面，需注意以下实现方式和注意事项： --- ### 一、基础实现方法 #### 1. 直接调用方式（同步操作） ```javascript // 在Vue组件methods中 methods: { openHtmlPage() { // 打开public目录下的静态HTML文件 window.open('/static/my-page.html', '_blank', 'width=800,height=600') } } ``` *路径说明*：假设HTML文件存放在Vue项目的`public/static`目录下，打包时会直接复制到根目录[^4]。 #### 2. 动态路径处理 ```javascript window.open(require('@/assets/html/my-page.html'), '_blank') ``` 需配合`file-loader`配置，适用于通过Webpack管理的资源路径。 --- ### 二、特殊场景解决方案 #### 1. 解决浏览器拦截问题 通过用户交互触发新窗口（推荐方案）： ```javascript // 先创建空白窗口再重定向 openPage() { const newWindow = window.open('', '_blank') newWindow.location.href = '/static/my-page.html' } ``` 此方法可规避部分浏览器的弹窗拦截机制。 #### 2. 带参数传递 ```javascript window.open(`/preview.html?id=${this.id}`, 'previewWindow') ``` 需确保目标HTML页面能解析URL参数。 --- ### 三、注意事项 1. **路径问题** - 开发环境使用相对路径`/static/` - 生产环境需确认文件部署位置 - 建议通过`process.env.BASE_URL`动态获取基础路径： ```javascript window.open(`${process.env.BASE_URL}static/my-page.html`) ``` 2. **浏览器拦截机制** - 必须在用户主动触发的同步代码中调用（如点击事件） - 异步回调中使用时可能被拦截： ```javascript // 错误示例（会被拦截） setTimeout(() => { window.open('/page.html') // 可能被阻止 }, 1000) ``` 3. **窗口控制** ```javascript // 最佳实践：指定窗口特征参数 window.open('/page.html', '_blank', 'width=1024,height=768,scrollbars=yes') ``` 特征参数需为逗号分隔的字符串，不带空格[^3]。 4. **SPA路由冲突** 若目标HTML是Vue应用，建议通过路由系统处理： ```javascript const routeData = this.$router.resolve({ path: '/target' }) window.open(routeData.href, '_blank') ``` --- ### 四、常见问题排查 1. **404错误** 检查文件是否放置在`public`目录，且路径正确 2. **跨域问题** 确保父子窗口同源，否则无法通过`window.opener`通信 3. **样式丢失** 静态HTML中应使用绝对路径引用CSS/JS： ```html <!-- 正确方式 --> <link href="/static/css/style.css" rel="stylesheet"> ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值