【web前端】关于页面中 JS 中windown.open( )方法打开新页面有可能会被浏览器拦截的问题
2014-12-11 17:07
951 查看
前言,在项目中突然间遇到了一个情况,同样的代码怎么有点地方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打开新页面浏览器会好好审核的,如下面的例子,很多浏览器回去拦截。
上面是最简单的2种会被浏览器当成广告的情况,那么该如何避免避免这种情况呢,很简单,我们可以通过以下方法:
现在,先讲下打开新页面的方法,主要有一下几种:
第一种: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>
相关文章推荐
- 关于js自动打开新页面被拦截的解决方法
- 使用window.open()方法打开新页面,被浏览器拦截问题
- 关于运行本地web页面浏览器出现安全拦截提示问题
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
- 百度「Web 前端研发部」面试过程和常见问题 可能会采用哪些方法来面试 STAR 面试法 喜欢什么样的面试者 喜欢问的问题
- 关于用WebView或手机浏览器打开连接问题
- JS判断当前页面是否在微信浏览器打开的方法
- 关于用WebView或手机浏览器打开连接问题
- js 弹出新页面避免被浏览器、ad拦截的一种新方法
- 关于一个URL,在浏览器中能打开,但是在webview中打不开的问题
- WEB页面在输出JS的代码后变形的问题解决方法
- 2015.2.16 关于delphi web控件打开新网页时弹出关闭页面(js代码)出错的解决办法研究
- Web设计中打开新页面或页面跳转的方法 js跳转页面
- Firefox 插件 JSview是一套比较实用的JS,CSS文件查看工具,很方便,很快捷地查看页面引用了哪些文件,作为Web前端开发者是一套必备的插件,由于Firefox升级过快,插件很快不兼容了,这里对插件做了一些调整,可以兼容最新Firefox浏览器(目前FireFox 21)
- 关于混淆打包后,webview 无法调用js方法 的问题
- 关于Exchange Server 2010中OWA页面无法打开问题处理方法
- Web前端:解决浏览器页面回流(reflow)的几种方法
- 【web前端】js刷新父页面:JS用什么方法可以在弹出的子页面刷新父页面?
- 关于web页面缓存问题解决方法,如图片缓存,异步提交数据页面不更新
- 关于在js中关闭浏览器页面的问题