3

JQueryのAJAXリクエストを使用して、ユーザーが入力したフォームデータを含むXMLをバックエンドアプリケーションに送信し、その情報からPDFを作成するhtml/javascriptフロントエンドがあります。フロントエンドは応答として UUID を受け取り、それをダウンロード URL で使用して、生成された PDF をダウンロードします。

これは Firefox と Safari ではうまく機能しますが、スクリプトによるダウンロードに対する Internet Explorer 8 の保護によってブロックされています。生成された情報バーを介してファイルをダウンロードするように IE8 に指示すると、ページが強制的にリロードされ、入力されたユーザー コンテンツがすべて消去されます。

ボタン風要素の単一の onMouseUp イベントは、送信する XML の生成をトリガーし、XML を送信し、その応答を取得してから、window.location オブジェクトに URL を設定してダウンロードを開始します。そのダウンロードを別のボタン (1 つは xml を生成して送信し、UUID をフェッチし、もう 1 つは UUID から作成された URL を使用してダウンロードを開始するだけ) に分離すると、情報バーはバイパスされますが、インターフェイスのシンプルさと直感性が損なわれます。

関連する JavaScript 関数は次のとおりです。

function sendXml()
{
    var documentXml = generateDocumentXml();
    var percentEncodedDocumentXml = escape(DocumentXml);
    var url = "generate?document=" + percentEncodedDocumentXml;
    $.ajax({
        url: url,
        type: "GET",
        dataType: "xml",
        success: function (xml)
        {
            var uuid = $(xml).find('uuid').text();
            getPdf(uuid);
        },
        error: function (xhr)
        {
            alert("There was an error creating your PDF template");
        }
    });
}

function getPdf(uuid)
{
    var url = "generate?get-pdf=" + uuid;
    window.location = url;
}

この問題を最もうまく処理する方法についての提案を探しています。私の最初の好みは、情報バーがまったく邪魔にならないようにすることですが、その害を最小限に抑えることは、現在の状況よりも劇的な改善になるでしょう. フロントエンド インターフェースをリロードしてワイプできず、ユーザーが情報バーのメニューから [ファイルのダウンロード...] を選択したときに実際にファイルのダウンロードに進むことができれば、それは役に立ちます。

4

1 に答える 1

2

私はそれをテストしましたが、バーが発生する理由は、ユーザーアクション（マウスオーバー）とURLのロード（PDFファイルを推測）の間に直接の関係がないという事実のようです。

この回避策により、問題が解決されます。

ドキュメント内にiframe（非表示の場合があります）を作成して使用します

window.open(url,'nameAttributeOfTheIframe')

...PDF をロードします。バーも発生しますが、ユーザーがダウンロードを選択した場合、現在のドキュメントもリロードされますが、バーは親ドキュメントではなく iframe に属しているため、ユーザー コンテンツ (フォーム データを意味する場合) は残ります。

非表示の iframe を使用すると、ユーザーはそこに読み込まれているものを見ることができないため、ブラウザー内に表示することに注意してください (ブラウザーが可能な場合)。

<iframe name="nameAttributeOfTheIframe" style="display:none"></iframe>
<input type="button" value="click here"  onclick="f1()"/>
<input value="default value">
<script type="text/javascript">
<!--
function f1()
{
   //simulate delayed download
   setTimeout(f2,1000)     
}

function f2()
{
  window.open('http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf','nameAttributeOfTheIframe');      
}

document.getElementsByTagName('input')[1].value='this is modified value, should remain';

//-->
</script>
于 2010-11-30T05:55:32.383 に答える