10

ブラウザの履歴に影響を与えることなく、iframe内でフォームを送信することは可能ですか？

クロスドメインPOSTリクエストの送信を実装しました。Javascriptを使用して、iframe内にフォームを作成して送信します。動作しますが、リクエストごとにブラウザの履歴にアイテムが追加されます。

誰かがこれを回避する方法を知っていますか？私はinnerHTMLとcreateElementの両方でiframeを作成してみました。今のところ違いは見ていません。

PS-XMLHtttpRequest（ "Ajax"）を使用したいのですが、ドメイン間でのデータ送信はサポートされていません。また、投稿の代わりにGETを使用したいのですが、2kを超えるデータを送信する必要があります。

これが私のコードの1つのバージョンです。私は多くのバリエーションを試し、すべてを検索しましたが、ブラウザの履歴に影響を与えない解決策を見つけることができないようです。それは不可能だと思います-誰かがそれを確認できますか？

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

5 に答える 5

3

AJAX POSTを使用する 必要があります。

通常、Ajax アプリの作成時には GET メソッドのみが使用されます。しかし、ajax リクエストを作成するときに POST が必要になる場合がいくつかあります。これにはいくつかの理由が考えられます。たとえば、POST 要求の作成は GET 要求の作成よりも比較的難しいため、POST 要求は GET 要求よりも安全であると見なされます。

AJAX 呼び出しは閲覧履歴に保存されません。

于 2009-10-20T22:06:17.740 に答える
1

JS を使用して、src がサイト (サードパーティがホストするスクリプトがデータを送信する必要があるドメイン) でホストされている IFRAME を追加することはできますか?ドメイン。また、サードパーティのサイトからこの IFRAME に実際のデータを取得する場合は、http://softwareas.com/cross-domain-communication-with-iframesを試してください。これは、IFRAME URL の最後にあるフラグメント識別子 (#something) を変更することを含む非常に巧妙なソリューションであり、IFRAME 内で JS を介して読み取ることができます。

これも推測ですが、同様の履歴の問題に対するこの過去の SO ソリューション(location.replace を使用) を上記に追加すると、履歴スタックを中断することなくアンカー変更の部分を実行できるようになるはずです。

于 2009-10-21T03:03:10.630 に答える
0

サーバーがコードを実行できる場合、おそらくサーバー上の「プロキシ」ページに対して ajax クエリを実行できます。これにより、リモート サーバーでリクエストが実行され、結果がページに返されます。

于 2009-10-21T00:02:58.637 に答える
0

(?) 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 です。

于 2012-02-17T16:15:40.360 に答える
-2

コメントで述べたように、この問題の解決策は、ページを通常どおりに送信しようとするのではなく、サーバーから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);
于 2009-10-20T22:06:49.487 に答える