WEB網站教學：教你為網站添加外連網址的檢測！HTML解決一切－跟著510208(企鵝哥)學電腦

複製以下代碼貼進去，打開網站即可：

index.html：

<!DOCTYPE html>
<html>
<head>
<title>外部網站安全檢查</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


<script>
$(document).ready(function() {
var url = getParameterByName('url'); if (url) {
url = normalizeURL(url);
$('#site-url').text(url);
$('#confirm-button').attr('href', url);
} else {
$('#site-url').text('調用網站檢查函數失敗或無有效參數，請開發者檢查網站軟體狀況');
$('#confirm-button').attr('href', 'about:blank');
} $('#confirm-button').on('click', function() {
window.location.href = url;
}); // 其他程式碼... function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
} function normalizeURL(url) {
if (!/^https?:\/\//i.test(url)) {
url = "http://" + url;
}
return url;
}
});
</script>
</head>
<body>
<div class="containerSelf">
<div class="content">
<img src="image/logo.svg" width="200px" height="200px">
<h1>您即將訪問以下網站</h1>
<p>　　</p>
<p id="site-url">調用網站檢查函數失敗或無有效參數，請開發者檢查網站軟體狀況</p>
<p>　　</p>
<button id="confirm-button">確認前往</button>
</div>
</div>
<div class="footer">
<p>© 2023 510208 PenguinBrother. All rights reserved.</p>
<a href="https://storyset.com/online">Online illustrations by Storyset</a>
</div>
</body>
</html>

以上是HTML，以下是CSS：

@font-face {
font-family: YaheiConsola;
src: url('/font/font.ttf') format('truetype'),
url('/font/font.woff') format('woff'),
url('/font/font.woff2') format('woff2');
/* 添加其他字型格式，以支援不同的瀏覽器 */
} body {
font-family: YaheiConsola, 'Courier New', monospace;
margin: 0;
padding: 0;
} h1, h2, p {
text-align: center;
} .warning {
color: red;
font-weight: bold;
} p#site-url {
background-color: #636363;
padding: 10px;
margin: 0;
text-align: center;
padding-bottom: 10px;
width: 80%;
margin-left: auto;
margin-right: auto;
} h1 {
text-align: center;
} button {
display: block;
margin: 0 auto;
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 4px;
background-color: #005813;
color: #fff;
cursor: pointer;
} button:hover {
background-color: #1c4b00;
} body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: rgb(9, 56, 0);
font-family: YaheiConsola, 'Courier New', monospace;
} .containerSelf {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 90%;
margin: 0 auto;
} .content {
width: 80%;
text-align: center;
color: lightgray;
} h1, p, button {
text-align: center;
} h1, p {
margin: 0;
} button {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 4px;
background-color: #134200;
color: #fff;
cursor: pointer;
} button:hover {
background-color: #004216;
} .footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #333333;
color: #ffffff;
text-align: center;
padding: 20px;
z-index: 9999; /* 確保頁尾在最上層 */
} .footer p {
margin: 0;
} a {
color: #6699cc; /* 調整顏色值為您想要的淺，如果你這麼自
} @keyframes flashing {
0% { color: red; }
50% { color: transparent; }
100% { color: red; }
} .flashing {
animation: flashing 1s infinite;
}