实现效果
1、安卓手机，可直接在微信内弹出“是否在浏览器中打开”的系统弹框
2、苹果手机，需目标应用上架了AppStore才能实现弹窗效果
后端代码( api)
[HttpGet(Name = "jump")]
public IActionResult Get(string url)
{
string us = HttpContext.Request.Headers.UserAgent.ToString().ToLower();
if (us.Contains("micromessenger"))
{
if (us.Contains("iphone") || us.Contains("ipod") || us.Contains("ipad"))
return Ok();
else
HttpContext.Response.Headers["Content-Disposition"] = "attachment; filename=\"jump.xlsx\"";
}
else
return Redirect(url);
return Ok();
}
前端代码(纯js)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="black" name="apple-mobile-web-app-status-bar-style"/>
<meta name="format-detection" content="telephone=no"/>
<meta content="false" name="twcClient" id="twcClient"/>
<style>
body,html{width:100%;height:100%}
*{margin:0;padding:0}
body{background-color:#fff}
.top-bar-guidance{font-size:15px;color:#fff;height:40%;line-height:1.8;padding-left:20px;padding-top:20px;background:url(//gw.alicdn/tfs/TB1eSZaNFXXXXb.XXXXXXXXXXXX-750-234.png) center top/contain no-repeat}
.top-bar-guidance .icon-safari{width:25px;height:25px;vertical-align:middle;margin:0 .2em}
.app-download-btn{display:block;width:214px;height:40px;line-height:40px;margin:18px auto 0 auto;text-align:center;font-size:18px;color:#2466f4;border-radius:20px;border:.5px #2466f4 solid;text-decoration:none}
</style>
</head>
<body>
<div class="top-bar-guidance" id="app" style="display: none;">
<p>
点击右上角<img src="//gw.alicdn/tfs/TB1xwiUNpXXXXaIXXXXXXXXXXXX-55-55.png" class="icon-safari"/> Safari打开
</p>
<p>
使用Safari浏览器可以继续访问本站哦~
</p>
</div>
<script>
function getUrlParams() {
const searchParams = new URLSearchParams(window.location.search);
const params = {};
for (const [key, value] of searchParams) {
params[key] = value;
}
return params;
}
function oepnUrl(){
if(getUrlParams().url){
window.location.href = "/jump?url="+encodeURIComponent(getUrlParams().url);
}
}
window.mobileUtil = (function(win, doc) {
var UA = navigator.userAgent,
isAndroid = /android|adr/gi.test(UA),
isIOS = /iphone|ipod|ipad/gi.test(UA) && !isAndroid,
isBlackBerry = /BlackBerry/i.test(UA),
isWindowPhone = /IEMobile/i.test(UA),
isMobile = isAndroid || isIOS || isBlackBerry || isWindowPhone;
return {
isAndroid: isAndroid,
isIOS: isIOS,
isMobile: isMobile,
isWeixin: /MicroMessenger/gi.test(UA),
isQQ: /QQ/gi.test(UA)
};
})(window, document);
if(mobileUtil.isIOS){
if(mobileUtil.isWeixin){
document.getElementById('app').style.display = 'block';
}else{
oepnUrl();
}
}
else if(mobileUtil.isAndroid){
oepnUrl();
}
</script>
</body>
</html>
实现效果
1、安卓手机，可直接在微信内弹出“是否在浏览器中打开”的系统弹框
2、苹果手机，需目标应用上架了AppStore才能实现弹窗效果
后端代码( api)
[HttpGet(Name = "jump")]
public IActionResult Get(string url)
{
string us = HttpContext.Request.Headers.UserAgent.ToString().ToLower();
if (us.Contains("micromessenger"))
{
if (us.Contains("iphone") || us.Contains("ipod") || us.Contains("ipad"))
return Ok();
else
HttpContext.Response.Headers["Content-Disposition"] = "attachment; filename=\"jump.xlsx\"";
}
else
return Redirect(url);
return Ok();
}
前端代码(纯js)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="black" name="apple-mobile-web-app-status-bar-style"/>
<meta name="format-detection" content="telephone=no"/>
<meta content="false" name="twcClient" id="twcClient"/>
<style>
body,html{width:100%;height:100%}
*{margin:0;padding:0}
body{background-color:#fff}
.top-bar-guidance{font-size:15px;color:#fff;height:40%;line-height:1.8;padding-left:20px;padding-top:20px;background:url(//gw.alicdn/tfs/TB1eSZaNFXXXXb.XXXXXXXXXXXX-750-234.png) center top/contain no-repeat}
.top-bar-guidance .icon-safari{width:25px;height:25px;vertical-align:middle;margin:0 .2em}
.app-download-btn{display:block;width:214px;height:40px;line-height:40px;margin:18px auto 0 auto;text-align:center;font-size:18px;color:#2466f4;border-radius:20px;border:.5px #2466f4 solid;text-decoration:none}
</style>
</head>
<body>
<div class="top-bar-guidance" id="app" style="display: none;">
<p>
点击右上角<img src="//gw.alicdn/tfs/TB1xwiUNpXXXXaIXXXXXXXXXXXX-55-55.png" class="icon-safari"/> Safari打开
</p>
<p>
使用Safari浏览器可以继续访问本站哦~
</p>
</div>
<script>
function getUrlParams() {
const searchParams = new URLSearchParams(window.location.search);
const params = {};
for (const [key, value] of searchParams) {
params[key] = value;
}
return params;
}
function oepnUrl(){
if(getUrlParams().url){
window.location.href = "/jump?url="+encodeURIComponent(getUrlParams().url);
}
}
window.mobileUtil = (function(win, doc) {
var UA = navigator.userAgent,
isAndroid = /android|adr/gi.test(UA),
isIOS = /iphone|ipod|ipad/gi.test(UA) && !isAndroid,
isBlackBerry = /BlackBerry/i.test(UA),
isWindowPhone = /IEMobile/i.test(UA),
isMobile = isAndroid || isIOS || isBlackBerry || isWindowPhone;
return {
isAndroid: isAndroid,
isIOS: isIOS,
isMobile: isMobile,
isWeixin: /MicroMessenger/gi.test(UA),
isQQ: /QQ/gi.test(UA)
};
})(window, document);
if(mobileUtil.isIOS){
if(mobileUtil.isWeixin){
document.getElementById('app').style.display = 'block';
}else{
oepnUrl();
}
}
else if(mobileUtil.isAndroid){
oepnUrl();
}
</script>
</body>
</html>