前端遇到的问题及解决方案:

页面内容不足以铺满屏幕高度时，footer 居底显示:

要实现的效果就是，在主要内容不足以铺满整个屏幕的情况下，footer居于屏幕低部显示，使得整个页面占满屏幕。而当主要内容高度大于整个屏幕高度的时候，footer跟随主要内容进行显示；方法一： html

<div class="page">
  主要页面
</div>
<footer>底部</footer>

css

html,body{
  height: 100%;
  margin: 0;
  padding: 0;
}
.page{
  box-sizing: border-box;/*为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制*/
  min-height: 100%;
  padding-bottom: 300px;
}
footer{
  height: 300px;
  margin-top: -300px;
  opacity: 0.5;
}

主要内容放在page内部，page最小高度为100%（注意这里html，body高度也要设为100%）。page有个padding-bottom大小为footer的高度（按需要调整），最重要的一点page的box-sizing:border-box，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，也就是说page的padding-bottom也会设定在min-height：100%内。而footer的margin-top为负的自身高度，把自己拉到page的padding-bottom空白块上，从而达到需求效果。

优点：简洁明了，没有冗余的div盒子；

缺点：box-sizing:border-box; 的兼容问题,ie7以下包括ie7不支持；

方法二： html

<div class="page-container">
  <div class="page-main">
    主要页面 
  </div>
  <footer>底部</footer>
</div>

css

html,body{
  height: 100%;
  margin: 0;
  padding: 0;
}
.page-container{
  position: relative;
  min-height: 100%;
}
.page-main{
  padding-bottom: 300px;
}
footer{
  position: absolute;
  left: 0;
  bottom: 0;
  height: 300px;
}

主要内容放在page-main里面，page-container最小高度100%（注意这里html，body高度也要设为100%），position为relative。footer的position为absolute，相对于page-container居于底部。page-main有个padding-bottom为footer的高度（根据需要调整），从而达到需求效果；

优点：兼容性比较好，ie6放弃治疗；

缺点：套了两层div；

上面两种方法都只针对底部高度固定的情况，不能解决底部高度不固定的情况，一般情况下，网站的底部都是放一些友情链接之类的东西，如果你的项目要求这些友情链接是后台可配置的，数量不固定，导致底部高度不固定呢？好吧，除了用js来动态获取高度然后设置底部高度以外，还有什么用css就直接解决的好的方法么？

页面多个音频 audio 只允许播放一个 js 解决方案: (video 同理)

const audios = document.getElementsByTagName("audio");
// 暂停函数
function pauseAll() {
  let self = this;
  [].forEach.call(audios, function (i) {
    // 将audios中其他的audio全部暂停
    i !== self && i.pause();
  })
}
// 给play事件绑定暂停函数
[].forEach.call(audios, function (i) {
  i.addEventListener("play", pauseAll.bind(i));
});

↑ Back to Top

Vscode 格式化 vue Template 代码段

1、安装 vetur

2、在 User Setting 中增加设置: "vetur.format.defaultFormatter.html": "js-beautify-html"

3、搞定 : 格式化快捷键：Alt+Shift+F

↑ Back to Top

input标签怎么才能只输入数字？

  <!-- h5的标签属性 -->
  <input type="number" name="" id="" value="" />

用谷歌试了一下，的确行。可是问题来了。用 ie 浏览器，火狐就不买账了，出现了兼容问题，想了很久，百度了一下，找到一个比较靠谱的方法。

<input type="text" onkeypress="return event.keyCode>=48&&event.keyCode<=57" ng-pattern="/[^a-zA-Z]/" />

<!-- 通过onkeyup事件是输上后再去掉非数字字符  -->

<input type="text" onkeyup="value=value.replace(/[^\d]/g,'') " ng-pattern="/[^a-zA-Z]/">

<!-- 加上正则匹配不能输入非数字字符ng-pattern="/[^a-zA-Z]/"。 -->

↑ Back to Top

XSS 攻击, 根据攻击的来源: 反射型/ 存储型/ DOM 型

防范存储型 XSS 攻击的策略就是不相信一切用户提交的信息，比如说用户的评论、发表的文章等等。对于这些信息一律进行字符串转义，主要是引号、尖括号、斜杠

function escape(str) {
  str = str.replace(/&/g, '&amp;')
  str = str.replace(/</g, '&lt;')
  str = str.replace(/>/g, '&gt;')
  str = str.replace(/"/g, '&quto;')
  str = str.replace(/'/g, '&#39;')
  str = str.replace(/`/g, '&#96;')
  str = str.replace(/\//g, '&#x2F;')
  return str
}
// "&lt;script&gt;alert(1)&lt;&#x2F;script&gt;"
escape('<script>alert(1)</script>')

在显示富文本的场景下其实不能把所有的内容都转义了，因为这样会把需要的格式也过滤掉。

对于这种情况，通常考虑采用白名单过滤的办法。

// 使用 js-xss 开源项目
const xss = require('xss')
let html = xss('<h1 id="title">XSS</h1><script>alert("xss");</script>')
// -> <h1>XSS</h1>&lt;script&gt;alert("xss");&lt;/script&gt;
console.log(html)

JS 和 CSS 变量共享。关于 JS 和 Sass/Less 变量共享，我们摸索出了自己的解法：

给2019前端的5个建议

// src/styles/variables.js
module.exports = {
  // 主颜色
  'primary-color': '#0C4CFF',
  // 出错颜色
  'error-color': '#F15533',
  // 成功颜色
  'success-color': '#35B34A',
};

以下为 Webpack 配置，注入变量到 Scss

// webpack.config.js
const styleVariables = require('src/styles/variables');

// ...
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader?sourceMap&minimize',
          {
            loader: 'sass-loader',
            options: {
              data: Object.keys(styleVariables)
                .map(key => `\$${key}: ${styleVariables[key]};`)
                .join('\n'),
              sourceMap: true,
              sourceMapContents: true
            }
          }
        ]
      }
//...

在 scss 文件中，可以自己引用变量

// page.scss
.button {
  background: $primary-color;
}

键盘事件(keyCode): 上下左右移动元素

var oH3 = document.getElementById("h3");
document.onkeydown = function(ev){
  var ev = ev || window.event;
  switch(ev.keyCode){
    case 37:
    case 100:
      oH3.style.left =  oH3.offsetLeft - 10 + "px";
    break;
    case 38:
    case 104:
      oH3.style.top = oH3.offsetTop - 10 + "px";
    break;
    case 39:
    case 102:
      oH3.style.left = oH3.offsetLeft + 10 + "px";
    break;
    case 40:
    case 98:
      oH3.style.top = oH3.offsetTop + 10 + "px";
    break;
    default:
      console.log("请按上下左右键");
    break;
  }
  console.log(oH3.offsetTop+"+"+oH3.style.top);
  console.log(ev.keyCode);
}

如何解决js递归里面出现的堆栈溢出(setTimeout) ```js var list = readHugeList();

var nextListItem = function() { var item = list.pop();

if (item) { // process the list item… nextListItem(); } };

```js
var list = readHugeList();

var nextListItem = function() {
  var item = list.pop();

  if (item) {
    // process the list item...
    setTimeout( nextListItem, 0 );
  }
};

堆栈溢出之所以会被消除，是因为事件循环操纵了递归，而不是调用堆栈。当 nextListItem 运行时，如果 item不为空，timeout函数（nextListItem）就会被推到事件队列，该函数退出，因此就清空调用堆栈。当事件队列运行其timeout事件，且进行到下一个 item 时，定时器被设置为再次调用 nextListItem。因此，该方法从头到尾都没有直接的递归调用，所以无论迭代次数的多少，调用堆栈保持清空的状态。

CSS

修改滚动条默认样式

  &::-webkit-scrollbar {/*滚动条整体样式*/
    width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }
  &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: @borderColor;
  }
  &::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 10px;
    background: transparent;
  }

Fe Solutions

前端遇到的问题及解决方案:

CSS

xn213