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