改变网站 iOS 版 Safari 中“添加至主屏幕” 的URL地址

相信大家都知道怎么去改变图标，度娘上面一大堆，我就不对废话了。我主要说下在添加至屏幕的时候把地址改变了，相信大家遇到过这样的场景，在没有把网站添加到主屏幕的时候希望定时或者每次访问的时候提示用户去点击[添加至主屏幕],但是一旦用户添加后在桌面直接点击就不用出现提示了。

这个就不得不得说到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

改变网站 iOS 版 Safari 中“添加至主屏幕” 的URL地址

猜你喜欢