在 iframe 中形成 POST 而不影响历史记录

发布于 2024-08-08 04:45:27 字数 1828 浏览 1 评论 0原文

是否可以在 iframe 内提交表单而不影响浏览器的历史记录？

我已经实现了发送跨域 POST 请求。它使用 Javascript 在 iframe 内创建和提交表单。它可以工作，但是每个请求都会向浏览器的历史记录中添加一个项目。

有人知道解决这个问题的方法吗？我尝试使用innerHTML 和createElement 创建iframe。到目前为止我还没有看到任何区别。

PS - 我很想使用 XMLHtttpRequest （“Ajax”），但它不支持跨域发送数据。我很想使用 GET 而不是 post，但我需要发送超过 2k 的数据。

这是我的代码的一个版本。我尝试了很多变体并进行了全面搜索，但我似乎找不到不影响浏览器历史记录的解决方案。我相信这是不可能的——有人能证实这一点吗？

<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>

原文

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

往昔成烟 2024-08-15 04:45:27

你应该使用 AJAX POST。

通常在创建 Ajax 应用程序时仅使用 GET 方法。但在创建 ajax 请求时，有几种情况需要 POST。这可能有几个原因。例如，POST 请求被认为比 GET 请求更安全，因为创建 POST 请求比创建 GET 请求相对困难。

AJAX 调用不会存储到浏览历史记录中。

回复收藏 0 原文

逆蝶 2024-08-15 04:45:27

使用 JS 添加一个 IFRAME 是否有效，该 IFRAME 的 src 托管在您的站点（第三方托管脚本需要向其发送数据的域？）此 IFRAME 可以包含所需的 Javascript，以便向您/其发出 XMLHttpRequest领域。至于从第三方站点获取实际数据到此 IFRAME - 尝试： http://softwareas.com/cross-domain-communication-with-iframes。这是一个非常聪明的解决方案，涉及更改 IFRAME URL 末尾的片段标识符 (#something)，然后您可以通过 IFRAME 中的 JS 读取该标识符。

也是一个猜测，但如果你解决这个过去的SO解决方案对于上面的类似历史问题（使用 location.replace），这希望可以让您在不破坏历史堆栈的情况下完成锚点更改部分。

回复收藏 0 原文

忆沫 2024-08-15 04:45:27

如果您的服务器可以运行代码，您可能可以对服务器上的“代理”页面执行 ajax 查询，然后该页面本身会在远程服务器上运行请求并将结果返回到您的页面。

回复收藏 0 原文

じ违心 2024-08-15 04:45:27

(?) 我看不出您使用 iframe 元素的充分理由。（因为这是一个较旧的问题，也许您正在测试 1997 年的 HTML 4。顺便说一句，忽略对象名称中的“XML” - 这是 2000 年及更高版本的 [X]HTML 的遗留物 - 没有 XML必需。）

如果您从 JavaScript 而不是从文档中的元素发送 HTTP 请求，则历史记录中不会添加任何内容。

function httpPost(body) {
  req = new XMLHttpRequest();
  req.open("POST", "/submit-here", true/*async*/);
     // or "http://some-other-domain.com/submit-here"
  req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  req.send(body);
}
window.onload = function() {
   document.getElementById('button').onclick = function() {
      httpPost('x=Some+Value&y=Another+Value&z=' + new Date().getTime());
      // or use a buildQuery function, JQuery formSerialize, etc. to create the body
   }
}

我使用符号链接（“ln -s ...”），以便可以将表单提交到与文档相同的域，因此在我的例子中，“/submit-here”是一个相对 URI。

(?) I don't see a good reason that you are using an iframe element. (Since this was an older question, maybe you were testing in 1997-vintage HTML 4. BTW, ignore the "XML" in the object name - it's a carry over from the year 2000 and later versions of [X]HTML - no XML required.)

If you send the HTTP request from JavaScript rather than from elements in the document, nothing will be added to the history.

function httpPost(body) {
  req = new XMLHttpRequest();
  req.open("POST", "/submit-here", true/*async*/);
     // or "http://some-other-domain.com/submit-here"
  req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  req.send(body);
}
window.onload = function() {
   document.getElementById('button').onclick = function() {
      httpPost('x=Some+Value&y=Another+Value&z=' + new Date().getTime());
      // or use a buildQuery function, JQuery formSerialize, etc. to create the body
   }
}

I use symbolic links ("ln -s ...") so that the forms can be submitted to the same domain as the document, so in my case the "/submit-here" is a relative URI.

回复收藏 0 原文

坐在坟头思考人生 2024-08-15 04:45:27

正如评论中所述，此问题的解决方案是从服务器发出 AJAX 请求，而不是尝试正常提交页面。 W3schools 对 AJAX 有非常好的介绍，您可以在这里找到：http://www.w3schools。 com/Ajax/Default.Asp

本质上，AJAX 使用 javascript 向服务器发送请求并显示响应，并且由于它使用纯 javascript 发生，因此页面不会重新加载，并且历史记录根本不受影响。这听起来正是你想要的。

编辑：AJAX 无法发布数据。

我实际上认为可以；或者至少有一些解决方法可以让您发布数据。请参阅此处：

http://www.captain.at/howto-ajax -form-post-request.php

这似乎是以一种相当简单的方式完成的。请参阅页面底部的代码。具体来说：

http_request.onreadystatechange = alertContents;
http_request.open('POST', url, true);
http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http_request.setRequestHeader("Content-length", parameters.length);
http_request.setRequestHeader("Connection", "close");
http_request.send(parameters);

As made in the comments, the solution to this problem is in making an AJAX request from your server instead of trying to submit the page normally. W3schools has a really good introduction to AJAX that you can find here: http://www.w3schools.com/Ajax/Default.Asp

Essentially, AJAX uses javascript to send a request to the server and displays the response and because it happens using Pure javascript then the page does not reload and history is not affected at all. Which sounds like exactly what you want.

Edit: AJAX can not post data.

I actually think it can; or at least there are some workarounds that let you post data. See here:

http://www.captain.at/howto-ajax-form-post-request.php

That seems to do it in a rather straightforward manner. See the code at the bottom of the page. Specifically:

http_request.onreadystatechange = alertContents;
http_request.open('POST', url, true);
http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http_request.setRequestHeader("Content-length", parameters.length);
http_request.setRequestHeader("Connection", "close");
http_request.send(parameters);

回复收藏 0 原文

~没有更多了~