解决ios系统在safari浏览器中添加web应用程序到主屏幕,打开子链接会跳转到safari的问题
前言
ios系统的safari浏览器有一个功能可以将web应用程序添加到主程序,使得web程序像app一样全屏显示操作。
代码
<!-- 在 `head` 标签中添加描述 `html` 元数据的标签。表示允许该应用以全屏运行 --><meta name="apple-mobile-web-app-capable" content="yes"><!-- 添加脚本 --><script>if (('standalone' in window.navigator) && window.navigator.standalone) {var noddy, remotes = false;document.addEventListener('click', function (event) {noddy = event.target;while (noddy.nodeName !== 'A' && noddy.nodeName !== 'HTML') noddy = noddy.parentNode;if ('href' in noddy && noddy.href.indexOf('http') !== -1 && (noddy.href.indexOf(document.location.host) !==-1 || remotes)) {event.preventDefault();document.location.href = noddy.href;}}, false);}</script>
添加meta
标签后,web应用
会在主屏幕上以全屏显示,然当点击子链接时,依然会跳转到safari
浏览器。
示例如下:
https://harmsworth.github.io/study-demo//06/test3.html
添加meta
标签并且添加上面的js
脚本能全屏显示,当点击子链接时,会在web应用
内跳转。
示例如下:
https://harmsworth.github.io/study-demo//06/test5.html
参考
/PeunZhang/p/3407453.html#meta
/lilinoscar/article/details/70270374
/developer/article/1025378