时间戳

首页 > 解决方案 > 提交表单时，我需要将 iframe 重定向到不同的页面

javascript - 提交表单时，我需要将 iframe 重定向到不同的页面

问题描述

这是我的代码：当调用函数时，我尝试了多种方法将 iframe 重定向到不同的页面。我需要解决这个问题，当我在输入字段中输入字母时，我需要知道如何在不同的页面上加载 iframe

function setAction(form) {
  var inp = document.getElementById("oid").value;
  var letters = /^flow/i;
  var numbers = /^[0-9]/i;
  var empty = /^(?!\s*$).+/;
  if (oid.value.match(letters)) {
    // var page = "https://flowpl.com/track/"

    form.action = "https://flowpl.com/test-page/";
    // window.top.location.href = page;

    // location.href = "https://flowpl.com/test-page/";
  } else if (oid.value.match(numbers)) {
    let url_string = "https://tracker.flowpl.com/track_customer_orders";
    let refNum = document.getElementById('oid').value;
    window.location.href = url_string + "?refNum=" + refNum + "&lang=english";
  }
  // else  {
  //    // alert('Please input numeric characters only');
  //    // document.test.oid.focus();
  //    return false;
  // }
  return false;
}

function loadintoIframe(info) {
  if (typeof info.id !== 'undefined' && typeof info.src !== 'undefined') {
    document.getElementById(info.id).src = info.src;

  }
}
window.onload = function() {
  document.forms['test'].elements['submit'].onclick = function() {
    // let page = "https://flowpl.com/track/";
    let myIframe = document.getElementById("myiFrame");
    let url_string = "https://flowpl.portal.shipsy.in/track/result";
    let refNum = document.getElementById('oid').value;
    let adsURL = url_string + "?refNum=" + refNum + "&searchBy=referenceNumber";
    console.log(adsURL);
    // let frame = window.location.href = "https://flowpl.com/track/";
    // let frame = window.frames["myiFrame"].top.location = "https://flowpl.com/track/"
    // window.top.location.href = page;
    myIframe.src = adsURL;


  }
}
<div class="container-wrap">
  <div class="container main-content">

    <div class="row">
      <form name="test" method="POST" onsubmit="return setAction(this)">
        <input type="text" name="oid" id="oid" value="" required>
        <input type="submit" name="submit" value="submit">
      </form>

      <iframe style="border:0px #ffffff none;" name="myiFrame" id="myiFrame" scrolling="yes" frameborder="1" marginheight="0px" marginwidth="0px" height="500px" width="1200px" allowfullscreen></iframe>
    </div>
    <!--/row-->

  </div>
  <!--/container-->

</div>

标签： javascriptiframe

解决方案

您可以将目标添加到表单

永远不要在表单中调用任何东西提交

window.addEventListener("load", function() {
  document.getElementById("test").addEventListener("submit", function() {
    let url_string = "https://flowpl.portal.shipsy.in/track/result";
    let refNum = document.getElementById('oid').value;
    let adsURL = url_string + "?refNum=" + refNum + "&searchBy=referenceNumber";
    console.log(adsURL);
    this.action = adsURL;
  })
})
<div class="container-wrap">
  <div class="container main-content">

    <div class="row">
      <form id="test" method="POST" target="myiFrame">
        <input type="text" name="oid" id="oid" value="" required>
        <input type="submit" value="submit">
      </form>

      <iframe style="border:0px #ffffff none;" name="myiFrame" id="myiFrame" scrolling="yes" frameborder="1" marginheight="0px" marginwidth="0px" height="500px" width="1200px" allowfullscreen></iframe>
    </div>
    <!--/row-->

  </div>
  <!--/container-->

</div>

推荐阅读