Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

form POST in iframe without affecting history

Is it possible to submit a form inside an iframe without affecting the browser's history?

I've implemented sending a cross domain POST request. It uses Javascript to create and submit a form inside an iframe. It works, but each request adds an item to the browser's history.

Anyone know a way around this? I've tried creating the iframe with both innerHTML and createElement. I've seen no difference so far.

PS - I would love to use XMLHtttpRequest ("Ajax"), but it doesn't support sending data across domains. And I would love to use GET instead of post, but I need to send more than 2k of data.

Here's one version of my code. I've tried many variations and have searched all over, butI can't seem to find a solution that doesn't affect the browser's history. I believe it's not possible -- can anyone confirm that?

<html>

<head>
  <script type="text/javascript">
    function submit(params) {

      var div = document.createElement('div');
      div.innerHTML = '<iframe height="50" width="50"></iframe>';
      document.body.appendChild(div);

      var iframe = div.firstChild;
      var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
      iframeDocument.open();
      iframeDocument.close();

      var form = iframeDocument.createElement('form');
      iframeDocument.body.appendChild(form);
      form.setAttribute('action', 'http://some-other-domain.com/submit-here');
      form.setAttribute('method', 'POST');

      for (param in params) {
        var field = iframeDocument.createElement('input');
        field.setAttribute('type', 'hidden');
        field.setAttribute('name', param);
        field.setAttribute('value', params[param]);
        form.appendChild(field);
      }
      form.submit();
    }

    window.onload = function() {
      document.getElementById('button').onclick = function() {
        submit({
          'x' : 'Some Value',
          'y' : 'Another Value',
          'z' : new Date().getTime()
        });
      }
    }
  </script>
</head>

<body>
  <h1>Example of using Javascript to POST across domains...</h1>
  <input id="button" type="button" value="click to send">
</body>

</html>
like image 886
Brian Avatar asked Oct 20 '09 21:10

Brian


2 Answers

You should use an AJAX POST.

Usually only the GET method is used while creating Ajax apps. But there are several occasions when POST is necessary when creating a ajax request. This could be for several reasons. For example, POST request are considered more secure than GET request as creating a POST request is relatively harder than creating a GET request.

AJAX calls aren't stored into the browsing history.

like image 90
Esteban Küber Avatar answered Sep 21 '22 12:09

Esteban Küber


Does it work to use JS to add an IFRAME whose src is hosted at your site (the domain to which the third-party-hosted script needs to send data?) This IFRAME could include the needed Javascript to make an XMLHttpRequest to your/its domain. And as for getting the actual data to this IFRAME from the third-party-site - try: http://softwareas.com/cross-domain-communication-with-iframes . It's a pretty clever solution involving changing fragment identifiers (#something) at the end of the IFRAME URL, which you can then read via JS within the IFRAME.

Also a guess, but if you tack this past SO solution to a similar history problem (using location.replace) on to the above this hopefully should let you do the anchor-changing part without disrupting the history stack.

like image 31
Ben Regenspan Avatar answered Sep 20 '22 12:09

Ben Regenspan