typecho 的独立页面被很多人用来做菜单，那么点击这个按钮就能跳转到新的页面怎么做呢？
直接跳转
<?php
/**
* 跳转页面
*
* @package custom
*/
if (!defined('__TYPECHO_ROOT_DIR__')) exit;
header('Location: https://ailistings.cn/');
exit;
?>新页面跳转_blank
现在的自动不允许弹窗出现，所以只能提示用户点击按钮，若是遇到允许的倒计时结束直接跳转
<?php
/**
* 新页面跳转
*
* @package custom
*/
if (!defined('__TYPECHO_ROOT_DIR__')) exit;
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>跳转中...</title>
<!-- 引入 Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<style>
body {
background-color: #f0f0f0;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: 'Roboto', sans-serif;
}
.card-container {
position: relative;
}
.redirect-card {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 15px;
width: 400px;
text-align: left;
display: flex;
flex-direction: column;
gap: 10px;
}
.card-header {
display: flex;
align-items: center;
gap: 10px;
}
.redirect-icon {
width: 40px;
height: 40px;
}
.ailistings-text {
height: 25px;
}
.card-content p {
margin: 0;
color: #333;
font-size: 14px;
}
.card-content a {
color: #0073e6;
text-decoration: none;
font-size: 12px;
display: block;
margin-top: 5px;
}
.card-footer {
display: flex;
justify-content: flex-end; /* Align everything to the right */
align-items: center;
gap: 10px; /* Space between warning and button */
}
.redirect-button {
background-color: #0073e6;
color: #fff;
border: none;
padding: 8px 15px;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.redirect-button:hover {
background-color: #005bb5;
}
.redirect-button:disabled {
background-color: #dc3545;
cursor: not-allowed;
}
.countdown-text {
font-size: 12px;
color: #fff;
}
.intercept-alert {
color: #dc3545;
font-size: 12px;
white-space: nowrap;
display: none;
}
@media (max-width: 480px) {
.redirect-card {
width: 90%;
padding: 10px;
}
.redirect-icon {
width: 35px;
height: 35px;
}
.ailistings-text {
height: 20px;
}
.redirect-button {
font-size: 12px;
padding: 6px 12px;
}
.countdown-text {
font-size: 10px;
}
}
</style>
</head>
<body>
<div class="card-container">
<div class="redirect-card">
<div class="card-header">
<img src="https://ailistings.cn/img/icon.webp" alt="AI Logo" class="redirect-icon">
<img src="https://ailistings.cn/img/footer.png" alt="AIListings" class="ailistings-text">
</div>
<div class="card-content">
<p>您即将离开 AI listing blog，前往 AI listings</p>
<a href="https://ailistings.cn/" class="url">https://ailistings.cn/</a>
</div>
<div class="card-footer">
<span class="intercept-alert" id="interceptAlert">提示：您的浏览器拦截了新窗口，请点击按钮立即跳转</span>
<button class="redirect-button" id="redirectButton">
立即跳转
<span class="countdown-text" id="countdown">(5)</span>
</button>
</div>
</div>
</div>
<script type="text/javascript">
let countdownTime = 5;
let timer;
let newWindowOpened = false;
function startCountdown() {
timer = setInterval(() => {
countdownTime--;
const countdownElement = document.getElementById('countdown');
if (countdownElement) {
countdownElement.textContent = `(${countdownTime})`;
}
if (countdownTime <= 0) {
clearInterval(timer);
handleAutoRedirect();
}
}, 1000);
}
function attemptOpenNewWindow() {
const newWindow = window.open('https://ailistings.cn/', '_blank');
if (!newWindow || newWindow.closed || typeof newWindow.closed === 'undefined') {
showInterceptWarning();
return false; // Failed to open
}
newWindowOpened = true;
return true; // Successfully opened
}
function handleAutoRedirect() {
const opened = attemptOpenNewWindow();
if (opened) {
window.location.href = '<?php echo $this->options->siteUrl; ?>';
}
}
function handleUserRedirect() {
clearInterval(timer);
const opened = attemptOpenNewWindow();
if (opened) {
window.location.href = '<?php echo $this->options->siteUrl; ?>';
}
}
function showInterceptWarning() {
const countdownElement = document.getElementById('countdown');
const button = document.getElementById('redirectButton');
const alertElement = document.getElementById('interceptAlert');
if (countdownElement) {
countdownElement.style.display = 'none';
}
if (alertElement) {
alertElement.style.display = 'inline';
}
if (button) {
button.disabled = true;
button.style.backgroundColor = '#dc3545';
button.disabled = false; // Re-enable for retry
}
}
window.onload = function() {
startCountdown();
const button = document.getElementById('redirectButton');
if (button) {
button.addEventListener('click', handleUserRedirect);
}
};
</script>
</body>
</html>