文档章节

关于页面中 JS 中windown.open( )方法打开新页面有可能会被浏览器拦截的问题

 恐空控
发布于 2014/03/06 11:51
字数 876
阅读 11210
收藏 8

       前言,在项目中突然间遇到了一个情况,同样的代码怎么有点地方window.open()打开的新页面不被拦截,有的地方又被拦截了呢,我百思不得其解,于是上网查了下,终于明白这是什么原因了,下面一一讲述。

   现在,先讲下打开新页面的方法,主要有一下几种:

       第一种:a标签 '<a href="test.php"target="_blank">,target="_blank"为打开一个新的窗口,否则,为当前页面跳转到指定页面;

       第二种:form表单'<form action="drag.html" method="get" id="form" target="_blank"/></form>',提交表单即可打开新页面,target='target',则将表单信息提交至新打开的指定页面,否则当前页面跳转到指定页面;

      第三种:window.location  执行window.location='test.php',页面将跳转到指定页面。

      第四种:window.open(url);执行window.open('test.php'),将会打开心新的指定页面,当前页面不变。 

      现在在对浏览器打开新页面的问题做一下简单小结,浏览器对于用户点击行为直接打开的页面一般不会拦截,比如不通过JS直接点击a、提交form表单,浏览器是不会阻止其跳转页面或者打开新页面行为的。但是对于JS打开新页面浏览器会好好审核的,如下面的例子,很多浏览器回去拦截。

<form action="test.php" method="get" id="form" target="_blank"/>//target为弹出新窗口
    <input type="hidden" name="name" value="ck">
    <input type="hidden"id="pwd"  name="id" value="123456">
    <input type="submit" style="display:none;"  value="提交"> 
</form>
<button id="btnSubmitForm">点击我提交表单</button>
<button id="btnAjaxSubmitForm">点击我发送ajax提交表单</button>
<script src="js/jquery-1.8.0.min.js"></script>
<script>
    $("#btnSubmitForm").on('click,function(){
         window.open(url);
        $("#form").submit();
    })
    //下面这种代码是系统自动执行的默认会被拦截。
    window.open(url);
    $("#form").submit();
    $("#btnSubmitForm").trigger('click');
    
    $.post(url,json,function(){
        //下面两种也会被浏览器当成广告给拦截掉。浏览器认为ajax发送之后执行的以下事件等同于系统自动触发的都会去阻止。
        window.open(url);
        $("#form").submit();
        $("#btnSubmitForm").trigger('click');
    })
</script>

    上面是最简单的2种会被浏览器当成广告的情况,那么该如何避免避免这种情况呢,很简单,我们可以通过以下方法:

<form action="test.php" method="get" id="form" target="_blank"/>//target为弹出新窗口
    <input type="hidden" name="name" value="ck">
    <input type="hidden"id="pwd"  name="id" value="123456">
    <input type="submit" style="display:none;"  value="提交"> 
</form>
<button id="btnSubmitForm">点击我提交表单</button>
<button id="btnAjaxSubmitForm">点击我发送ajax提交表单</button>
<script src="js/jquery-1.8.0.min.js"></script>
<script>
 //  第一种方法点击直接触发window.open()或者$(form).submit();
    $("#btnSubmitForm").on('click,function(){
         window.open(url);
        $("#form").submit();
    })
    
    //第二种方法 若是点击发送ajax触发方法,这里要强调一下不管是自动发送ajax还是手动发送ajax成功之后调用的方法内部用Window.open()或者$(form).submit()都可能会被认为是广告。下面我的解决方法是,手动同步发送ajax,之后
将ajax的值赋予变量,再在ajax方法之后调用Window.open()或者$(form).submit()就可以避免这种问题。
   $("#btnAjaxSubmitForm").on('click,function(){
       
       $.ajax({
		url: "test.php",
		async: false,
		success:function(){
		 }
	})
	Window.open()或者$(form).submit()		
    })
    这样就没问题了。
    
</script>


© 著作权归作者所有

粉丝 10
博文 22
码字总数 7160
作品 0
成都
私信 提问
解决window.open() 详解 《弹出框浏览器拦截阻止,和弹出狂隐藏地址栏》 JS页面跳转

最近在做支付宝在线支付,场景:在商务网站选择产品后点击确认购买,把数据传递到后台保存数据库,然后直接执行window.open(URL) 结果发先跳转页面会被浏览器拦截阻止打开窗口!经过研究发现...

郏高阳
2013/04/12
16.6K
7
js post 方式 新开窗口

js中一般新打开窗口很简单直接window.open(url);就可以了, 但是由于我希望传递参数到服务端,而且参数看起来很长一串,而且get方式的提交参数长度是有限制的,因此我有以下需求: 1,js中实...

五大三粗
2015/02/26
40
0
vue项目调微信的支付问题总揽

1、url授权https://blog.csdn.net/sqz635262108/article/details/79208798 2、支付页面的路由必须是授权域名下的直属路由 3、ios手机端在微信浏览器上只会记录首次进入的页面的额url,所以再调...

Js_Mei
01/23
50
0
记一次小坑--关于window.open()

今天在公司的后台项目中遇到一个这样的需求:点击一个按钮,发送一个请求,然后用请求到的中的打开一个新窗口(跳转到另一个后台)。看起来应该没什么问题,很快代码写好了(vue项目,以下是...

nikolausliu
2018/05/11
0
0
img标签src属性值中http协议和https协议的区别

问题:今天给站点配置了证书之后,打开页面发现页面显示异常,同时提示该页面不安全,右上角提示js和图片等资源被拦截,最初以为是证书的问题,反复查看证书配置问题发现证书配置是正常的,如...

fang_faye
06/03
9
0

没有更多内容

加载失败,请刷新页面

加载更多

作为一个(IT)程序员!聊天没有话题?试试这十二种技巧

首先呢?我是一名程序员,经常性和同事没话题。 因为每天都会有自己的任务要做,程序员对于其他行业来说;是相对来说比较忙的。你会经常看到程序员在发呆、调试密密麻麻代码、红色报错发呆;...

小英子wep
今天
17
0
【SpringBoot】产生背景及简介

一、SpringBoot介绍 Spring Boot 是由 Pivotal 团队提供的全新框架,其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程,该框架使用了特定的方式来进行配置,从而使开发人员不再需要...

zw965
今天
5
0
简述并发编程分为三个核心问题:分工、同步、互斥。

总的来说,并发编程可以总结为三个核心问题:分工、同步、互斥。 所谓分工指的是如何高效地拆解任务并分配给线程,而同步指的是线程之间如何协作,互斥则是保证同一时刻只允许一个线程访问共...

dust8080
今天
6
0
OSChina 周四乱弹 —— 当你简历注水但还是找到了工作

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @花间小酌 :#今日歌曲推荐# 分享成龙的单曲《男儿当自强》。 《男儿当自强》- 成龙 手机党少年们想听歌,请使劲儿戳(这里) @hxg2016 :刚在...

小小编辑
今天
3.5K
22
靠写代码赚钱的一些门路

作者 @mezod 译者 @josephchang10 如今,通过自己的代码去赚钱变得越来越简单,不过对很多人来说依然还是很难,因为他们不知道有哪些门路。 今天给大家分享一个精彩的 GitHub 库,这个库整理...

高级农民工
昨天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部