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

最新推荐文章于 2021-07-30 17:02:00 发布

焕冒子

最新推荐文章于 2021-07-30 17:02:00 发布

阅读量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>