一、webclip去除顶部网址
可以在网站根目录创建一个iframe.html文件，代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>
首页
</title>
</head>
<body onload="refit()" style="padding:0;margin:0;">
<iframe src="https://www.zhiboblog.com" style="width:100%;height:100%;" frameborder="0" scrolling="yes" id="bdIframe"></iframe>
</body>
</html>
<script>
function refit(){
oIframe = document.getElementById('bdIframe');
deviceWidth = document.documentElement.clientWidth;
deviceHeight = document.documentElement.clientHeight;
oIframe.style.width = (Number(deviceWidth)) + 'px';
oIframe.style.height = (Number(deviceHeight)) + 'px';
}
function changeIframeUrl(url){
document.getElementById('bdIframe').src = url
}
</script>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>
首页
</title>
</head>
<body onload="refit()" style="padding:0;margin:0;">
<iframe src="https://www.zhiboblog.com" style="width:100%;height:100%;" frameborder="0" scrolling="yes" id="bdIframe"></iframe>
</body>
</html>
<script>
function refit(){
oIframe = document.getElementById('bdIframe');
deviceWidth = document.documentElement.clientWidth;
deviceHeight = document.documentElement.clientHeight;
oIframe.style.width = (Number(deviceWidth)) + 'px';
oIframe.style.height = (Number(deviceHeight)) + 'px';
}
function changeIframeUrl(url){
document.getElementById('bdIframe').src = url
}
</script>
比如：我真实的网站项目地址是：https://www.zhiboblog.com，原本我是直接将这个网址打包成webclip的，但是顶部会有地址栏。
为了去除顶部地址栏，我把真实网站地址(https://www.zhiboblog.com)嵌在https://www.zhiboblog.com/iframe.html这个页面中，将iframe的高度设置成手机屏幕高度的100%，这样就可以隐藏掉地址栏。
然后我打包webclip的时候，不用https://www.zhiboblog.com这个网址打包，而是用https://www.zhiboblog.com/iframe.html打包。
这样就可以去除掉webclip的顶部网址。
二、阻止点击链接跳转safari浏览器
在真实网站项目(https://www.zhiboblog.com)中，每个页面都加上下面这段js代码，这样就可以阻止页面内的链接跳转safari浏览器。
以下提供了两种解决方案，选其中一种就可以。
1.第一种解决方案(我自己想出来的)
<script>
//调用父框架的方法
function callParent(param){
parent.changeIframeUrl(param);
}
//获取网页上所有的a标签，阻止a标签跳转
var links = document.querySelectorAll('a[href]');
links.forEach(link => {
link.addEventListener('click', e => {
var url = link.getAttribute('href');
console.log(url);
if (url != "javascript:;" && (/iPhone|iPad/i.test(navigator.userAgent)) ) {
e.preventDefault();
callParent(url);
//console.log(url);
}
});
});
</script>
//调用父框架的方法
function callParent(param){
parent.changeIframeUrl(param);
}
//获取网页上所有的a标签，阻止a标签跳转
var links = document.querySelectorAll('a[href]');
links.forEach(link => {
link.addEventListener('click', e => {
var url = link.getAttribute('href');
console.log(url);
if (url != "javascript:;" && (/iPhone|iPad/i.test(navigator.userAgent)) ) {
e.preventDefault();
callParent(url);
//console.log(url);
}
});
});
</script>
2.第二种解决方案(网上找的)
<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>
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>
三、右滑返回上一级页面
webclip在使用过程中，我发现无法返回上一级页面，所以写了下面这段代码，用来解决不能返回上一级页面的问题。
在真实网站项目(https://www.zhiboblog.com)中，每个页面都加上下面这段js代码，这样就可以右滑返回上一级页面了。
<script>
var startx, starty;
//获得角度
function getAngle(angx, angy) {
return Math.atan2(angy, angx) * 180 / Math.PI;
};
//根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动
function getDirection(startx, starty, endx, endy) {
var angx = endx - startx;
var angy = endy - starty;
var result = 0;
// alert(startx);return false;
//如果滑动距离太短
if (Math.abs(angx) < 10 && Math.abs(angy) < 10) {
return result;
}
//如果不是从左边缘滑的
if(startx > 10){
return result;
}
var angle = getAngle(angx, angy);
if (angle >= -135 && angle <= -45) {
result = 1;
} else if (angle > 45 && angle < 135) {
result = 2;
} else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
result = 3;
} else if (angle >= -45 && angle <= 45) {
result = 4;
}
return result;
}
//手指接触屏幕
document.addEventListener("touchstart", function(e) {
startx = e.touches[0].pageX;
starty = e.touches[0].pageY;
}, false);
//手指离开屏幕
document.addEventListener("touchend", function(e) {
var endx, endy;
endx = e.changedTouches[0].pageX;
endy = e.changedTouches[0].pageY;
var direction = getDirection(startx, starty, endx, endy);
switch (direction) {
case 0:
// alert("未滑动！");
break;
case 1:
// alert("向上！")
break;
case 2:
// alert("向下！")
break;
case 3:
// alert("向左！")
break;
case 4:
// alert("向右！")
// 向右滑动返回上一级页面
window.history.back();
break;
default:
}
}, false);
</script>
var startx, starty;
//获得角度
function getAngle(angx, angy) {
return Math.atan2(angy, angx) * 180 / Math.PI;
};
//根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动
function getDirection(startx, starty, endx, endy) {
var angx = endx - startx;
var angy = endy - starty;
var result = 0;
// alert(startx);return false;
//如果滑动距离太短
if (Math.abs(angx) < 10 && Math.abs(angy) < 10) {
return result;
}
//如果不是从左边缘滑的
if(startx > 10){
return result;
}
var angle = getAngle(angx, angy);
if (angle >= -135 && angle <= -45) {
result = 1;
} else if (angle > 45 && angle < 135) {
result = 2;
} else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
result = 3;
} else if (angle >= -45 && angle <= 45) {
result = 4;
}
return result;
}
//手指接触屏幕
document.addEventListener("touchstart", function(e) {
startx = e.touches[0].pageX;
starty = e.touches[0].pageY;
}, false);
//手指离开屏幕
document.addEventListener("touchend", function(e) {
var endx, endy;
endx = e.changedTouches[0].pageX;
endy = e.changedTouches[0].pageY;
var direction = getDirection(startx, starty, endx, endy);
switch (direction) {
case 0:
// alert("未滑动！");
break;
case 1:
// alert("向上！")
break;
case 2:
// alert("向下！")
break;
case 3:
// alert("向左！")
break;
case 4:
// alert("向右！")
// 向右滑动返回上一级页面
window.history.back();
break;
default:
}
}, false);
</script>
