243 lines
9.8 KiB
HTML
243 lines
9.8 KiB
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,maximum-scale=1,minimum-scale=1">
|
||
<title>积分商城</title>
|
||
<meta name="Copyright" content="helang">
|
||
<meta name="keywords" content="积分商城">
|
||
<meta name="description" content="积分商城">
|
||
<style type="text/css">
|
||
body {
|
||
margin: 0;
|
||
background-color: #f5f5f5;
|
||
}
|
||
iframe {
|
||
width: 375px;
|
||
height: 667px;
|
||
background-color: #fff;
|
||
box-sizing: border-box;
|
||
border: none;
|
||
}
|
||
@media screen and (min-width: 450px) {
|
||
iframe {
|
||
position: fixed;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
margin: auto;
|
||
border: 1px solid #f5f5f5;
|
||
border-radius: 4px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<iframe src="/" id="iframe"></iframe>
|
||
|
||
<script type="text/javascript">
|
||
window.isPC = true;
|
||
|
||
(function() {
|
||
var iframe = document.getElementById('iframe');
|
||
|
||
function safeDecode(value) {
|
||
try {
|
||
return decodeURIComponent((value || '').replace(/\+/g, ' '));
|
||
} catch (e) {
|
||
return value || '';
|
||
}
|
||
}
|
||
|
||
function buildQuery(params) {
|
||
var pairs = [];
|
||
for (var key in params) {
|
||
if (!Object.prototype.hasOwnProperty.call(params, key)) {
|
||
continue;
|
||
}
|
||
if (params[key] === undefined || params[key] === null || params[key] === '') {
|
||
continue;
|
||
}
|
||
pairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(params[key]));
|
||
}
|
||
return pairs.join('&');
|
||
}
|
||
|
||
function parseQuery(query, ignoredKey) {
|
||
var result = {
|
||
params: {},
|
||
ignoredValue: ''
|
||
};
|
||
if (!query) {
|
||
return result;
|
||
}
|
||
var pairs = query.split('&');
|
||
for (var i = 0; i < pairs.length; i++) {
|
||
if (!pairs[i]) {
|
||
continue;
|
||
}
|
||
var pair = pairs[i].split('=');
|
||
var key = safeDecode(pair[0]);
|
||
var value = pair.length > 1 ? safeDecode(pair.slice(1).join('=')) : '';
|
||
if (!key) {
|
||
continue;
|
||
}
|
||
if (key === ignoredKey) {
|
||
result.ignoredValue = result.ignoredValue || value;
|
||
continue;
|
||
}
|
||
result.params[key] = value;
|
||
}
|
||
return result;
|
||
}
|
||
|
||
// 获取URL参数
|
||
function getUrlParams() {
|
||
var params = {};
|
||
var search = window.location.search.substring(1);
|
||
if (search) {
|
||
var pairs = search.split('&');
|
||
for (var i = 0; i < pairs.length; i++) {
|
||
var pair = pairs[i].split('=');
|
||
var key = safeDecode(pair[0]);
|
||
if (!key) {
|
||
continue;
|
||
}
|
||
params[key] = pair.length > 1 ? safeDecode(pair.slice(1).join('=')) : '';
|
||
}
|
||
}
|
||
return params;
|
||
}
|
||
|
||
function normalizeHash(rawHash, username) {
|
||
var hash = rawHash || '';
|
||
if (hash.charAt(0) === '#') {
|
||
hash = hash.substring(1);
|
||
}
|
||
if (!hash && !username) {
|
||
return '';
|
||
}
|
||
|
||
var questionIndex = hash.indexOf('?');
|
||
var path = questionIndex >= 0 ? hash.substring(0, questionIndex) : hash;
|
||
var query = questionIndex >= 0 ? hash.substring(questionIndex + 1) : '';
|
||
var parsed = parseQuery(query, 'username');
|
||
var finalUsername = username || parsed.ignoredValue;
|
||
|
||
if (!path) {
|
||
path = '/pages/integral/index';
|
||
}
|
||
if (finalUsername) {
|
||
parsed.params.username = finalUsername;
|
||
}
|
||
|
||
var queryString = buildQuery(parsed.params);
|
||
return '#' + path + (queryString ? '?' + queryString : '');
|
||
}
|
||
|
||
function removeHashParam(rawHash, key) {
|
||
var hash = rawHash || '';
|
||
if (hash.charAt(0) === '#') {
|
||
hash = hash.substring(1);
|
||
}
|
||
if (!hash) {
|
||
return '';
|
||
}
|
||
|
||
var questionIndex = hash.indexOf('?');
|
||
var path = questionIndex >= 0 ? hash.substring(0, questionIndex) : hash;
|
||
var query = questionIndex >= 0 ? hash.substring(questionIndex + 1) : '';
|
||
var parsed = parseQuery(query, key);
|
||
var queryString = buildQuery(parsed.params);
|
||
return '#' + path + (queryString ? '?' + queryString : '');
|
||
}
|
||
|
||
function getParentHashFromIframe(iframeHash) {
|
||
var params = getUrlParams();
|
||
if (params.username) {
|
||
return removeHashParam(iframeHash, 'username');
|
||
}
|
||
return normalizeHash(iframeHash, '');
|
||
}
|
||
|
||
function updateParentUrl(iframeHash) {
|
||
var parentHash = getParentHashFromIframe(iframeHash);
|
||
if (parentHash && window.location.hash !== parentHash) {
|
||
history.replaceState(null, '', window.location.search + parentHash);
|
||
}
|
||
}
|
||
|
||
// 初始化：根据父页面URL设置iframe的src
|
||
function initIframeSrc() {
|
||
var params = getUrlParams();
|
||
var iframeHash = normalizeHash(window.location.hash, params.username);
|
||
iframe.src = iframeHash ? '/' + iframeHash : '/';
|
||
}
|
||
|
||
// 监听iframe内部路由变化，同步到父页面URL
|
||
function syncIframeUrlToParent() {
|
||
try {
|
||
var iframeWindow = iframe.contentWindow;
|
||
|
||
// 监听iframe的hashchange事件
|
||
iframeWindow.addEventListener('hashchange', function() {
|
||
var iframeHash = iframeWindow.location.hash;
|
||
updateParentUrl(iframeHash);
|
||
});
|
||
|
||
// 初始同步
|
||
var iframeHash = iframeWindow.location.hash;
|
||
updateParentUrl(iframeHash);
|
||
} catch (e) {
|
||
console.log('无法访问iframe内容（可能跨域）:', e);
|
||
}
|
||
}
|
||
|
||
// 监听父页面hash变化，同步到iframe
|
||
window.addEventListener('hashchange', function() {
|
||
try {
|
||
var params = getUrlParams();
|
||
var parentHash = normalizeHash(window.location.hash, params.username);
|
||
var iframeHash = iframe.contentWindow.location.hash;
|
||
|
||
if (parentHash !== iframeHash) {
|
||
iframe.contentWindow.location.hash = parentHash || '#/pages/integral/index';
|
||
}
|
||
} catch (e) {
|
||
console.log('无法同步hash到iframe:', e);
|
||
}
|
||
});
|
||
|
||
// iframe加载完成后设置监听
|
||
iframe.onload = function() {
|
||
syncIframeUrlToParent();
|
||
|
||
// 定期检查同步（作为备份）
|
||
setInterval(function() {
|
||
try {
|
||
var iframeHash = iframe.contentWindow.location.hash;
|
||
updateParentUrl(iframeHash);
|
||
} catch (e) {}
|
||
}, 500);
|
||
};
|
||
|
||
// 窗口尺寸检测
|
||
window.onload = function() {
|
||
if (window.innerWidth <= 420) {
|
||
// 小屏幕直接跳转到应用
|
||
var params = getUrlParams();
|
||
var targetHash = normalizeHash(window.location.hash, params.username);
|
||
var targetUrl = targetHash ? '/' + targetHash : '/';
|
||
window.location.href = targetUrl;
|
||
}
|
||
};
|
||
|
||
// 初始化
|
||
initIframeSrc();
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|