Question 36383 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Create a link from code and show it in an iframe – Jquery

I own an ecommerce website and as soon as a courier is dispatched, I send an email to the customers for tracking their shipments.
So, I have created an input field (Code given below). It this field when a user enters a courier tracking number and hits Track button, it creates a link and redirects the user to that link (Courier company’s official website) which shows the tracking details on that particular link.
So, I wanted to ask that:

  1. Is there any way that when a user inputs a tracking number and hits the track button, the results are shown in an iframe on my site instead of redirecting him to the official website. (I know it’s possible but I don’t know how to do it).
  2. Or is it POSSIBLE that upon hitting the Track the button; the tracking results are shown directly on my website instead of redirecting or even in an iframe?
document.getElementById("shipment_tracking_form").addEventListener("submit", function(event) {
  event.preventDefault();
  var track_no = document.getElementById("shipment_tracking_no").value;
  var tracking_no_length = track_no.length;
  var submit = document.getElementById("shipment_tracking_submit");
  var base_url = "https://sonic.pk/tracking?tracking_number="
  var final_url = base_url + track_no
  window.open(final_url, '_blank');
});
<form id="shipment_tracking_form">
  <input type="text" placeholder="Tracking Number" name="track_no" id="shipment_tracking_no">
  <input type="submit" style="background-color:#EC0026; color :white; display:block; margin: 0 auto" display: inline-block value="Track!" id="shipment_tracking_submit">
</form>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
Tags:

2

Answers


  1. 0

    Update

    It appears that unpkg.com has a frame buster making it basically impossible to load the content on your own site.

    The following code does not work:

    <form id="shipment_tracking_form">
  <input type="text" placeholder="Tracking Number" name="track_no" id="shipment_tracking_no">
  <input type="submit" style="background-color:#EC0026; color :white; display:block; margin: 0 auto" display: inline-block value="Track!" id="shipment_tracking_submit">
</form>
<iframe id="result" width="600" height="400" src=""></iframe>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script>
  document.getElementById("shipment_tracking_form").addEventListener("submit", function(event) {
    event.preventDefault();

    var track_no = document.getElementById("shipment_tracking_no").value;
    var base_url = "https://sonic.pk/tracking?tracking_number="
    var final_url = base_url + track_no

    document.getElementById("result").src = final_url
  });

</script>
    Login or Signup to reply.
  2. 0

    It appears that unpkg.com has a frame buster making it basically impossible to load the content on your own site. Sorry to be a cold blanket!

    The only real way to show the tracking info would be to open the link in a new tab. The page will not be in a frame and should display correctly.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search