Ajax打开新窗口被浏览器拦截怎么办
最近在做支付时发现打开支付窗口时被浏览器拦截了，百度了一下才发现是因为打开窗口前用ajax验证是否能支付，所以不是用户主动触发的打开ixin窗口，浏览器认为这样不安全，所以给拦截了。
解决办法一
先开始打开一个空的新窗口，然后改变新窗口的url，具体代码为
这种实现方式有个弊端，就是不管ajax有没有成功，都会执行 var wd = window.open();这行代码，所以成功和失败都会打开一个新窗口，除非在失败后进行关闭，但这样用户体验会非常不好，所以我用的第二种方式去实现的。
解决办法二
因为ajax是默认是异步的，这样性能高，用户体验好，但这也导致了安全问题，要让浏览器认为弹出新窗口是安全的，必须让弹新窗口之前所有的ajax是同步的，具体代码为
一、html的表单
表单负责网页中用户输入数据采集的功能，利用<form>标签来定义一个表单。<form>...</form>form标签中间的数据将会上传至服务器处理
二、表单中最重要的元素——<input>元素
input必不可少的type属性有很多种类型，我们来逐一讲解一下。
1.text属性，<input type="text">
text是用来文本输入的，举个例子，在页面主体里添加：
<form> 搜索：<input type="text" name="search"> </form> |
即可实现搜索框的外观。当然，这样只有外表没有功能……
2.单选按钮输入，<input type="radio">
radio是用来定义单选按钮的，让用户在多个选项里选择一项的功能即是通过radio实现。举个例子，在页面主体里添加：
<form> <p>1加1等于几？</p> <p><input type="radio" name="answer1" value="1">1<input type="radio" name="answer2" value="2">2</p> </form> |
可以实现简单的选择功能。其中name属性的用法是当type属性是radio单选时，选择操作只能在name值相同的input标签里选择一项，得以实现单选功能。value用来上传真实的值，提交表单时选中的input的value值会被上传，与数据库进行互动，不过这是后话了。
3.表单的提交，<input type="submit">
type属性的submit是最常用最一般的提交表单的方法，给type submit取value值，可以直接在提交按钮上显示出value值。另外，表单的提交提交需要给form开
标签actin属性来指定表单的上传时的动作，如果省略action属性不写，action会默认为当前页面。将刚才学到的内容结合起来，写一个有提交按钮的表单：
| <form action="form.php"> <p>账号：<input type="text" name="usna"></p> <p>密码：<input type="password" name="password"></p> <p>1加1等于几？</p> <p><input type="radio" name="answer" value="a1" checked>1<input type="radio" name="answer" value="a2">2</p> <input type="submit" value="提交"> </form> |
这里的type password是用来定义密码输入的，输入文本都会以"*"星号表示，用法跟text一样，就不多说了。这篇教程我们学习到了html表单的基础，下一篇会进行拓展，制作一个复杂的表单。
小编分享的这篇文章介绍了Bootstrap中popover的用法，作者写的很详细，有需要的同学可以看一看最近在自学Java Web基础，搭建自己的页面时候用到了Boostrap的JS库。由于之前没有接触过JQuery，所以用起来磕磕绊绊，所以在这里简单记一下Boostrap中我用到的JS插件的一些用法。
第一个用到的就是Boostrap中的popover插件。原因是一个简单的注册界面需要验证用户名是否合法，是否已被注册，密码是否合法，再次输入密码是否和之前的密码匹配等，需要用到popover来进行信息警告。
首先一个简单的例子:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<divclass="container"style="padding: 100px 50px 10px;">
<buttontype="button"id="button1"class="btn btn-default"
data-container="body"data-toggle="popover">
左侧的 Popover
</button>
</div>
<script>
$(function (){
$('#button1').popover({
trigger: 'click',
title: "test1",
placement: 'right',
content: 'hello'
});
});
</script>
|
可以看到，在使用API进行popover编程时，一定要引用$(‘#element').popover()对id=”element”的控件进行popover激活。之前就是直接复制官网上的代码，发现点击后并不能trigger，一直很困惑。然后用name=”element”是不能激活popover的。
要是需要为input框添加popover效果，则只需要trigger='focus'即可。但似乎不支持blur，不能在blur之后判断input框中的内容是否合法从而触发popover。这个还需后续再研究。
性能真的很重要吗？
性能很重要，这个大家都知道。为什么我们还要做出速度很慢的网站，给用户一个糟糕的体验呢？呵呵，让我们进入重点。
HTML
一.避免内链/嵌入式代码：
1) 内联式: 在HTML标签的style属性中定义样式，在onclick这样的属性中定义Javascript代码;
2) 嵌入式: 在页面中使用<style>标签定义样式，使用<script>标签定义Javascript代码;
3) 引用外部文件: 在<style>标签中定义href属性引用CSS文件，在<script>标签中定义src属性引入Javascript文件.
1,2虽然减少了http请求数，但是增加了html的大小，相比3的总体大小甚小，便于分工操作，便于维护。
二.样式在上，脚本在下：
|
<html>
<head>
<metacharset="UTF-8">
<title>Browser Diet</title>
<!-- CSS -->
<linkrel="stylesheet"href="style.css"media="all">
</head>
<body>
<a>hello</a>
<!-- JS -->
<scriptasyncsrc="script.js"></script>
</body>
</html>
|
1）样式在head里面，页面渲染很快，会使用户感觉页面加载很快。反之，会先看到错乱的页面布局，给人感觉不好。
2）脚本在上会影响html的渲染或并行加载，并且首屏加载，用户一般不需要看到功能，所以脚本在下为好。尝试用异步加载脚本的属性：async
三.压缩html
为了保持代码的可读性，最好的方法是在代码中添加注释和使用缩进。
但是对于浏览器来说，这些都是不重要的。正因为如此，通过自动化工具压缩你的HTML是非常有用的。
通过移除多余的空白符、注释和一些与内容结构无关的的不需要的字符，能够节省一些字节。尝试用gzip压缩方式。
四.减少dom结点
用语义化的标签来代替万能的div。
五.《html写法对gzip压缩率的影响》
书写标签属性时，最好多个相同标签属性值顺序一致。可以使gzip压缩更快。
CSS
一.压缩css
通过自动化工具压缩css，同压缩html。重复性的代码学会提炼。
二.合并多个css
普遍通过cdn合并或公司的合并工具进行合并，有效减少http请求数量。
三.合理使用css表达式
不是所有人都能合理使用css表达式的。所以把功能都交给javascript。css我们要休息一下喽。
IMAGES
一.使用css sprite
将psd里面小的图层整合到一张图层里面，布局完成。布局要紧促。对于有些图片有毛边的，可以设置杂边的颜色。也可以将png-8设置成png-24(ie6滤镜处理)
二.用base64图片编码替代普通css sprite图片
使用前：
|
.img {
background-image:url('image.png');
}
|
使用后：
|
.img {
background-image:url('data:image/png;base64,iVBORw0KGgo');}
|
base64图片编码只针对于单独的图片，而不是css sprite图片，支持主流浏览器及ie8以上。可以减少http请求数量，但是对于没有gzip压缩的html,css来说，减少http请求得来的大文件是不可取的。
三.优化图片
图片格式要控制好，在图片质量ok的情况下，png,jpg,gif格式根据情况合理利用。一般css sprite用png格式，动画图片用gif格式，色彩鲜艳的广告图片用jpg.
图片大小要控制好，网站可以缓存图片。一般一张广告图片要在100k左右，如果图片实在太大，可以将一张图片切成几块，拼接而成。
某前端css网站声明，凡是必须用图片来布局的都是耍流氓。随着css3的流行，这句话将成为一句座右铭。
四.《Progressive JPEG 解析》
综述，连续的jpg格式对性能更好。
JAVASCRIPT
一.异步加载文件
|
varvst = document.createElement('script');
vst.type ='text/javascript';
vst.async =true;
vst.src =srcIndex;
vars = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(vst, s);
|
当一些第三方文件等下载成了问题，或是导致页面加载负重。我们就需要异步加载这些文件，async是个好的方式。
二.将循环的对象存储
使用前：
|
var str = "nanananana";
for (var n = 0; n < str.length; n++) {}
|
使用后：
|
varstr ="nanananana",
strLgth = str.length;
for(varn = 0; n < strLgth ; n++) {}
|
循环对性能的消耗是很大的，将循环的对象存储，减少每次循环都要进行对象的计算。
三.最小化减少回流和重绘
使用前：
|
varcoored = document.getElementById("ctgHotelTab");
document.getElementById("ctgHotelTab").style.top = coored.offsetTop + 35 +"px";
|
使用后：
|
varcoored = document.getElementById("ctgHotelTab"),
offetTop = coored.offsetTop + 35;
document.getElementById("ctgHotelTab").style.top = offetTop +"px";
|
当一个元素的布局不变，外观发生改变时，就会引起重绘。
当你设置style.top时，浏览器需要重新计算布局，我们每次请求offsetTop时，都会使浏览器重新计算布局，改变一个布局，就会导致回流。
四.压缩javascript
通过自动化工具压缩js。同html和css。
五.合并多个js文件
普遍通过cdn合并或公司的合并工具进行合并，有效减少http请求数量。
六.源生js和框架js相比，针对循环，for比each要好。
性能测试工具
我经常使用的是YSLOW。page speed也不错。都会给你一些性能上的建议。
总结
性能很重要，毋容置疑。我的只是工作上的分享，仅供参考。详见：http://browserdiet.com/zh/
相关文章
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值，下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了js如何实现浏览器打印功能，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-07-15
- 其实挺简单的就是if(navigator.userAgent.indexOf('UCBrowser') > -1) {alert("uc浏览器");}else｛//不是uc浏览器执行的操作｝如果想测试某个浏览器的特征可以通过如下方法获取JS获取浏览器信息 浏览器代码名称：navigator...2015-11-08
js代码判断浏览器种类IE、FF、Opera、Safari、chrome及版本
第一种，只区分浏览器，不考虑版本 复制代码 代码如下:function myBrowser(){ var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isOpera = userAgent.indexOf("Opera") > -1; if (isOp...2014-05-31- 这篇文章主要介绍了C# Winform中实现主窗口打开登录窗口关闭的方法,这在需要用户名密码的软件项目中是必用的一个技巧,要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了详解Vue Cli浏览器兼容性实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-09
- 最近项目不多忙，于是抽点时间巩固下切换窗口问题，感兴趣的朋友跟着小编一起学习吧...2020-06-25
- 这篇文章主要介绍了Element图表初始大小及窗口自适应实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-07-10
- 下面小编就为大家带来一篇C#中添加窗口的步骤详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2020-06-25
- 这篇文章主要介绍了如何使用 JavaScript 操作浏览器历史记录 API，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下...2020-11-24
- 这篇文章主要介绍了Python获取浏览器窗口句柄过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-07-26
- 这篇文章主要给大家介绍了关于vue如何调用浏览器分享的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-20
- 在网站前端开发中，浏览器兼容性问题本已让我们手忙脚乱，Chrome的出世不知道又要给我们添多少乱子。浏览器兼容性是前端开发框架要解决的第一个问题，要解决兼容性问题就得首先准确判断出浏览器的类型及其版本。 JavaScrip...2014-05-31
- 这篇文章主要介绍了解决vue-router路由拦截造成死循环问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-05
C# Windows API应用之基于GetDesktopWindow获得桌面所有窗口句柄的方法
这篇文章主要介绍了C# Windows API应用之基于GetDesktopWindow获得桌面所有窗口句柄的方法,结合实例形式分析了GetDesktopWindow函数用于获取窗口句柄的具体使用方法与相关注意事项,需要的朋友可以参考下...2020-06-25- 这篇文章主要介绍了JAVA读取文件流,设置浏览器下载或直接预览操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-09
- C#获取进程的主窗口句柄的实现方法，需要的朋友可以参考一下...2020-06-25
- 这篇文章主要介绍了Pyqt5 实现窗口缩放,控件在窗口内自动伸缩的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-09
- 由于国内好几个浏览器都是双核浏览器（蛋痛，做一个浏览器壳就说国产，而且使用率高），有时打开网页会出现不兼容模式，在极速模式下是好的，现在我们来用代码实现网页自动调用国内...2016-09-20
- 这篇文章主要介绍了C# 模拟浏览器并自动操作的实例代码，文中讲解非常细致，帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-11-03