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属性指向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~') }) })
