2019年11月第四周前端问题汇总

2019-11-18

• IE/edge自动给数字加下划线

iview 中配置meta?

• input[type='file']选择文件时,前后文件名称一致时,默认文件未修改.

  文件选择时,使用新的input替换旧的input

2019-11-19

• js实现回到顶部--小火箭样式

点击调用window.scroll()事件,火箭位置从下至上,网页位置scrollTop():0

$('html,body').animate({ scrollTop: '0px' }, 800);

2019-11-20

• 获取当前浏览器信息

function myBroswer() {
            var userAgent = navigator.userAgent;
            var isOpera = userAgent.indexOf("Opera") > -1;
            var isIE = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1 && !isOpera;
            var isEdge = userAgent.indexOf("Edge") > -1;
            var isFireFox = userAgent.indexOf("FireFox") > -1;
            var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1;
            var isChrome = userAgent.indexOf('Chrome') > -1 && userAgent.indexOf("Safari") > -1;

            if (isIE) {
                var reIE = new RegExp("MSIE(\\d+\\.\\d+);");
                reIE.test(userAgent);
                var fIEVersion = parseFloat(RegExp["$1"]);
                if (fIEVersion == 7) {
                    return "IE7"
                } else if (fIEVersion == 8) {
                    return "IE8"
                } else if (fIEVersion == 9) {
                    return "IE9"
                } else if (fIEVersion == 10) {
                    return "IE10"
                } else if (fIEVersion == 11) {
                    return "IE11"
                } else {
                    return "0"
                }
                return "IE"
            }

            if (isOpera) {
                return "Opera"
            }
            if (isEdge) {
                return "Edge"
            }
            if (isFireFox) {
                return "FireFox"
            }
            if (isSafari) {
                return "Safari"
            }
            if (isChrome) {
                return "Chrome"
            }
        }

• js实现点击复制

    
    


    
我是复制文本
    点我复制
    

    

• vue-router 页面跳转成功,却不显示组件内容,也不报错

//new VueRouter时, routes 不小心写成 routers
//正确写法
var routerOBj = new VueRouter({
    routes: [
    { path: '/login', component: login },
    { path: '/register', component: register }
    ]
})

2019-11-22

• 静默更改当前页面URL地址

  • history.pushState(state,title,url)
  • 该方法不会触发页面刷新，只是导致history对象发送变化，地址栏会有反应
    • statue:一个与添加记录相关联的状态对象，主要用于popState事件。该事件触发时，该对象会传入回调函数。也就是说，浏览器会将这个对象序列化以后保留在本地，重新载入这个页面的时候，可以拿到这个对象。如果不需要这个对象，此处可以填null。
    • title:新页面的标题。但是，现在所有浏览器都忽视这个参数，所以这里可以填空字符串。
    • url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

  history.pushState({page: 1}, "title 1", "?page=1");

  • 使用该方法后，可以使用history.state属性读出状态对象

  console.log(history.state)  //{page:1}

  • 如果pushState的 URL 参数设置了一个新的锚点值（即hash），并不会触发hashchange事件。反过来，如果 URL 的锚点值变了，则会在 History 对象创建一条浏览记录。
  • 如果pushState()方法设置了一个跨域网址，则会报错。这样设计的目的是，防止恶意代码让用户以为他们是在另一个网站上，因为这个方法不会导致页面跳转。

  // 报错
  // 当前网址为 http://example.com
  history.pushState(null, '', 'https://twitter.com/hello');

  • History.replaceState()
  • 该方法用来修改 History 对象的当前记录，其余同pushState()方法一模一样
  • History.popState()
  • 该事件只针对同一个文档内部的切换操作，如浏览器的前进、后退按钮，或JavaScript调用的history.back()、history.forward()、history.go()方法时才会触发history.popState()事件。
  • 仅仅调用pushState()和replaceState()并不会触发。

  //使用的时候，可以为popstate事件指定回调函数。
  window.onpopstate = function (e) {
      console.log('location:' + document.location)
      console.log('state:' + JSON.stringify(e.state));
  }
  
  //或者
  window.addEventListener('popstate', function (e) {
      console.log('location:' + document.location)
      console.log('state:' + JSON.stringify(e.state));
  })

  • 回调函数的参数是一个event事件对象，它的state属性指向pushState和replaceState方法为当前 URL 所提供的状态对象（即这两个方法的第一个参数）。上面代码中的event.state，就是通过pushState和replaceState方法，为当前 URL 绑定的state对象。
  • 这个state对象也可以直接通过history对象读取。

  var currentState = history.state;

  • 注意，页面第一次加载的时候，浏览器不会触发popstate事件。

• js获取当前URL中的参数

function getUrlParam() {
   var name = window.location.search;
   var obj = new Object;
   if (name.indexOf('?') > -1) {
      var strs = name.substr(1).split('&');
      for (let i in strs) {
         obj[strs[i].split('=')[0]] = decodeURIComponent(strs[i].split('=')[1])
      }
   }
    return obj;
}

//调用
//getUrlParam().page

• Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

• hash 设置或返回从井号 (#) 开始的 URL（锚）。
  host 设置或返回主机名和当前 URL 的端口号。
  hostname 设置或返回当前 URL 的主机名。
  href 设置或返回完整的 URL。
  pathname 设置或返回当前 URL 的路径部分。
  port 设置或返回当前 URL 的端口号。
  protocol 设置或返回当前 URL 的协议。
  search 设置或返回从问号 (?) 开始的 URL（查询部分）。
  

• webpack 打包时报错 ERROR in multi ./src/main.js ./dist/bundle.js
  Module not found: Error: Can't resolve '.\dist\bundle.js' in 'E:\webpack'
  @ multi ./src/main.js ./dist/bundle.js main[1]

  原因：webpack版本过高，原安装命令不适用

  原安装命令

  webpack .\src\main.js .\dist\bundle.js

  更改为

  webpack .\src\main.js -o .\dist\bundle.js

2019-11-23

• require.js 引用jQuery时一直报错：Uncaught TypeError: $ is not a function

  requirejs.config({
      paths: {
          jquery: "../js/jquery-3.4.1"
      }
  })
  
  require(['jquery'], function ($) {
    //jQuery版本过旧，旧版本使用live方法而不是on
    //jquery.js更新到新版本即可
      $(document).on('click', '#btn', function () {
          $('#msg').html('I am coming~')
      })
  })