大家好，欢迎来到IT知识分享网。

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="http://link/to/file" 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

https://icomoon.io/app/#/select
Icomoon，矢量图标素材分享网，是一个提供一系列的矢量图标素材的博客站点，
还有免费的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 'https://www.kungge.com/technews' was loaded over
HTTPS, but requested an insecure stylesheet
'http://alyoss.kungge.com/NewContent/css/bootstrap.min.css'. 
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="https://niteshsoni.info" rel="noopener"></a>

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

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

<a href="https://niteshsoni.info" rel="noopener noreferrer"></a>

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

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

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

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

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

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

noreferrer 隐藏引用者信息