关于浏览器拦截弹出窗口问题的解决方法

最新推荐文章于 2021-10-21 09:01:19 发布

焕冒子

最新推荐文章于 2021-10-21 09:01:19 发布

阅读量8.6k

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/qq_39725929/article/details/88865928

版权

关于浏览器拦截弹出窗口问题的解决方法

正常对于浏览器新开窗口有三种方式
解决方法
- 1、把javascript的window.open()声明成一个js对象,然后把指向的地址赋值给其location属性（注意如果是在Ajax回调函数里使用的话，一定要设置async成false，否则还是会被拦截掉）
- 2、如果是用html里form表单的target属性就稍微麻烦一点点了，需要一个中间页面，还有就是，得监控这个form表单的submit事件

正常对于浏览器新开窗口有三种方式

1、html里a标签的target属性

<a href="./open.html" target="_blank">点击</a>

2、javascript的window.open()方法

let url = "./open.html";
window.open(url);

3、html里form表单的target属性

<form action="./open.html"  method="post"  target="_blank">
<input name="username" value="username" />
<input type="submit" value="submit" />
</form>

问题分析

首先a标签另开页面是没有什么问题 但是如果在ajax回调函数里使用window.open()的话就会被拦截 * form表单使用target="_blank"必拦截*

原因大概是因为请求头里没有源地址吧 所以浏览会把这个请求当做广告处理，如果你不设置浏览器弹窗权限的话是会被拦截掉的

解决方法

1、把javascript的window.open()声明成一个js对象,然后把指向的地址赋值给其location属性（注意如果是在Ajax回调函数里使用的话，一定要设置async成false，否则还是会被拦截掉）

let url = "./open.html";
let open = window.open();
open.location = url;

2、如果是用html里form表单的target属性就稍微麻烦一点点了，需要一个中间页面，还有就是，得监控这个form表单的submit事件

我当时是需要点击一个按钮，做一个数据提交然后展示相应的结果，要求是要重新开一个页面展示 然后我就只能是创建一个form表单对象，然后append到页面上，再用上面的window.open(),再在新开的页面上使用window.opener.document对象操作父页面的元素达到效果
原理就是在提交表单之前先append到页面上 再用上面的window.open()方法新开页面,再在新开的页面上使用window.opener.document对象操作父页面的刚刚append的form表单append到中间页面，然后直接提交表单就可以啦，至于为什么还要先append到本页面是因为，现在谷歌浏览器是不能提交在页面节点元素里不存在的表单，就是说，无论是js还是jq对象形式的表单不能直接提交，必须先在页面节点元素里存在。

openFormTest.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>openFormTest</title>
	</head>
	<body>
		<a href="javascript:;" onclick="openFormTest();">表单</a>
	</body>
	<script type="text/javascript">
		function openFormTest(){
			let form = document.createElement("form");
			form.setAttribute("action","./open.html");
			form.style.display = "none";
			document.getElementsByTagName("body")[0].appendChild(form);
			let open = window.open();
			open.location = "./openTemp.html";
			document.parent.appendChild(form);
//			form.submit();
		}
	</script>
</html>

openTemp.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title> </title>
		<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
	</head>
	<body></body>
	<script type="text/javascript">
		$(function(){
			var $form = $(window.opener.document).find("form:last");
			$form.appendTo("body");
			$form.submit();
		});
	</script>
</html>

焕冒子

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于浏览器拦截弹出窗口问题的解决方法

关于浏览器拦截弹出窗口问题的解决方法正常对于浏览器新开窗口有三种方式1、html里a标签的target属性2、javascript的window.open()方法3、html里form表单的target属性问题分析解决方法1、把javascript的window.open()声明成一个js对象,然后把指向的地址赋值给其location属性2、如果是用html里form表单的target属性就稍微麻...
复制链接

扫一扫