Question

我有一个javascript登录页面（我知道它不安全！），如果值正确，我将如何使网站创建iframe？

我已经尝试过window.location.assign，但是不起作用！当您添加任何代码时，它会删除输入中的值，并将您插入的值放在url中吗？

   <div class="box" id="loginbox">
   <h2>Login</h2>
   <form id="form1" name="form1" action="" onsubmit="return checkDetails();">
  <div class="inputBox">
  <input type="text" name="txtusername" id="txtusername" class="info" required />
    <label>Username</label>
  </div>
  <div class="inputBox">
  <input type="password" name="txtpassword" id="txtpassword" class="info" required/>
    <label>Password</label>
    </div>
  <input type="submit" name="Login" id="Login" value="Login"/>

  </form>
  </div>
  <script>var remainingAttempts = 3;


   function checkDetails() {
    var name = form1.txtusername.value;
    var password = form1.txtpassword.value;
console.log('name', name);
console.log('password', password);
var validUsername = validateUsername(name);
var validPassword = validatePassword(password);
if (validUsername && validPassword) {
    alert('Login successful');
  document.getElementById("loginbox").remove();


  var next = document.createElement("IFRAME");
  next.src = 'https://codepen.io';
  next.classList.add("codepen");
  document.body.appendChild(next);
} else {
    form1.txtusername.value = '';
    form1.txtpassword.value = '';
    remainingAttempts--;

    var msg = '';
    if (validPassword) {
        msg += 'Username incorrect: ';
    } else if (validUsername) {
        msg += 'Password incorrect: ';
    } else {
        msg += 'Both username and password are incorrect: ';
    }

    msg += remainingAttempts + ' attempts left.';
    alert(msg);

    if (remainingAttempts <= 0) {
        alert('Closing window...');
        window.close();
    }
}

    return validUsername && validPassword;
  }

 function validateUsername(username) {
   return username == 'GG';
}

 function validatePassword(password) {
   return password == '123';
           }</script>

我希望页面创建iframe并删除登录框。

Answer 1

问题在于，当您单击登录按钮时，您正在触发表单提交，这会触发页面加载。

<input type="submit" name="Login" id="Login" value="Login"/>

提交输入类型类型将触发此行为。为避免这种情况，请绑定到javascript中而不是HTML中的Submit事件，并使用preventDefault()来防止重新加载页面。

var ele = document.getElementById("loginbox");
if(ele.addEventListener){
    ele.addEventListener("submit", checkDetails, false);  //Modern browsers
} else if(ele.attachEvent){
    ele.attachEvent('onsubmit', checkDetails);            //Old IE
}

function checkDetails(e) {
  e.preventDefault(); 
  // rest of your code

摘自this answer的代码，您应该阅读该代码，以获取有关表单提交事件及其处理方式的更多信息。

如果javascript中的值为true，您将如何制作iframe？

1 个答案: