h5打开app指定页面,

　　这种功能在市面上经常看到，现在应该也很常见了，比如淘宝H5，知乎H5等等。

　　点击后会调出APP或者打开下载页面或者直接下载。

　　但是我在这里发现，知乎的这个功能有点不一样。

　　他的逻辑是先提示我是否打开手机里的知乎APP(浏览器的机制是要求用户许可才能操作)，然后会弹出下载的提示。

　　解决方案URL scheme

　　IOS和Android都支持URL方案，兼容性好。

　　优先使用iframe的方式

　　伪代码如下：

　　const iframe=document . createelement( iframe )；iframe.src= URL scheme//URL scheme跳转到iframe . style . display= none ；document . body . appendchild(iframe)；这时候如果所有环境都支持，就会唤醒APP。

　　但这是理想情况，更多的是做兼容处理的快速逻辑。

　　有些系统会拦截iframe的src(这只是导致唤醒APP失败的原因之一)，因为这个src属性是法外黑客，很多漏洞都是使用它造成的。

　　所以这个时候就要判断调整APP失败了。

　　伪代码如下：

　　const timer=1000SetTimeout(function() {//成功执行后删除iframe document . body . Remove child(iframe)；//setTimeout小于2000一般认为是唤起APP失败if (Date.now()-last 2000) {//执行失败函数//这里需要考虑一下之前知乎遇到的问题(浏览器查询导致时间小于2S)} else {//执行成功函数}}，timer)；理解：

　　如果唤醒成功，H5页面将被切换到后台，计时器将被延迟。即使用户再次从app切换到H5页面，这个时间差也必须大于2S。如果唤醒失败，定时器会按时执行(即使会有100ms的延迟也足够了)，必须小于2S。如果iframe被阻塞，我们可以使用window.location.href=URL方案来实现兼容性。

　　总结

　　以上是边肖在HTML5页面中调整APP功能的尝试。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对网站的支持！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。