• 近期在学前端，学到audio标签的时候就萌生了自己写一个播放器的想法。原本是在电脑端用的，但分享到微信或者QQ的时候，一般都是用手机打开。突然发现iOS不支持iframe标签滚动，为了让iOS也兼容iframe，需要设置几个css属性。
  • 我使用了iframe标签装载一个页面显示音乐列表，代码如下：
<!--音乐列表-->
<div id="musicList" class="musicList">
	<iframe style="width: 100%;" src="music.html"></iframe>
</div>
  • 外层使用了一个div容器包裹了iframe。没有额外设置兼容iframe的css属性之前，音乐列表是超出div容器的，比如下面这样：
  • 为了让音乐列表能在div中滚动，需要在外层div设置两个属性：
-webkit-overflow-scrolling: touch;
overflow-y: scroll;

设置之后就可以在div中滚动了，

IOS 微信 浏览器 ios微信浏览器 iframe_IOS 微信 浏览器

  • 可以滚动之后，还发现另一个问题，隐藏在后面的歌曲名无法点击，每次拉到后面点击歌曲名，就会弹回顶部，只能点击播放顶部可见的歌曲。这个问题我在google查了很久，在ionicframework网站中发现很多人都遇到同样的问题。
  • I use iframe to load the page, when we scrolling the page, the link on the page can’t click, then we scroll back to default position。（我用iframe便签去加载页面，当我滑动页面，页面中的链接无法点击，会弹回页面顶部初始的位置。）该问题的ionicframework网站链接
  • 帖子的谈论中也还没找出答案，经过几个小时的多次设置参数调试，发现点击iframe链接回弹到顶部的原因跟iframe的height参数有关。如果iframe的height设置成100%，则跟外层包裹的div同样高度，无论在iframe中怎么滑动，点击链接能操作的元素iOS认为只有在height高度范围内包含的元素。
  • 即iframe的高度太小，隐藏在后面的链接点击无法生效。因此我只设置了iframe元素的高度为一个很大值，足以包含几千条音乐列表，如
iframe{
	height: 5000000px; 
}
  • 设置之后，后面所有歌曲的链接都可以点击播放了，不会弹回顶部了。
  • 这是iOS使用iframe标签会出现的问题，安卓、电脑都不会有，解决的过程中遇到了很多坑，分享出来，让跟我同样情况的人少踩一点坑。
  • 最后分享上面我提到的H5音乐播放器，欢迎试用。
  • H5音乐播放器 在线试用