4.微信转发使用说明
<h3>使用场景</h3>
<p>朋友圈中发送的图片含有二维码，如果二维码对应链接并非安全域名，发送内容会被微信屏蔽；</p>
<h3>解决方法</h3>
<p>1.在小工具中按照要求输入最终需要跳转的网址
<a href="https://actspt.win108.com/action/topwinner/m/weixin/tool.html">https://actspt.win108.com/action/topwinner/m/weixin/tool.html</a>
2.复制转码后链接，转为二维码后即可使用；</p>
<h3>工作原理</h3>
<p>1.页面放置在安全域名之下，防止微信屏蔽；
2.页面获取到要跳转的网址之后，会检测浏览器环境；
3.如果是手机浏览器，直接跳转对应下载地址，完成一个跳转功能；
4.如果是微信浏览器，则通过iframe页面嵌套的方式去加载这个页面<br>第一，如果用户举报,暴露出来的是外部的域名，而不是被加载进入的tcy365.com；<br>第二，微信页面打开下载页是无法直接下载的，而是跳转到外部浏览器以后下载，所以微信中的iframe嵌入，也不影响最终的外部浏览器的下载功能。</p>
<h3>Demo</h3>
<p>如需要跳转的网址是：
<a href="https://m.tcy365.com/yqw/tcyapp20180201113312/index.html">https://m.tcy365.com/yqw/tcyapp20180201113312/index.html</a></p>
<p>实际使用的网址是：
<a href="https://actspt.win108.com/action/topwinner/m/weixin/index.html?iframe=https%3A%2F%2Fm.tcy365.com%2Fyqw%2Ftcyapp20180201113312%2Findex.html">https://actspt.win108.com/action/topwinner/m/weixin/index.html?iframe=https%3A%2F%2Fm.tcy365.com%2Fyqw%2Ftcyapp20180201113312%2Findex.html</a></p>
<p>对应二维码：
<img src="http://doc.uc108.org:8002/Public/Uploads/2018-08-08/5b6a61dfc4bf7.png" alt="" /></p>
<h3>页面源码</h3>
<p>地址：
<a href="https://actspt.win108.com/action/topwinner/m/weixin/index.html">https://actspt.win108.com/action/topwinner/m/weixin/index.html</a></p>
<p>源码：</p>
<pre><code class="language-javascript">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- 优先使用 IE 最新版本和 Chrome -->
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
<!-- 为移动设备添加 viewport -->
<meta content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" name="viewport" />
<!--下面三个是清除缓存 微信浏览器缓存严重又无刷新；这个方法调试的时候很方便-->
<meta content="no-cache" http-equiv="Pragma" />
<meta content="no-cache" http-equiv="Cache-Control" />
<meta content="0" http-equiv="Expires" />
<title>同城游</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
background-color: black;
}
.main {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background-color: black;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
</style>
</head>
<body>
<div class="main">
<iframe border="0" frameborder="no" height="100%" id="game_iframe" marginheight="0" marginwidth="0" scrolling="yes" src=""
width="100%">
</iframe>
</div>
<script src="//static.tcy365.com/cdn/jquery/1.7.1/jquery.js" type="text/javascript"></script>
<script>
window.onload = function () {
function isWeixin() {
var ua = navigator.userAgent.toLowerCase();
return ua.match(/MicroMessenger/i) == "micromessenger" ? true : false;
}
function getLocationParam(param, url) {
var _str = !url ? window.location.search : url;
if (_str === '') return '';
// _str = _str.substr(_str.indexOf('?') + 1).toLowerCase();
_str = _str.substr(_str.indexOf('?') + 1);
var _arr = _str.split('&');
for (var i = 0; i < _arr.length; i++) {
if (_arr[i].indexOf(param.toLowerCase() + '=') > -1) {
return _arr[i].split('=')[1].replace('/', '');
}
}
return '';
}
function init() {
var nowURL = window.location.href;
var iframeUrl = getLocationParam('iframe', nowURL);
if (iframeUrl) {
var targetUrl = decodeURIComponent(iframeUrl);
console.log(targetUrl, isWeixin())
if (isWeixin()) {
$('#game_iframe').attr("src", targetUrl);
} else {
window.location.href = targetUrl;
}
}
};
init();
//------------------------------------------------
}
</script>
</body>
</html></code></pre>