在iframe中形成POST而不影响历史记录
[英]form POST in iframe without affecting history
问题描述
是否可以在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>
5 个解决方案
解决方案1
3 2009-10-20 22:06:17
解决方案2
1 已采纳 2009-10-21 03:03:10
是否可以使用JS添加其src托管在您的站点（第三方托管脚本需要向其发送数据的域？）的IFRAME。这个IFRAME可以包含所需的Javascript来为您的/它创建XMLHttpRequest域。 至于从第三方站点获取此IFRAME的实际数据 - 请尝试： http ： //softwareas.com/cross-domain-communication-with-iframes 。 这是一个非常聪明的解决方案，涉及在IFRAME URL的末尾更改片段标识符（#something），然后您可以通过IFRAME中的JS读取它。
也是一个猜测，但如果你把这个过去的SO解决方案解决了类似的历史问题（使用location.replace）上面的这个希望应该让你在不破坏历史堆栈的情况下进行锚更改部分。
解决方案3
0 2009-10-21 00:02:58
如果您的服务器可以运行代码，您可能会对服务器上的“代理”页面执行ajax查询，然后该页面本身会在远程服务器上运行请求并将结果返回到您的页面。
解决方案4
0 2012-02-17 16:15:40
（？）我没有看到你使用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。
解决方案5
-2 2009-10-20 22:06:49
正如评论中所做的那样，解决这个问题的方法是从服务器发出AJAX请求，而不是试图正常提交页面。 W3schools有一个非常好的AJAX介绍，你可以在这里找到： http ： //www.w3schools.com/Ajax/Default.Asp
从本质上讲，AJAX使用javascript向服务器发送请求并显示响应，因为它使用Pure 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);
防止 iframe 的内部位置更改影响浏览器历史记录
[英]Prevent internal location changes of iframe from affecting browser history
在同一个浏览器窗口中打开新页面，而不影响浏览器历史记录
[英]Open new page in the same broswer window without affecting the browser history
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.