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实现点击复制
<head>
	<script src="./js/jquery.min.js"></script>
    <script src="./js/clipboard.min.js"></script>
</head>
<body>
	<div id="copyText">我是复制文本</div>
    <button id="copyBtn">点我复制</button>
    <input type="text" id="copyContent" style="z-index: -10;opacity: 0;position: absolute;top: -10;">
<script>
    if (myBroswer() != 'Chrome') {
     //非Chrome
      $('#copyBtn').on('click', function () {
         var text = document.getElementById('copyText').innerText;
         clipboardData.setData("text", text) 
         //第一个参数为要复制内容的格式,第二个参数为要复制的内容

         //clipboardData.clearData(sDataFormat)  删除剪贴板中指定格式的数据
         //clipboardData.getData(sDataFormat)  获取剪贴板中指定格式的数据

         //不支持Chrome
    })
     } else {
      //Chrome
       $('#copyBtn').on('click', function () {
         var text = document.getElementById('copyText')
         var content = document.getElementById('copyContent')
         content.value = text.innerText
         content.select();   //select()只支持input 和textarea
         document.execCommand('copy')
         console.log('复制成功');
     })
}
</script>
    
</body>
  • 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属性指向pushStatereplaceState方法为当前 URL 所提供的状态对象(即这两个方法的第一个参数)。上面代码中的event.state,就是通过pushStatereplaceState方法,为当前 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~')
        })
    })
    
posted @ 2019-11-25 13:42  听袁惟仁敲代码  阅读(149)  评论(0编辑  收藏  举报