我想使用 javascript 连接两个 HTML 页面。此外，我从第一页获取用户 IP 地址 并使用 JS 检查该 IP 地址是否有效。如果 IP 地址有效，则它希望传递到第二个 HTML 页面。 第二个 Html 页面使用 Iframe 标记 来使用该 IP 地址。 这个时候我正在写那个代码。我想为上述条件实现该代码 我该怎么做..请帮助我..谢谢。
function animatedForm(){
const arrows = document.querySelectorAll(".fa-sign-in-alt");
arrows.forEach(arrow => {
arrow.addEventListener("click", () => {
const input = arrow.previousElementSibling;
const parent = arrow.parentElement;
const nextForm = parent.nextElementSibling;
if(input.type === "text" && validateUser(input)) {
nextSlide(parent,nextForm);
}else if(input.type === "password" && validatePswd(input)) {
nextSlide(parent,nextForm);
}else if(input.type === "text" && validateIp(input)) {
window.location.href = "home.html";
}
});
});
}
function validateUser(user){
if(user.value == "pi"){
error("rgb(87, 189, 130)");
return true;
}else{
console.log("Wrong!");
error("rgb(189, 87, 87)");
}
}
function validatePswd(pswd){
if(pswd.value == "raspberry"){
error("rgb(87, 189, 130)");
return true;
}else{
console.log("not enough characters");
error("rgb(189, 87, 87)");
}
}
function validateIp(ip){
const ipformat = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
if(ipformat.test(ip.value) == true){
var IP = ip.value;
localStorage.setItem("ipvalue",IP);
alert('Valid IP');
error("rgb(87, 189, 130)");
return true;
}else{
alert('Invalid IP');
error("rgb(189, 87, 87)");
}
}
function nextSlide(parent, nextForm){
parent.classList.add("innactive");
parent.classList.remove("active");
nextForm.classList.add("active");
nextForm.classList.remove("innactive");
}
function error(color){
document.body.style.backgroundColor = color;
}
animatedForm();* {
margin: 0;
box-sizing: border-box;
padding: 0;
}
body{
height: 100vh;
display: flex;
background-color: rgb(87, 189, 130);
transition: background 0.5s ease;
position: relative;
}
.field-name,
.field-ip,
.field-password{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
height: 50px;
width: 400px;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 5px;
transition: all 0.5s ease;
}
.field-name i,
.field-ip i,
.field-password i {
padding: 10px;
cursor: pointer;
}
.field-name input,
.field-ip input,
.field-password input {
background: none;
border: none;
flex: 1;
height: 100%;
outline: none;
}
div.innactive {
opacity: 0;
pointer-events: none;
transform: translate(-50%, 50%);
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="./Images/icon/css/all.css">
<link rel="stylesheet" href="style-log.css">
<title>Guider Login</title>
</head>
<body>
<form action="home.html">
<div class="field-name">
<i class="fas fa-user"></i>
<input type="text" placeholder="Username" required>
<i class="fas fa-sign-in-alt"></i>
</div>
<div class="field-password innactive">
<i class="fas fa-key"></i>
<input type="password" placeholder="Password" autocomplete="off" required>
<i class="fas fa-sign-in-alt"></i>
</div>
<div class="field-ip innactive">
<i class="fas fa-laptop-code"></i>
<input type="text" placeholder="xxx.xxx.xxx.xxx" autocomplete="off" required>
<i class="fas fa-sign-in-alt"></i>
</div>
</form>
<script src="log.js"></script>
</body>
</html>
<!-- there was a home.html page and it use
<iframe src="http://IP:9000/javascript_simple.html" frameborder="0" scrolling="no" allowfullscreen width="100%" height="98%" ></iframe>
i want to repalse IP with user input ip address -->最佳答案
localStorage 存储没有过期日期的数据，这意味着您可以在移动到不同的 html 页面时使用它
您已经使用本地存储在您的 validateIP 函数中设置了 ip。所以只需使用 localStorage.getItem('ipValue') 从第一页获取 ip。
关于javascript - 使用 Javascript 的两个 HTML 页面链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58030918/