测试页面新增：iframe测试，和针对表面支持录音确不给回调的浏览器的整治办法

README.md

@@ -53,7 +53,7 @@ IOS其他浏览器||
 
 *2019-03-09* 在Android上QQ、微信里，请求授权使用麦克风的提示，经过长时间观察发现，他们的表现很随机、很奇特。可能每次在调用`getUserMedia`时候都会弹选择，也可能选择一次就不会再弹提示，也可能重启App后又会弹。如果用户拒绝了，可能第二天又会弹，或者永远都不弹了，要么重置(装)App。使用腾讯X5内核的App测试也是一样奇特表现，拒绝权限后可能必须要重置(装)。这个问题貌似跟X5内核自动升级的版本有关。
 
-*2019-06-14* 经[#29](https://github.com/xiangyuecn/Recorder/issues/29)反馈，稍微远程真机测试了部分厂商的比较新的Android手机系统浏览器的录音支持情况；华为：直接返回拒绝，小米：没有回调，OPPO：好像是没有回调，vivo：好像是没有回调；另外专门测试了一下UC最新版：直接返回拒绝。另[参考](https://www.jianshu.com/p/6cd5a7fa562c)。也许他们都商量好了😂或者本身都是用的UC？至于没有任何回调的，此种浏览器没有良心。
+*2019-06-14* 经[#29](https://github.com/xiangyuecn/Recorder/issues/29)反馈，稍微远程真机测试了部分厂商的比较新的Android手机系统浏览器的录音支持情况；华为：直接返回拒绝，小米：没有回调，OPPO：好像是没有回调，vivo：好像是没有回调；另外专门测试了一下UC最新版：直接返回拒绝。另[参考](https://www.jianshu.com/p/6cd5a7fa562c)。也许他们都商量好了或者本身都是用的UC？至于没有任何回调的，此种浏览器没有良心。
 
 
 
@@ -76,7 +76,9 @@ IOS其他浏览器||
 ``` javascript
 var rec=Recorder();//使用默认配置，mp3格式
 
+//var dialog=createDelayDialog(); 开启可选的弹框伪代码，需先于open执行，因为回调不确定是同步还是异步的
 rec.open(function(){//打开麦克风授权获得相关资源
+    //dialog&&dialog.Cancel(); 如果开启了弹框，此处需要取消
     rec.start();//开始录音
 
     setTimeout(function(){
@@ -98,8 +100,27 @@ rec.open(function(){//打开麦克风授权获得相关资源
         });
     },3000);
 },function(msg,isUserNotAllow){//用户拒绝未授权或不支持
+    //dialog&&dialog.Cancel(); 如果开启了弹框，此处需要取消
     console.log((isUserNotAllow?"UserNotAllow，":"")+"无法录音:"+msg);
 });
+
+
+//我们可以选择性的弹一个对话框：为了防止移动端浏览器存在第三种情况：用户忽略，并且（或者国产系统UC系）浏览器没有任何回调
+/*伪代码：
+function createDelayDialog(){
+    if(Is Mobile){//只针对移动端
+        return new Alert Dialog Component
+            .Message("录音功能需要麦克风权限，请允许；如果未看到任何请求，请点击忽略~")
+            .Button("忽略")
+            .OnClick(function(){//明确是用户点击的按钮，此时代表浏览器没有发起任何权限请求
+                //此处执行fail逻辑
+                console.log("无法录音：权限请求被忽略");
+            })
+            .OnCancel(NOOP)//自动取消的对话框不需要任何处理
+            .Delay(8000); //延迟8秒显示，这么久还没有操作基本可以判定浏览器有毛病
+    };
+};
+*/
 ```
 
 ## 【附】录音上传示例
@@ -193,10 +214,12 @@ set={
 ### 【方法】rec.open(success,fail)
 请求打开录音资源，如果浏览器不支持录音或用户拒绝麦克风权限将会调用`fail`，打开后需要调用`close`。
 
-注意：此方法是异步的；一般使用时打开，用完立即关闭；可重复调用，可用来测试是否能录音。
+注意：此方法回调是可能是同步的（异常、或者已持有资源时）也可能是异步的（浏览器弹出权限请求时）；一般使用时打开，用完立即关闭；可重复调用，可用来测试是否能录音。
 
 另外：因为此方法会调起用户授权请求，如果仅仅想知道浏览器是否支持录音（比如：如果浏览器不支持就走另外一套录音方案），应使用`Recorder.Support()`方法。
 
+> **特别注**: 鉴于UC系浏览器（大部分国产手机厂商系统浏览器）大概率表面支持录音但永远不会有任何回调、或者此浏览器支持第三种情况（用户忽略 并且 此浏览器认为此种情况不需要回调 并且程序员完美实现了）；如果当前环境是移动端，可以在调用此方法`8秒`后如果未收到任何回调，弹出一个自定义提示框（只需要一个按钮），提示内容范本：`录音功能需要麦克风权限，请允许；如果未看到任何请求，请点击忽略~`，按钮文本：`忽略`；当用户点击了按钮，直接手动执行`fail`逻辑，因为此时浏览器压根就没有弹移动端特有的模态话权限请求对话框；但如果收到了回调（可能是同步的，因此弹框必须在`rec.open`调用前准备好随时取消），需要把我们弹出的提示框自动关掉，不需要用户做任何处理。pc端的由于不是模态化的请求对话框，可能会被用户误点，所以尽量要判断一下是否是移动端。
+
 `success`=fn();
 
 `fail`=fn(errMsg,isUserNotAllow); 如果是用户主动拒绝的录音权限，除了有错误消息外，isUserNotAllow=true，方便程序中做不同的提示，提升用户主动授权概率

app-support-sample/index.html

@@ -398,6 +398,17 @@
 };
 reclog("点击录制开始哦");
 reclog("WaveView Extensions已启用");
+
+
+if(window.top!=window){
+	var isSelf=false;
+	try{
+		window.top.aa=123;
+		isSelf=true;
+	}catch(e){};
+
+	reclog("<span style='color:#f60'>当前页面处在在iframe中，但故意未进行任何处理，"+(isSelf?"当前是同域":"并且已发生跨域")+"</span>");
+};
 </script>
 
 

index.html

@@ -44,7 +44,7 @@
 <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
 
 
-<div>
+<div class="demoHead">
 	<style>
 		.navItem{
 			display:inline-block;
@@ -90,7 +90,7 @@
 
 
 <!-- begin 开始copy源码 -->
-<div>
+<div class="demoMain">
 	<div class="pd">
 		GitHub：<a href="https://github.com/xiangyuecn/Recorder">https://github.com/xiangyuecn/Recorder</a>
 	</div>
@@ -140,6 +140,13 @@
 	<hr>
 	<audio class="recPlay" style="width:100%"></audio>
 	<div class="reclog"></div>
+
+	<hr>
+	<div class="pd">
+		<button onclick="goiframe()">把页面放到IFrame里面测试权限请求</button>
+		测试在iframe里面请求录音权限的兼容性。最佳实践应该是让window.top(不适用于跨域)去加载Recorder，iframe里面使用top.Recorder；此测试未遵照此最佳实践，以模拟跨域iframe和同域下的复杂真实情况
+	</div>
+
 	<div class="recinfo"></div>
 </div>
 <script type="text/template" class="tp_recinfo">
@@ -202,13 +209,47 @@
 			waveSet && wave.input(buffers[buffers.length-1],level,sampleRate);
 		}
 	});
+
+	var dialogInt=setTimeout(function(){//定时8秒后打开弹窗，用于监测浏览器没有发起权限请求的情况，在open前放置定时器利于收到了回调能及时取消（不管open是同步还是异步回调的）
+		showDialog();
+	},8000);
+
 	rec.open(function(){
+		dialogCancel();
 		reclog("已打开:"+type+" "+bit+"kbps");
 
 		wave=Recorder.WaveView({elem:".recwave"});
 	},function(e,isUserNotAllow){
+		dialogCancel();
 		reclog((isUserNotAllow?"UserNotAllow，":"")+"打开失败："+e);
 	});
+
+	//我们可以选择性的弹一个对话框：为了防止移动端浏览器存在第三种情况：用户忽略，并且（或者国产系统UC系）浏览器没有任何回调
+	window.waitDialogClick=function(){
+		dialogCancel();
+		reclog("打开失败：权限请求被忽略，<span style='color:#f00'>用户主动点击的弹窗</span>");
+	};
+	var dialogCancel=function(){
+		clearTimeout(dialogInt);
+		$(".waitDialog").remove();
+	};
+	var showDialog=function(){
+		if(!/mobile/i.test(navigator.userAgent)){
+			return;//只在移动端开启没有权限请求的检测
+		};
+		$("body").append(''
+			+'<div class="waitDialog" style="z-index:99999;width:100%;height:100%;top:0;left:0;position:fixed;background:rgba(0,0,0,0.3);">'
+				+'<div style="display:flex;height:100%;align-items:center;">'
+					+'<div style="flex:1;"></div>'
+					+'<div style="width:240px;background:#fff;padding:15px 20px;border-radius: 10px;">'
+						+'<div style="padding-bottom:10px;">录音功能需要麦克风权限，请允许；如果未看到任何请求，请点击忽略~</div>'
+						+'<div style="text-align:center;"><a onclick="waitDialogClick()" style="color:#0B1">忽略</a></div>'
+					+'</div>'
+					+'<div style="flex:1;"></div>'
+				+'</div>'
+			+'</div>');
+	};
+	//弹框End
 };
 function recclose(){
 	if(rec){
@@ -363,6 +404,23 @@
 $(".recinfo").html(BuildHtml($(".tp_recinfo").html()));
 reclog("点击打开录音开始哦，此浏览器<span style='color:"+(Recorder.Support()?"green'>":"red'>不")+"支持录音</span>");
 reclog("WaveView Extensions已启用");
+
+
+function goiframe(){
+	$(".demoHead").hide();
+	$(".demoMain").html(''
+		+'<div>IFrame测试，提示：`RecordApp测试`可以模拟跨域</div>'
+		+'<iframe src="'+location.href+'" style="width:98%;height:'+($(window).height()-100)+'px; border:4px solid #0B1"></iframe>');
+};
+if(window.top!=window){
+	var isSelf=false;
+	try{
+		window.top.aa=123;
+		isSelf=true;
+	}catch(e){};
+
+	reclog("<span style='color:#f60'>当前页面处在在iframe中，但故意未进行任何处理，"+(isSelf?"当前是同域":"并且已发生跨域")+"</span>");
+};
 </script>