webapp添加网站图标到ios桌面

最新推荐文章于 2019-09-07 15:40:27 发布

yixiao_naihe

最新推荐文章于 2019-09-07 15:40:27 发布

阅读量3.1k

点赞数

分类专栏： JavaScript 文章标签： javascript webapp ios 主屏幕

本文链接：https://blog.csdn.net/yixiao_naihe/article/details/39004857

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.设置图标logo

    <link rel="apple-touch-icon" sizes="57x57" href="images/applogo57.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/applogo72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/applogo114.png">
    <link rel="apple-touch-icon" sizes="144x144" href="images/applogo144.png">

2.页面添加提醒：如何添加到主屏幕

<div class="dmcontainer">
       <div name="m_pos" id="m_95614">
            <div class="addDesktop_ipad" id="addDesktop_ipad">
                <div class="tipPanel">
                    <div class="webApp"></div>
                    <div class="tipCon">先点击<span class="ico_adddesktop_ios" style="" id="ico_adddesktop_ios7_pad"></span><br>再选择"添加到主屏幕"</div>
                    <div class="btnClose" οnclick="closeclick_pad()"><span class="popCls"></span></div>
                </div>
            </div>
            <div class="addDesktop_iphone" id="addDesktop_iphone" style="display: block;">
                <div class="tipPanel">
                    <div class="webApp"></div>
                    <div class="tipCon">先点击<span class="ico_adddesktop_ios" style="" id="ico_adddesktop_ios7_phone"></span><br>再选择"添加到主屏幕"</div>
                    <div class="btnClose" οnclick="closeclick_phone()"><span class="popCls"></span></div>
                </div>
            </div>
       </div>
   </div>

3.js控制提醒内容，首次提醒，之后不再提醒及判断ios版本

//提示添加到主屏幕
(function(){
    OST = {};
    var osType = {
        isWin:'Win',
        isMac:'Mac',
        isSafari:'Safari',
        isChrome:'Chrome',
        isIPAD: 'iPad', 
        isIPHONE: 'iPhone', 
        isIPOD: 'iPod',
        isLEPAD: 'lepad_hls',
        isMIUI: 'MI-ONE',
        isAndroid:'Android',
        isAndroid4: 'Android 4.',
        isAndroid41: 'Android 4.1',
        isSonyDTV: "SonyDTV",
        isBlackBerry:"BlackBerry",
        isMQQBrowser:'MQQBrowser',
        isMobile:'Mobile'
    };
    for(var os in osType){
        if(navigator.userAgent.indexOf(osType[os]) !== -1){
            OST[os] = true;
        }else{
            OST[os] = false;
        }
    }
    OST.isIos = ((OST.isIPAD || OST.isIPHONE || OST.isIPOD) || OST.isMac );
    OST.isPhone = (OST.isIPHONE || OST.isIPOD || (OST.isAndroid&&OST.isMobile));
    OST.isPad = (OST.isIPAD || (OST.isAndroid && !OST.isMobile));
})();

function closeclick_phone()
{
document.getElementById('addDesktop_iphone').style.display='none';
cookiesave('closeclick_iphone','closeclick_iphone','','','');
var h=document.getElementsByTagName('head')[0],
        s=document.createElement('script');
        s.type='text/javascript';
        s.charset='utf-8';
        s.src='http://hz.youku.com/red/click.php?tp=1&cp=4009134&cpp=1000607&url= '+window.location.href;
        h.firstChild?h.insertBefore(s,h.firstChild):h.appendChild(s);
}
function cookiesave(n, v, mins, dn, path){
	if(n)
	{
		if(!mins) mins = 7 * 24 * 60;
		if(!path) path = "/";
		var date = new Date();
		date.setTime(date.getTime() + (mins * 60 * 1000));
		var expires = "; expires=" + date.toGMTString();
		if(dn) dn = "domain=" + dn + "; ";
		document.cookie = n + "=" + v + expires + "; " + dn + "path=" + path;
	}
}
function cookieget(n){
	var name = n + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i<ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
	}
	return "";
}
function clickclose(){
 var is_IOS7=Boolean(navigator.userAgent.match(/OS [7-9]_\d[_\d]* like Mac OS X/i));
    if(!OST.isIPHONE){
		document.getElementById('addDesktop_iphone').style.display='none';
	}
	else{
		if(cookieget('closeclick_iphone')=='closeclick_iphone'){
			document.getElementById('addDesktop_iphone').style.display='none';
		}else{
                         if(is_IOS7){
           document.getElementById( "ico_adddesktop_ios7_phone" ).className = "ico_adddesktop_ios7"; 
                          }
			document.getElementById('addDesktop_iphone').style.display='block';
 var h=document.getElementsByTagName('head')[0],
        s=document.createElement('script');
        s.type='text/javascript';
        s.charset='utf-8';
        s.src='http://hz.youku.com/red/click.php?tp=1&cp=4009133&cpp=1000607&url= '+window.location.href;
        h.firstChild?h.insertBefore(s,h.firstChild):h.appendChild(s);
		}
	}
}
function addLoadEvent(func){
	var oldοnlοad=window.onload;
	if(typeof window.onload!="function"){
		window.οnlοad=func;
			}else{
				window.οnlοad=function(){
				oldonload();
				func();
		}
	}
}
addLoadEvent(clickclose);

4.css控制提醒内容样式

/*添加主屏幕提示*/
.dmcontainer{
min-width: 300px;
max-width: 984px;
margin: 0 auto;
padding-top: 20px;
padding-bottom: 20px;}
@media screen and (min-width: 768px)
.dmcontainer {
padding-left: 20px;
padding-right: 20px;
}
.addDesktop_ipad {
display: none;
}
.addDesktop_iphone{z-index:1390; -webkit-transition-property:all; -webkit-transition-duration:0.2s; -webkit-transition-timing-function:linear; -webkit-transition-delay:initial;position:fixed; bottom:0px;left:10px;display:none;}
.addDesktop_ipad{display:none; }
.addDesktop_iphone .tipPanel{position:relative; z-index:1390; margin-top:0px; margin:0 auto 13px; width:220px; height:65px; background:#fff; padding:9px; color:#555; border:1px solid #bbb; font-size:14px; -webkit-box-shadow:0 3px 5px rgba(0,0,0,.5); box-shadow:0 3px 5px rgba(0,0,0,.5);}
.addDesktop_iphone .tipPanel::before{content:""; position:absolute; bottom:-8px; left:150px; margin-left:-8px; height:14px; width:14px; overflow:hidden; background:#fff; -webkit-transform:rotate(45deg); border:1px solid #afafaf; border-top:none; border-left:none; -webkit-box-shadow:0 3px 5px rgba(0,0,0,.5); box-shadow:0 3px 5px rgba(0,0,0,.5);}
.addDesktop_iphone .tipPanel::after{content:""; position:absolute; bottom:0; left:150px; margin-left:-15px; height:15px; width:30px; overflow:hidden; background:#fff;}
.addDesktop_iphone .webApp{float:left; margin-right:10px; width:64px; height:64px; background-image:url(applogo72.png); -webkit-background-size:64px; background-size:64px;}
.addDesktop_iphone .btnClose{width:18px; height:18px; position:absolute; top:5px; right:5px; padding:5px;}
.addDesktop_iphone .tipCon{float:left; padding-top:5px; line-height:24px;}
.addDesktop_iphone .popCls{position:absolute; right:5px; top:12px; height:4px; width:18px; background:#c2c2c2; font:bold 3.25em/0 arial; -webkit-transform:rotate(45deg); border-radius:1px;}
.addDesktop_iphone .popCls::after{content:""; position:absolute; top:0; right:0; height:4px; width:18px; overflow:hidden; background:#c2c2c2; -webkit-transform:rotate(90deg); border-radius:1px; }
.addDesktop_iphone .ico_adddesktop_ios{background: url("05100000528C6E346714C031CE066FC0.png");display: inline-block; height: 16px; width: 19px; margin-top: 2px; margin-right: 3px; margin-bottom: 0px; margin-left: 3px; -webkit-background-size: 19px 16px; vertical-align: top;}
.addDesktop_iphone .ico_adddesktop_ios7{background: url("05100000528074156714C0316A06AC70.png");display: inline-block; height: 22px; width: 15px; margin-top: -2px; margin-right: 3px; margin-bottom: 0px; margin-left: 3px; -webkit-background-size: 15px 22px; vertical-align: top;}