forked from pu8crm6xf/analysiscode
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
193 lines
6.7 KiB
193 lines
6.7 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>防刷新测试页面</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
.test-section {
|
|
margin: 20px 0;
|
|
padding: 15px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.btn {
|
|
background-color: #3498db;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
margin: 5px;
|
|
}
|
|
|
|
.btn:hover {
|
|
background-color: #2980b9;
|
|
}
|
|
|
|
.status {
|
|
margin: 10px 0;
|
|
padding: 10px;
|
|
background-color: #f0f0f0;
|
|
border-radius: 4px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>防刷新测试页面</h1>
|
|
|
|
<div class="test-section">
|
|
<h2>防刷新状态控制</h2>
|
|
<button id="toggleRefresh" class="btn">启用防刷新</button>
|
|
<span id="refreshStatus">防刷新: 禁用</span>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>测试按钮</h2>
|
|
<button id="testBtn1" class="btn">测试按钮1</button>
|
|
<button id="testBtn2" class="btn">测试按钮2</button>
|
|
<button id="testBtn3" class="btn">测试按钮3</button>
|
|
<a id="testLink" href="#" class="btn" style="text-decoration: none;">测试链接</a>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>结果显示</h2>
|
|
<div id="results" class="status">
|
|
点击按钮查看结果...
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>键盘测试</h2>
|
|
<p>尝试按 F5 或 Ctrl+R 键测试防刷新功能</p>
|
|
<div id="keyboardResults" class="status">
|
|
键盘事件将在这里显示...
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 防刷新状态
|
|
let preventRefresh = false;
|
|
let eventCount = 0;
|
|
|
|
// DOM元素
|
|
const elements = {
|
|
toggleRefresh: document.getElementById('toggleRefresh'),
|
|
refreshStatus: document.getElementById('refreshStatus'),
|
|
testBtn1: document.getElementById('testBtn1'),
|
|
testBtn2: document.getElementById('testBtn2'),
|
|
testBtn3: document.getElementById('testBtn3'),
|
|
testLink: document.getElementById('testLink'),
|
|
results: document.getElementById('results'),
|
|
keyboardResults: document.getElementById('keyboardResults')
|
|
};
|
|
|
|
// 全局防刷新拦截器
|
|
function setupRefreshPrevention() {
|
|
// 拦截所有点击事件
|
|
document.addEventListener('click', function (event) {
|
|
if (preventRefresh) {
|
|
eventCount++;
|
|
console.log(`拦截到点击事件 #${eventCount}:`, event.target.tagName, event.target.id || event.target.textContent);
|
|
elements.results.innerHTML += `<br>点击事件 #${eventCount}: ${event.target.tagName} - ${event.target.id || event.target.textContent}`;
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
return false;
|
|
}
|
|
}, true);
|
|
|
|
// 拦截键盘事件
|
|
document.addEventListener('keydown', function (event) {
|
|
if (preventRefresh) {
|
|
console.log('拦截到键盘事件:', event.key, event.ctrlKey ? 'Ctrl+' : '');
|
|
elements.keyboardResults.innerHTML += `<br>键盘事件: ${event.key}${event.ctrlKey ? ' (Ctrl)' : ''}`;
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
return false;
|
|
}
|
|
}, true);
|
|
|
|
// 拦截链接点击
|
|
document.addEventListener('click', function (event) {
|
|
if (preventRefresh && event.target.tagName === 'A') {
|
|
console.log('拦截到链接点击:', event.target.href);
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
return false;
|
|
}
|
|
}, true);
|
|
}
|
|
|
|
// 切换防刷新状态
|
|
elements.toggleRefresh.addEventListener('click', function (event) {
|
|
event.preventDefault();
|
|
preventRefresh = !preventRefresh;
|
|
|
|
if (preventRefresh) {
|
|
elements.toggleRefresh.textContent = '禁用防刷新';
|
|
elements.toggleRefresh.style.backgroundColor = '#27ae60';
|
|
elements.refreshStatus.textContent = '防刷新: 启用';
|
|
console.log('防刷新已启用');
|
|
} else {
|
|
elements.toggleRefresh.textContent = '启用防刷新';
|
|
elements.toggleRefresh.style.backgroundColor = '#3498db';
|
|
elements.refreshStatus.textContent = '防刷新: 禁用';
|
|
eventCount = 0;
|
|
elements.results.innerHTML = '点击按钮查看结果...';
|
|
elements.keyboardResults.innerHTML = '键盘事件将在这里显示...';
|
|
console.log('防刷新已禁用');
|
|
}
|
|
});
|
|
|
|
// 添加测试按钮事件
|
|
[elements.testBtn1, elements.testBtn2, elements.testBtn3].forEach((btn, index) => {
|
|
btn.addEventListener('click', function (event) {
|
|
if (!preventRefresh) {
|
|
elements.results.innerHTML += `<br>按钮 ${index + 1} 被点击`;
|
|
}
|
|
});
|
|
});
|
|
|
|
// 添加测试链接事件
|
|
elements.testLink.addEventListener('click', function (event) {
|
|
if (!preventRefresh) {
|
|
elements.results.innerHTML += '<br>链接被点击';
|
|
}
|
|
});
|
|
|
|
// 页面事件监听器
|
|
window.addEventListener('beforeunload', function (event) {
|
|
console.log('页面即将被刷新或关闭');
|
|
if (preventRefresh) {
|
|
event.preventDefault();
|
|
event.returnValue = '';
|
|
return '';
|
|
}
|
|
});
|
|
|
|
// 初始化
|
|
setupRefreshPrevention();
|
|
console.log('防刷新测试页面初始化完成');
|
|
|
|
// 添加页面加载时间戳
|
|
const loadTime = new Date().toLocaleString();
|
|
console.log('页面加载时间:', loadTime);
|
|
document.body.insertAdjacentHTML('afterbegin',
|
|
`<div style="background: #e8f5e9; padding: 10px; margin-bottom: 20px; border-radius: 4px;">
|
|
页面加载时间: ${loadTime}
|
|
</div>`
|
|
);
|
|
</script>
|
|
</body>
|
|
|
|
</html> |