[英]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.