[英]Two HTML page link with using Javascript
我想使用javascript连接两个 HTML页面。 此外，我从第一页获取用户IP 地址并检查 IP 地址是否有效或不使用 JS。 如果一个有效的 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 function 中设置了 ip。 所以只需使用 localStorage.getItem('ipValue') 从第一页获取 ip。
要包含外部 JavaScript 文件，我们可以使用带有属性 src 的脚本标签。 在使用图像时，您已经使用了 src 属性。 src 属性的值应该是 JavaScript 文件的路径。 此脚本标签应包含在 HTML 文档中的标签之间。
链接两个 JavaScript 文件以在 HTML 页面顶部一起工作
[英]Link two JavaScript files to work together on top of an HTML page
如何使用express和nodeJS将javascript文件链接到html页面
[英]How to link a javascript file to an html page using express and nodeJS
我需要使用 JavaScript 或 Z4C4AD5FCA2E7A18AA44DBB1CED0Z03 链接到我当前 HTML 页面中的另一个 HTML 页面
[英]I need to link to another HTML page inside my current HTML page using JavaScript or HTML
HTML / JavaScript-链接到页面，然后在其中单击一个按钮
[英]HTML/JavaScript - link to a page and click on a button once there
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.