H5开发中的故障

本篇博文会不断的收录我在作H5页面时遇到的问题以及解决方案，固然有的问题，我也没有遇到好的解决方案，因此若是你有解决的办法，请务必不吝赐教！

---

H5开发中的故障

• 音频或者是含有声音的视频在chrome下没法自动播放
• 移动端 Iframe滚动条问题
• 微信APP返回按钮不刷新页面
• 返回上一页
• 分享内容动态改变
• 跨域的分享连接
  [..持续更新中..]

音频或者是含有声音的视频在chrome下没法自动播放

在新版本的 Chrome下音频或者是带有声音的视频若是设置了自动播放，便会被浏览器视为噪音而被屏蔽，解决的办法很简单，那就是为 vidoe 或者是 audio 添加一个 muted 属性一开始就为静音状态，而后调用一个异步JS来将音量调整为100。

setTimeout(function(){ oVideo.volume=100 }, 100);

移动端 Iframe滚动条问题

实际上 iframe 在移动端上的应用很是少，这里要友情提示下：“能不用，就坚定不用”。这是由于在移动端浏览器上其 bug 太多，并且在低版本与高版本中的 Android或者是 IOS中也不尽相同。
本人由于须要在移动端上经过 iframe 来嵌套登陆注册的需求，因此就遇到了一个活生生的教训，“滚动条不出现，或者是不能滚动”。而且因为手上可供测试的机型太少，因此我大体总结了 iframe 在移动端的出现问题的状况：
首先，在低版本的 IOS或者是 Android上，给 iframe 设置 overflow:scroll 并不会出现滚动条，或者说根本就没有滚动条。

对于这种问题，咱们能够经过为被嵌套页面（也就是iframe中的页面）设置滚动条，从而在iframe中进行滚动来解决。

而在高版本的 IOS或者是 Android中已经能够支持 iframe 出现滚动条，可是在 IOS中却还有一个问题，那就是一旦 iframe 或者是其上级元素只要应用了position:fixed 定位就会致使滚动条失效。

解决这一问题也很简单，那就是在避免采用 position:fixed 定位，使用其它定位方式进行替代。

也或者能够给iframe所在页面定义以下样式：

body,html{width:100%;height:100%}
iframe{width:100%;height:100%}

可是，若是你必需要使用 position:fixed 定位，而且还须要 iframe 出现滚动条这种过度的要求，实际上,也不是不能够，在 webkit的私有扩展中有这样一个 CSS属性：-webkit-overflow-scrolling 它用于控制所应用的元素是否具备滚动的回弹效果。它有两个取值，默认值为 auto 表示通常滚动效果，还有一个 touch 的取值，表示开启回弹滚动效果。

而 -webkit-overflow-scrolling有一个特别的使用方式，利用它咱们就能够实现想要的效果。首先为 iframe 再包裹一层。

<div class="wrap">
    <iframe frameborder="0"></iframe>
</div>

而后为这个包裹层应用 -webkit-overflow-scrolling:touch 属性，而且这个包裹层必定要是 fixed定位。

.wrap{
    position:fixed;
    width:100%;
    height:100%;
    left: 0;
    top: 0;
    -webkit-overflow-scrolling: touch;
    overflow-y:scroll;
}

iframe{
    width: 100%;
    height: 100%;
}

经过测试发现，这种实现方式虽然能够两者兼得，可是依然避免不了在低版本的IOS(估计在IOS8及如下)出现不能滚动的问题。所以实际使用时要作好取舍。

固然，若是你有更好，更完美的解决办法，请与我联系！

微信APP返回按钮不刷新页面

该问题出如今 iphone7的微信上，当一个活动存在多个页面，那么若是进入第二个页面时，再点击微信 app上的返回按钮，虽然能够返回 history中的上一级页面，可是会出现页面内容没有刷新仍是最后跳转时的状态。

解决方案很简单，那就是每进入到一个页面，都会去判断这个页面是不是从缓存中读取的，若是是则强刷页面。
实现这个功能，咱们能够利用 window.onpageshow 事件的 pageTransitionEvent 对象来判断当前页面是否从缓存中读取。

具体代码：

let isIphone = /iPhone/.test(navigator.userAgent);
if(isIphone){
    window.onpageshow=function(event){
        if(event.persisted){
            location.reload(true);
        }
    }
}

persisted 是 pageTransitionEvent对象中的一个属性，它的返回值是一个布尔值，用于表示页面是否从缓存中读取。 关于 onpageshow事件的兼容性，能够看下图

pageshow 事件对应的还有一个 pagehide事件，它们与咱们常见的 onload, onunload 事件有很大的相同之处，都是页面打开时就会触发，可是不一样的是，pageshow、pagehide则在页面被打开或者是关闭时触发，而 onload 则是等待页面资源加载好后才会触发，而且一旦页面是从缓存中读取时就不会触发 onload事件。

返回上一页

不管是PC端仍是移动端 ，“返回上一页”功能总会有用到的时候，在PC端，咱们使用 history.go(-1) 就能够返回上一页，可是在移动端事情总会变的复杂些，例如用户是经过扫码或者是点击app中分享的连接从而使用app内嵌的webview 来打开页面，此时再使用 history.go(-1) 便会不许。

history.length //=> 1

由于上一页的来源是一个二维码或者是 App中的对话框。

解决这一问题能够经过 document 的 referrer 属性获取来源的地址。若是来源地址是一个空，那么咱们默认向活动集合的首页跳转。

if(document.referrer === ""){
    $('.back-btn').attr('href','/');
}else{
    $('.back-btn').attr('href',document.referrer);
}

关于 referrer 须要注意如下几种状况会致使其值为空，也就是没法获取上一级的来源页面。

• 经过外部条件(扫码)进入页面；
• 在地址栏中直接输入页面地址；
• 使用 location.reload() 刷新（location.href或者 location.replace() 刷新有信息）；
• 从一个https协议的页面进入到http协议的页面时；
• a 标签设置了 rel="noreferrer"（兼容IE7+）；
• meta标签来控制不让浏览器发送referer，例如 <meta content="never" name="referrer">

参照上述限制的因素，咱们能够说referrer 不只能够解决移动端的返回上一页问题，反而它更适用于移动端。

下面是 referrer 兼容性状况：

关于 referrer 它还有一个安全方面的应用，例如 CSDN 就是经过它判断用户进入资源的下载页时是不是从该资源的主页来的，而非是经过盗链的方式进来的。

JSSDK 分享内容动态改变

咱们一般使用 微信的JSSDK时，都会根据后台返回的签名、时间戳、appid等参数直接注入权限，而且会直接将分享的内容在 wx.ready() 方法中进行初始化。

wx.ready(function(){
    let share = {
        title:'',
        link:'',
        desc:''
    };
    wx.onMenuShareTimeline({
        title: share.title,
        link: share.link,
        imgUrl: share.imgUrl,
        desc: share.desc,
        success: function() {
            shareAdd();
        }
    });
})

那么，若是分享的内容是动态改变的那该怎么办呢？
其实，很简单只要将 wx.ready() 中为每一个分享方式进行处理的功能，按照本身所须要的分享内容再跑一边便可。

JSSDK 跨域的分享连接

微信的JSSDK中，咱们经过为每一种分享方式指定 link 属性的值来决定分享出去的连接是什么，可是在微信中有一个限制，那就是若是分享的连接与当前页面的连接不在同一个域（即存在跨域的状况）link 属性指定的值将会失效，而且默认是当前页面的连接。

解决这一问题，须要后台的小伙伴协助了，可让后台的小伙伴在当前活动域名下创建一个新的接口，例如 share.html，这个接口只有一个功能，那就是一旦访问这个接口（页面）就跳转到咱们须要分享的那个地址。最后将这个分享的接口地址做为 JSSDK 的 link 属性的值。