QA@IT

ASP.NETでJavaScriptが動かなくなります

13722 PV

分かりにくい質問文だったので
編集して質問し直させていただきます。

ASP.NETでJavaScriptが動かなくなって困っています。

ボタン押下時にiframeでダミーのページを参照するために
ClientScript.RegisterStartupScriptでJavaScriptを登録すると
それまで動いていたJavaScriptが動かなくなってしまいます。

環境は
OSはWindows8.1
.NET Framework4
IISは8.5
ブラウザはIE11
です。

参考までにソースを載せます。

「Excel出力」ボタン押下時に
ClientScript.RegisterStartupScriptでJavaScriptの登録を行っており
その後、それまで正常に動いていたJavaScriptが動かなくなります。

<Excel出力ページ>
ExcelOutput.aspx

<script language="javascript" type="text/javascript">

//「処理中です」ポップアップを出す
function block() {
  $.blockUI({ message: '<p><img src="images/ajax-loader.gif" style="vertical-align:middle;" /> 処理中です</p>' });
}

// ダウンロードページをiframeタグ内で開く
function InsertIFrameDownloadPage(sUrl) {
    document.getElementById('ifDownloadPage').contentWindow.location.href = sUrl;
}

//「全て」CheckBoxがOnになったら「テスト1」「テスト2」CheckBoxもOn
$(function () {
    $('.testCheckAll').click(
        function () {
            $(".test_list :checkbox").attr('checked', $('.testCheckAll').is(':checked'));
        })
})
</script>

~~~~~~

<!-- 「全て」CheckBoxと「テスト1」「テスト2」CheckBoxList -->
<input id="testCheckAll" type="checkbox"  runat="server" name="testCheckAll" checked="checked" value="ON" class="testCheckAll" />全て
<br />
<asp:CheckBoxList ID="testCheckBoxList" runat="server" >
    <asp:ListItem Selected="True" Value="1" class="test_list">テスト1</asp:ListItem>
    <asp:ListItem Selected="True" Value="2" class="test_list">テスト2</asp:ListItem>
</asp:CheckBoxList>

<!-- Excel出力ボタン -->
<asp:Button ID="ExcelOutputButton" runat="server" Text="Excel出力" onclick="ExcelOutputButton_Click" onclientclick="block();" />

<!-- 隠しiframeExcelダウンロード用) -->
<iframe id="ifDownloadPage" style="visibility:hidden"></iframe>

ExcelOutput.aspx.cs

/ Excel出力ボタン押下
protected void ExcelOutputButton_Click(object sender, EventArgs e)
{
    ~略~
    //------------------------------------------------
    // ファイルダウンロード
    // (隠しiframeタグ内にダウンロードページを開く)
    //------------------------------------------------
    // JavaScript作成
    string sScript = "<script type='text/javascript'>InsertIFrameDownloadPage('DownloadPage.aspx');</script>";
    // JavaScript登録
    ClientScript.RegisterStartupScript(GetType(), "HiddenDownloadPage", sScript);
    ~略~
}

<Excel出力用のダミーページ>
DownloadPage.aspx.cs

protected void Page_Load(object sender, EventArgs e)
{
    SpreadsheetGear.IWorkbook workbook = Session["workbook"] as SpreadsheetGear.IWorkbook;
    string outputFileName = Session["outputFileName"] as string;

    Response.Clear();
    Response.ContentType = "application/vnd.ms-excel";
    Response.AddHeader("Content-Disposition", "attachment; filename=" + outputFileName);
    workbook.SaveToStream(Response.OutputStream, SpreadsheetGear.FileFormat.Excel8);
    Response.End();
}

具体的に処理の内容を説明しますと
「Excel出力」ボタンを押下時に「処理中です」というポップアップを表示して
画面を操作できないようにし、Excel出力処理を行ったらポップアップを消す
という処理を組み込んでいます。

ポップアップはjquery.blockUI.jsを使用しています。

Excel出力処理はダミーのページ(DownloadPage.aspx)を用意して
隠しiframeで表示し、そちらで実行しています。
画面の制御もExcel出力も正常に行われるのですが
その後、それまで正常に動いていたJavaScriptが動かなくなってしまいます。

上記の例ですと「全て」CheckBoxをOnにしたら「テスト1」「テスト2」CheckBoxもOnにする
という部分のスクリプトです。

Excel出力実行前には正常に動くのですが。

ちなみに、ChromeだとExcel出力処理後も正常に動きます。
ユーザのブラウザはIEなのでIEでも動くようにしたいのですが
なぜChromeだと動いてIEでは動かないのか分かりません。

どなたかご教授願いませんでしょうか。

  • 「もう少し切り分けられないのでしょうか?」とお願いしましたが、できませんか? 問題を再現するのに必要最小限にコードを削ってみてください。少なくともサードパーティ製のライブラリとか jQuery UI などを使うのは止めて、できれば、ie11 だけ持っていれば誰でも再現できるまでに削るのがベストです。 -
  • 【追伸】質問文を書き換える前は ie11 の互換モードに限った問題だったように記憶してますが、違うのですか? 標準モードでも同じですか? ie10 以下ではどうなりますか? -

回答

ご回答ありがとうございます。

互換モードか標準モードかは関係なく
ボタン押下後の画面再描画時、JavaScriptのダウンロード前にExcelのダウンロードが実行されることによって不具合が発生していたようです。

下記のようにしてExcelダウンロードのタイミングを遅延させることで回避できました。

function InsertIFrameDownloadPage(sUrl) {
    setTimeout(function () {
        document.getElementById('ifDownloadPage').contentWindow.location.href = sUrl;
    }, 1000);
}

根本的な問題解決にはなっていないかもしれませんが
とりあえずこれで様子を見ようと思います。

ありがとうございました。

編集 履歴 (0)
  • 標準/互換は関係なかったとか、今さらなんですか? 正しい情報をベースに質問を書いていただくようお願いします。それから、スクリプトも変ですよ。よく考えて見直してみてください。 -
  • 恥ずかしながら「標準モードでも同じですか?」という質問を受けて初めて標準モードでも同じ現象が起きることを確認した次第です。
    もっと調べて整理してから正しい情報をもとに質問するべきでした。
    申し訳ありません。
    -
  • スクリプトは下記を参考にしたのですが引き続き勉強して見直してみます。
    http://www.grapecity.com/tools/support/technical/knowledge_detail.asp?id=36900
    ご指摘、ご回答ありがとうございました。
    -
  • この話と同様な問題では?
    http://surferonwww.info/BlogEngine/post/2012/12/03/script-definition-with-defer-attribute-problem-in-internet-explorer.aspx
    -
  • ちょっと検証してみました。ダウンロードする際に開くか保存するかを選択させるダイアログを表示させても、上に紹介したページと同様に、defer="defer" 属性の付与されている外部スクリプトファイルの解析に失敗します。質問者さんのコードで defer 属性の有無を確認ください。 -
  • ソリューション全体を「defer」でGrep検索してみましたが属性が付与されている該当箇所が見つかりませんでした。
    検証していただき、ありがとうございます。
    -
  • 自分で書かなくても、例えば、サードパーティ製の dll が defer 属性つきのスクリプト定義を生成するような場合はソースコードを調べても分かりません。ASP.NET がブラウザに送信する html コードを調べてください。 -
  • HTMLコード内も検索してみましたが、やはり「defer」が見つかりませんでした。 -
  • そうすると、原因を調べるには、先にお願いしましたように、問題を再現するのに必要最小限にコードを削って、それをアップしていただくしかなさそうです。質問者さんにその気があればですが。 -

よくわかりませんが、ASP.NET は関係がなくて、クライアントスクリプトが ie11 の互換モードだとうまく動かないというだけのことではないのですか? もう少し切り分けられないのでしょうか?

編集 履歴 (0)
ウォッチ

この質問への回答やコメントをメールでお知らせします。