1、检测页面不可见

// 页面的 hidden属性,false,true;document.addEventListener('visibilitychange', function () {// 页面变为不可见时触发if (document.visibilityState == 'hidden') {console.log('visibilitychange'); }});

2、获取数据中的/，替换成br，达到换行的效果

$(this).html($(this).html().replace("/", "<br>"));

3、bootstrap中，会有tooltip宽度需要变动的时候。

.tooltip-inner {  width: 240px;  max-width: 300px !important;  background: rgba(0, 0, 0, 0.8) !important; }

4、html中怎么下载例如pdf这种资源文件，而不是在点击浏览器的窗口中打开它们？

在标签元素中设置一个下载属性即可。例如：<a href="; download="文件名称”>点击下载</a>tip:在手机浏览器中，会出现问题，就是因为download引起的，慎用。

5、判断是否空对象？

 1）通过JSON自带的.stringify方法来判断  //JSON自带的stringify方法，将json转成json字符串  var c = {};  if(JSON.stringify(c) == "{}"){     console.log("是空对象"); } 2）ES6新增的Object.keys() ，判断对象keys长度是否为0   if(Object.keys(obj).length==0){     console.log("es6 通过判断key的长度是否为0：是空对象");   }else{ console.log("es6 通过判断key的长度是否为0：不是空对象");    }  3）通过jquery提供的isEmptyObject(obj)    jQuery.isEmptyObject({});//true jQuery.isEmptyObject({'foo':'bar'});//false

6、data[30551][]: 3 &&data[30556][]: 2 这种参数的溯源？

var changeAnswers = {}; $('*[data-type]').on('change', function(){   var name = $(this).attr('name');   var values = [];   $('input[name='+name+']:checked').each(function(){    values.push($(this).val()); });     changeAnswers[name] = values; }    ); //将changeAnswers 参数传递过去$.post(url, { data: changeAnswers},function(){   changeAnswers = {};//清空对象}

7、unbeforeunload()事件

定义：在即将离开当前页面（刷新或关闭）时执行触发。该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。

8、white-space ---主要针对textarea输入空白或者换行保持一致。

属性设置如何处理元素内的空白，这个属性声明建立布局过程中，如何处理元素中的空白符。值pre-wrap和pre-line是css2.1中新增的。

.textareaPre{    white-space: pre !important;    white-space: pre-line !important;}

宣传单显示二维码

 <div class="box">   <img  src="<?=$customer_service['m_url'] ?>" class="widthaudo"> </div>//box 限制区域 .customer-service .box{   width: 132px;   height: 132px;   overflow: hidden;   position: relative;   margin: 0px auto; }// img 移动要显示的位置，放出来.widthaudo{  position: absolute;  top: -36px;  left: -571px;          }

引用自定义图标库svg+字体库文件.ttf等

@font-face

，矢量图标素材分享网，是一个提供一系列的矢量图标素材的博客站点，还有免费的HTML5应用程序的自定义图标字体。/* 引用自定义图标库svg */  @font-face {	font-family: 'sl-icon';	src:  url('/static-dist/app/fonts/ff-icon.eot?q2d78v');	src:  url('/static-dist/app/fonts/ff-icon.eot?q2d78v#iefix') format('embedded-opentype'),	  url('/static-dist/app/fonts/ff-icon.ttf?q2d78v') format('truetype'),	  url('/static-dist/app/fonts/ff-icon.woff?q2d78v') format('woff'),	  url('/static-dist/app/fonts/ff-icon.svg?q2d78v#sl-icon') format('svg');	font-weight: normal;	font-style: normal;  }.sl-icon {    font-family: 'sl-icon' !important;    font-style: normal;    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale}.sl-icon-shoujihao1_icon:before {	content: "\e903";  }

white-space 的值：pre-line与pre-wrap。

css3为white-space新增了2个非常高冷的值：pre-line与pre-wrap。

现在我们来看一下它们与pre之间的区别呢？

pre:会保留空格，但我想它与pre-line/pre-wrap最大的不同点就是不会自动换行，单行走到底，直到遇到一个换行符才会换行。（所以被嫌弃了么→ →）

pre-line与pre-wrap都会自动换行（点个赞~~~）

但pre-line会把多个空格合并成一个。

而pre-wrap会保留空格。

上传图片限制

//点击变换图片$html.off('change','input.js_upload_pic_btn').on('change','input.js_upload_pic_btn',function(){  var $t = $(this);  $parent = $t.parents('div.js_t_v_list');  file = this.files[0];  fileName = $t.val();  if(!file){    return false;  }  ext =/\.[^\.]+$/.exec(fileName);  ext = ext.toString().toLocaleLowerCase();  if(ext =='.jpeg' || ext =='.png' ||ext =='.jpg' || ext =='.gif'){    return false;  }  $key = $parent.find('input.js_key');  $token = $parent.find('input.js_token');  key = $key.val();  timeStr = new Date().getTime();  key = key + timeStr;  key = key + ext;  token = $token.val();  $uploadFileBox.addClass('disable');  $inputFile.attr('disabled','disabled');  Qiniu_upload_img(file,token,key,$parent);  $t.val('');//清空已上传的文件});//第2种读取图片// 读取图片function loadFileReader(file) {  var fileReader = new FileReader();  if (file && file.type.match('image')) {    fileReader.readAsDataURL(file);    fileReader.onload=function(e){      initCropitPanel(this.result); // 初始化头像弹框    }  } else if (file) {    console.log('load image file error');  }};// 点击修改头像$('#J_cropitFileInput').off('change').on('change',function(){  file = this.files[0];  loadFileReader( file ); // reader file});

浏览器混合内容阻止

https网站静态内容被阻止，page was loaded over HTTPS, but requested an insecure stylesheet解决办法

Mixed Content: The page at '; was loaded overHTTPS, but requested an insecure stylesheet';. This request has been blocked; the content must be served over HTTPS.意思是我主域名kungge.com使用的https，而请求的确实http协议的域名数据，被浏览器认为是不安全的，所以被阻止了。解决办法：页面的head中加入：<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">意思是自动将http的不安全请求升级为https

我在项目中遇到类似情况，但是从第三方服务器资源拿到本地就解决了这样的问题，所以这也算一种参考吧。

jquery的$post 方法不发送空数组的解决方法

前提：后端需要前端传过来空数组的参数。 参数都在，但是发送不了，原因是：

ajax请求会自动忽略空数组参数，无论请求方法是get 还是post请求，都会忽略空数组。

解决方案： data为[], 要以json 格式传输。

“Uncaught RangeError: Maximum call stack size exceeded”超出最大调用值

“Uncaught RangeError: Maximum call stack size exceeded”。错误直译过来就是“栈溢出”。当运行js时出现这个报错，但你又查不到原因的时候，不要慌。

真相就是你的代码进入死循环了。浏览器会在不停执行超出最大调用值时报这个异常，排查方向可以看判断条件是否写的不完整。

使用<a>标签时，你可能会忽略的一个安全问题

当一个外部链接使用了target=_blank的方式，这个外部链接会打开一个新的浏览器tab。此时，新页面会打开，并且和原始页面占用同一个进程。这也意味着，如果这个新页面有任何性能上的问题，比如有一个很高的加载时间，这也将会影响到原始页面的表现。如果你打开的是一个同域的页面，那么你将可以在新页面访问到原始页面的所有内容，包括document对象(window.opener.document)。如果你打开的是一个跨域的页面，你虽然无法访问到document，但是你依然可以访问到location对象。

这意味着，如果你在你的站点或者文章中，嵌入了通过新窗口打开一个新页面的链接，这个新页面可以使用window.opener，在一定程度上来修改原始页面。

那么问题来了：我们如何阻止这种情况的发生呢？在所有使用target=_blank打开新页面的链接上，加上rel="noopener"。

<a href="; rel="noopener"></a>

使用了rel=noopener以后，当一个新页面通过一个链接打开后，新页面中的恶意JavaScript代码将无法通过window.opener来访问到原始页面。这将保证新页面运行在一个单独的进程里。

在老浏览器中，你可以使用rel=noreferrer属性，具有同样的效果。但是，这样也会阻止Refererheader被发送到新页面。

<a href="; rel="noopener noreferrer"></a>

在上面的例子中，使用了rel="noreferrer" ，当一个用户点击了这个超链接进入到新页面后，新页面拿不到referrer信息。这将意味着，新页面不知道用户是从哪里来的。

如果你通过JavaScript中的window.open打开一个页面的话，上文所说的都适用，因为你也是打开了一个新的窗口。在这种情况下，你不得不清楚掉opener对象：

var newWindow = window.open(";);newWindow.opener = null;

在我看来，使用第一种解决方案(在每一个target="_blank"的链接中加上rel="noopener")是没有什么明显的坏处的。这个问题表明，在你的网页安全性中找到漏洞是多么的容易。

nofollow 告诉机器（爬虫）无需追踪该目标页

noopener 在新标签中打开链接时基本不会打开它的开启者

noreferrer 隐藏引用者信息