关于浏览器拦截弹出窗口问题的解决方法正常对于浏览器新开窗口有三种方式解决方法

89 阅读 0 评论 59 点赞

我是靠谱客的博主高贵大神，最近开发中收集的这篇文章主要介绍关于浏览器拦截弹出窗口问题的解决方法正常对于浏览器新开窗口有三种方式解决方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

正常对于浏览器新开窗口有三种方式
- 1、html里a标签的target属性
- 2、javascript的window.open()方法
- 3、html里form表单的target属性
- 问题分析
解决方法
- 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>