相信大家都知道怎么去改变图标,度娘上面一大堆,我就不对废话了。我主要说下在添加至屏幕的时候把地址改变了,相信大家遇到过这样的场景,在没有把网站添加到主屏幕的时候希望定时或者每次访问的时候提示用户去点击[添加至主屏幕],但是一旦用户添加后在桌面直接点击就不用出现提示了。
这个就不得不得说到H5的特性了。
HTML5新添加了两个api分别是pushState和replaceState,DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取,可以在用户的访问记录中前进和后退,我们可以开始操作这个历史记录堆栈。
window.history.pushState({},0,url);
我的测试地址是http://192.168.1.102:8899/HUHU/hs/demos/simple/index.html
alert('改变前:'+window.location.href); window.history.pushState({},0,'http://'+window.location.host+'/HUHU/hs/demos/simple/test.html'); alert('改变后:'+window.location.href);
通过打印就可以看出地址已经改变,这样通过【添加至主屏幕】就可以看见跳转的地址已经是改变后的地址
引导页index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Add To Home</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-title" content="Add to Home"> <link rel="shortcut icon" sizes="16x16" href="../../imgs/icon-16x16.png"> <link rel="shortcut icon" sizes="196x196" href="../../imgs/icon-196x196.png"> <!--link rel="apple-touch-icon-precomposed" sizes="152x152" href="icon-152x152.png"> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="icon-144x144.png"> <link rel="apple-touch-icon-precomposed" sizes="120x120" href="icon-120x120.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="icon-114x114.png"> <link rel="apple-touch-icon-precomposed" sizes="76x76" href="icon-76x76.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="icon-72x72.png"--> <link rel="apple-touch-icon-precomposed" href="../../imgs/icon-152x152.png"> <link rel="stylesheet" type="text/css" href="../../style/addtohomescreen.css"> <script src="../../src/addtohomescreen.js"></script> <script> alert('http://'+window.location.host+'/HUHU/hs/demos/simple/test.html'); alert(window.location.href); window.history.pushState({},0,'http://'+window.location.host+'/HUHU/hs/demos/simple/test.html'); alert(window.location.href); </script> </head> <body> test </body> </html>
桌面快捷跳转页面test.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML5无刷修改url</title> <script type="text/javascript"> function changeURL(){ var url = document.getElementById('url').value; window.history.pushState({},0,'http://'+window.location.host+'/'+url); } </script> </head> <body> <h1>html5无刷新改变url</h1> <div id="info" style="margin:30px 0;"> 页面真实地址: <span style="color:red;"><script type="text/javascript">document.write(window.location.href);</script></span> </div> <div> 请输入要改变地URL字符串:<input id='url' type="text" /> <button onclick="changeURL();">点击无刷改变url</button> </div> </body> </html>
给大家分享一个页面弹出引导添加至主屏幕的js地址 add to home screen
相关推荐
delphi xe8开发,调用Safari浏览器安装ipa程序,检查ios网络状态
ios safari 添加桌面 提示页面 介绍地址: https://blog.csdn.net/xjie_127/article/details/120956026
IOS_safari关于IOS的webkit的源代码。
ios 动态添加按钮,ios,为什么要写这么多字
解决iOS5.1与iOS6.0的屏幕旋转兼容的demo
ios7.x以上,xcode5下实现ios safari访问页面地址直接安装ipa的方法
iOS中Safari浏览器select下拉列表文字太长被截断的处理方法
是研究ios屏幕共享时编制的demo,重点参考了如下两个开源项目: 1 http://www.gdcl.co.uk/2013/02/20/iOS-Video-Encoding.html (ios 上h.264硬编码,RTSP服务端) 2 https://github.com/coolstar/RecordMyScreen ...
这个可以在IOS应用中,添加自己喜欢要的新字体!
ios--防照Safari浏览器视图切换效果
iOS7在Safari中快速查找关键字.docx
一个React组件,提供可自定义的渐进式Web应用程序(PWA)提示,告诉用户“添加到主屏幕”。 提示行为已植入Android设备,但iOS仍然落后。 该组件旨在为在支持PWA的网站上提供一种在iOS上提供此功能的简单方法。 ...
ios 对url中的特殊字符进行编码和反编码
iOS4.2版safari对HTML5特性支持更新.rar
IOS 表格边框上添加阴影
在实际项目中经常需要向地图中添加一些标注信息,本范例将示范在iOS中通过点击屏幕,向地图中添加点标注。
这是一款优秀实用的苹果ios解锁工具,适用于苹果公司旗下多种型号的iPhone、iPad以及iPod Touch设备和最新的IOS系统版本号,内置ios屏幕解锁软件(Touch ID/Face ID)...威航软件园推荐大家试试大师级的IOS解锁神器吧。
ios屏幕旋转
iOS UIWebView URL拦截.pdf
该demo展示 通过URL 获取对应的图片 下载并保存在本地 以及调用展示