当前位置: 首页 > Web前端 > HTML5

h5项目各种小问题的解决方法

时间:2023-04-05 20:40:00 HTML5

继续更新MP3AudioContext不允许启动。不允许启动AudioContext。必须在页面用户手势后恢复(或创建)在PC端打开chrome浏览器,新建一个标签页,地址栏输入chrome://flags/#autoplay-policy,选择Nousergestureis需要,然后重新启动浏览器。这是chrome浏览器更新版本后的新安全策略。判断iOS系统版本号if(navigator.userAgent.match(/iphone/i)){varverinfo=navigator.userAgent.match(/os[\d._]*/gi);版本=(verinfo+"")。replace(/[^0-9|_.]/ig,"").replace(/_/ig,".");//获取具体系统版本号console.log(version);}【M】iOS12微信输入法键盘弹出H5页面无法恢复//判断ios系统varu=navigator.userAgent;if(u.indexOf('iPhone')>-1){varflag;$('body').on('focus','input',function(){flag=false;});$('body').on('blur','input',function(){flag=true;setTimeout(function(){if(flag==false){returnfalse;}else{document.body.scrollTop=document.body.scrollTop;}//防止多输入切换时过度操作},0)});}【M】微信JSSDK分享朋友圈成功不回调。如果微信分享到朋友圈后的回调方法中使用了ajax,需要配置为同步(async:false),否则没有回调。varshare_opts={title:'第一届表情包王争霸赛,这些00后看不懂的表情包,你能pick到多少?',desc:'1分钟,挑战10题,电影、动漫、游戏……答对有奖!快来挑战吧!>>',img:'../images/share.jpg',url:location.href.split('#')[0],key:'',successCallback:function(){$.ajax({类型:'post',数据类型:“json”,异步:false,url:“common/share.php”,数据:{'url':location.href.split('#')[0]},成功:函数(data){if(data.status==1){alert("分享成功,可以再次挑战!");window.location.href=window.location.href;}}});}};$(function(){weixin_jssdk_ops.init(share_opts);});[swiper]4.0滚轮不能滚动参数3.0mousewheelControl:true,//启用鼠标切换4.0mousewheel:true,//启用鼠标切换解决方案//底层库类注释执行代码//Search//B.handle////评论//if(!s.mouseEntered&&!a.releaseOnEdges)//return!0;【M】逐帧动画抖动的rem解决方案https://aotu.io/notes/2017/08/14/fix-sprite-anim/【M】音频标签在Mac上不可用动态改变微信标题var$body=$('body');document.title='5班老同学(35)';var$iframe=$("");$iframe.on('load',function(){setTimeout(function(){$iframe.off('load').remove();},0);}).appendTo($body);判断是否为微信环境函数isWeChat(){this.ua=navigator.userAgent.toLowerCase();返回this.ua.match(/MicroMessenger/i)=='micromessenger'?true:false;}解决蓝色背景a,button,input,optgroup,select,textarea,div{-webkit-tap-highlight-color:rgba(0,0,0,0);/*删除一个,输入和按钮点击蓝色外边框灰色半透明背景*/}判断浏览器版本插入HTML提示函数if(!!window.ActiveXObject||"ActiveXObject"inwindow){$('body').append('您使用的浏览器版本过低,可能会影响您浏览本页,建议升级您的浏览器:谷歌浏览器

').css('padding-bottom','200px');};前端引用外链通知//正常引用外链//防止外部链接加载慢,加入异步加载//方法一——async该方法只兼容高版本//方法2动态创建JS(function(){varhm=document.createElement("script");hm.src="http://x.js";vars=文档。getElementsByTagName("正文")[0];s.appendChild(hm);})();监控视频播放或暂停事件varmyVideo=document.getElementById('video');myVideo.addEventListener('play',function(){//播放执行});myVideo.addEventListener('pause',function(){//暂停执行})在UC浏览器中,可以点击背景图片。Bug描述#当背景图采用img方式时,在UC浏览器下(其他浏览器没有),点击背景图,浏览器会把它当成图片进行分析,弹出背景图解决方法#给img标签添加点击事件,去掉浏览器的默认行为#将img改为background(在css中把图片变成背景图片)代码示例//html[PC端]CKobject多个视频同时播放-其他视频不关闭API文档http://www.ckplayer.com/manual/在线示例http://act.leiting.com/wd/201705/pk/pc/index.html代码if(CKobject.getObjectById('ckplayer_a1')){CKobject.getObjectById('ckplayer_a1').videoPause();}if(CKobject.getObjectById('ckplayer_a2').playOrPause){CKobject.getObjectById('ckplayer_a2').playOrPause();}【手机端】上传附件苹果手机目前只支持上传图片和视频格式的文件,暂不支持其他格式的文件。安卓手机多支持各种格式上传,部分机型不支持或失败。建议:上传非图片格式的文件最好在PC端进行//错误演示浏览器模拟iphone时,各种文件都可以上传(格式以真机为主)//正确演示iphone当前只支持获取图片和视频格式文件上传(真机测试结果)【移动端】使用边距排版问题和边距排名问题,最好使用定位【移动端】使用边距排版问题【移动端】点击时事件无法触发JS创建DOM,无法绑定原事件,事件委托失败。//错误演示$('.picture').on('click',function(){alert(1)})//正确演示(在$('.productul')下创建DOM)使用绑定$('.productul').on('click','.picture',function(){alert(1)})迅雷游戏机(function(){this.log=window.console.log;this.log('%cL%ce%ci%cT%ci%cn%cg%cG%ca%cm%ce','font-size:30px;color:#32e60b;','font-size:30px;颜色:#64d41b;','字体大小:30px;颜色:#97e012;','字体大小:30px;颜色:#f9f701;','字体大小:30px;颜色:#fe9e00;','font-size:30px;color:#d4651b;','font-size:30px;color:#5f3b7a;','font-size:30px;color:#3d319a;','font-size:30px;color:#313eb0;','字体大小:30px;颜色:#1f38ac;','字体大小:30px;颜色:#0b1479;');this.log('我们是XXXXXXX-%c平台的Web前端团队','color:#fd6a7f;font-weight:bold;');this.log('XXXXXX总是实现-%c来为用户创造更好的体验','color:#fd6a7f');this.log('加入XXXXXX-%chttp://BAIDU.com/','color:#fd6a7f');this.log('%c','padding:30px140px;line-height:100px;background:url("logo.png")no-repeat;background-size:100%100%;');this.log('%c------','color:pink')})();JS如何判断是否是iphoneX?functionisIphoneX(){return/iphone/gi.test(navigator.userAgent)&&(screen.height==812&&screen.width==375)}