ブラウザ操作を制限する方法は?

このQ&Aのポイント
  • タイトル:ブラウザ操作制限のための方法
  • 要約1:ボタンの非活性化を使ってブラウザの操作を制限する方法について相談です。
  • 要約2:AJAXを使用してブラウザの操作を制限する方法があるが、自分には時間がかかりそうなので、比較的簡単な方法を教えてほしいです。
回答を見る
  • ベストアンサー

処理実行中にボタンを非活性にして待機する

お世話になっております。 作業マシン:WINDOWS Server2008 (仮想) 開発ツール:VWD2010(VB) 使用DB:SQLServer2008R2 にて、Webアプリを開発しております。 ASP.NET開発の経験はおおよそ1ヶ月程です。 【目的】 現在、ボタン押下時に外部ファイルを実行しておりまして、 (結果が戻るまで1分くらい) その間、ブラウザの操作を制限したいと考えています。 他のボタンを押したり、×ボタンで終了したり、 戻るキーで画面遷移したり…そういった操作の禁止です。 理想は、JavaScriptのconfirmを実行させたときの様な 「親画面が一切コントロールできない」状態ですが、 ボタンの非活性化(button.enabled=False とした画面での待機)等、 でもよいかと考えています。 【現状】 実行中 待機 などのキーワードで探しますと、 AJAXというキーワードがよく目に付きます。 よく目に付くという事は現行の主流なのかと思いますが、 JavaScriptでhtmlの動きを制限する程度の経験しかない今の自分には AJAXを理解して実装するまでには時間が掛かりそうです。 【相談内容】 今回、皆様にご教授願いたい事は、 時間のかかる処理を待つ間ブラウザ操作を制限するのに 比較的簡単に実現できる方法はないか?と、 その手段を教えて頂きたいのです。 また、以下の認識が正しいか、大きな誤りがあるか、教えてください。 --------ここから--------- プロセス実行中、ボタンを非活性にして待つのは、  「JavaScriptで各ボタンのbutton.enabled=False としてから  .vbファイルのbutton_clickイベント内でプロセス実行すれば言いだけでは?」 という認識の元、 外部JSファイル内に記載したJavaScript内で、 各ボタンのEnabled="False" を記述してやろうと思っています。 (現在外部JSファイル内の関数を呼ぶのに難儀する有様ですが。。) また、表示されてるhtmlソースのボタンタグ中にenabledは (.aspxに手動で記述を追記しても)表示されていません。 これでは enabledをFalseにする記述を書いてもブラウザ表示は変らないのでは…? --------ここまで---------- 本来、これほど焦点が定まっていない状態での質問は 回答してくださる皆様にも失礼とは思いますが、 それでも自力で方針を定める事が出来ず、相談致します。 何卒よろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • onos
  • ベストアンサー率81% (127/155)
回答No.2

あ、比較的簡単につくるなら ・起動確認のページを表示。  そこでボタンをクリックされたらJavaScriptで画面を操作できないようになんらかの表示変更をしたうえでサーバにリクエストをなげる。 ・サーバーではリクエストを受け取ったら普通に処理を開始。  処理が終了したところで処理完了のページをクライアント側に送る これだけでとりあえず考えられてる処理になるかと思います。 あとはサーバ上での外部ファイルの実行の権限関係は問題ないか、という点と、 多くの人が外部ファイルを実行したときの処理に問題はないか、というあたりが 気にはなりますが。

wendy0303
質問者

お礼

ありがとうございます。 外部実行ファイルはとりあえず多くのユーザーが触るものではないので、 とりあえず的ではありますが ボタン押下時に、 画面内全ボタンdisebled、 (Loginstatusと、huperlinkはdisebledでは無効化できず考え中です) Window.location.hrefで結果画面に遷移。 ここまでをjavascriptで処理し、 結果画面のオンロードで時間の掛かる処理を実行。 それが終わるまでは遷移前の画面(ボタン非活性化)で 待機すると言うとりあえずの目的は果たせています。

その他の回答 (2)

  • WebSurfer
  • ベストアンサー率55% (33/59)
回答No.3

Microsoft ASP での質問ということですから ASP.NET AJAX は使えるのですよね。であれば、以下の URL で紹介した例 ではいかがですか? サンプルもあるので試してみてくださ い。

参考URL:
http://surferonwww.info/BlogEngine/post/2011/05/29/Show-progress-in-ModalPopup.aspx
wendy0303
質問者

お礼

回答ありがとうございます。 自分は大抵、人のコードを真似てみても、 自分の凡ミスや見落としで失敗し、 しかも何処をどう間違えているのか、 理解する前は自分のミスが何処にあるのかも判り難い為 サンプルつきで試せるのは本当にありがたいです。 AJAXを理解する前の、とりあえずの切羽詰った現状での解決は 他の方の回答により得る事が出来ましたが、 WebSurfer様に頂いたサンプルは (VB~C#の違いはありますが) 理解の上で本当に助けとなります。ありがとうございます。

  • onos
  • ベストアンサー率81% (127/155)
回答No.1

時間のかかる処理はサーバー側で行うものですか?それともクライアント側で行うものですか? > プロセス実行中、ボタンを非活性にして待つのは、 > 「JavaScriptで各ボタンのbutton.enabled=False としてから > .vbファイルのbutton_clickイベント内でプロセス実行すれば言いだけでは?」 > という認識の元、 クライアント側の処理ならこれもありでしょうが、セキュリティ的な制限が厳しいですから、プロセス実行させるのは難しいような。 で、処理がサーバー側で行われるものであれば、まずこの認識が誤っていると思います。 > 時間のかかる処理を待つ間ブラウザ操作を制限するのに > 比較的簡単に実現できる方法はないか?と、 簡単に実現できる方法はない、と思っていたほうがよいと思います。 素直にAJAXについて学習することがおすすめかな。 まず最初にWebアプリでサーバー上の処理とクライアントでの処理がどのようなタイミングでどう発生するか、といったところをきちんとおさえることをおすすめします。

wendy0303
質問者

お礼

Onos様、お世話になっております。 プロセスはサーバー側です。 配置したpowershellを実行しています。 ですので、ご指摘頂きました認識誤りをしておりました。 1,起動確認画面 2,実行中です と表示するだけの画面 3,結果画面 と、分けまして、2で先に実行中ですと表示させてから、 (オンロードでない) クライアントに自動でプロセス起動のリクエストを実行させ・・・ 等と考え、 どうやってそんなことをするのか? 出来たとして、自動でsubmit する画面を作るのか? と、違和感を覚える始末です。 ご助言のとおり、ajaxを学習して見ます。 解決後、報告致します。

関連するQ&A

  • 外部ファイルを実行

    javascriptで <script type="text/javascript" src="test.js" ></script> を記述すると、 HTML読み込み時にtest.jsを実行するのですが、 ボタンクリック時に外部ファイルを実行するコードはどのように記述すればいいのでしょうか? よろしくお願いします。

  • ボタン操作

    VC++2008ExpressEditionを使用してプログラムを作成しています。 Windowsフォームアプリケーションを作成し、そこに、TextBoxとButtonを放り込み、ボタンを押すと以下のようなコードが実行されるようにしました。   System::Void button1_Click(System::Object^ sender, System::EventArgs^ e) {     static bool flug=false;     if(flug)return;     flug=true;     button1->Enabled=false;     button1->Text=L"実行中";     button1->Update();     int i;     for(i=0;i<200;i++){       int t=clock();       while(10>clock()-t);       textBox4->Text+=L"aaraeaewa"+i+L"\r\n";       textBox4->SelectionStart = textBox4->Text->Length;       textBox4->ScrollToCaret();     }     button1->Enabled=true;     flug=false;     button1->Text=L"実行";   } このように設定したボタンを何回も連続して押すと、この関数を実行中は多重実行されないことを想定しているのですが、やってみると多重実行されてしまいます。 どの様にすれば多重実行しないように出来るのでしょうか? また、この関数を実行中は自分で作成したアイテムを操作することが、一切できなくなってしまうのですが、何か解決方法は無いでしょうか? 宜しくお願いします。

  • HTML内記述と外部jsファイルの違い

    JavaScript初心者です。 HTML中のとあるボタンを押したとき、二つのラジオボタン(radio1)の選択を変える処理をJavaScriptで試みています。 ■HTMLのフォーム記述(抜粋) <INPUT type="button" name="radio1" value="変更" onClick="setRadio1()"> ■同一HTML内に記述したJavaScript function setRadio1() { <!-- document.mainform.radio1[0].checked = true; //--> }</script> ↑これは問題なく動作する。 ■外部jsファイルに記述したJavaScript function setRadio1() { document.mainform.radio1[0].checked = true; } ↑ページエラーとなる。 なぜか外部jsファイルのJavaScriptに切り替えると「ページエラー」になってしまいます。 どの辺りが問題なのか見当がつきません。 何か気づきがありましたら、アドバイスをお願いします。 ※ちなみに外部jsファイルに記述してある他のJavaScriptは問題なく動作します。

  • Buttonの処理について

    aspのButtonの処理をクライアント側(javascript)だけで実行出来ますか? 出来る場合、どのような記述をすればいいでしょうか? <asp:Button ID="btnHenko" runat="server" Text="実行" OnClientClick=" btn_Click" UseSubmitBehavior="false" だけ記述したところ、サーバー側の処理が走ってしまいます。

  • AJAXで新規表示されたボタンが稼働しない

    下記のようなものを作りました。 1 通常は下記のような <100購入>というボタンが表示されています。 <button class="button8" type="submit" name="volume" value="100">100購入</button> 2 <追加表示ボタン>を押すと、 <button class="button8" type="submit" name="volume" value="500">500購入</button>という<500購入>ボタンが新たに追加されます。 3 <100購入>ボタンか<500購入>ボタンを押すと、お好きな数値が購入できます。 前提条件 <100購入>ボタンは、当初から<form></form>内に直接記載されているボタンです。 <500購入>ボタンは、<追加表示ボタン>を押した際、AJAXにより、<form></form>内に新たに設置されるボタンです。 問題点 <100購入>ボタンは問題なく稼働します。 しかしながら、AJAXにより新たに設置された<500購入>ボタンを押しても、Formが稼働しません。 どのようにすれば、AJAXにより新たに設置された<500購入>ボタンが稼働するようになるでしょうか? よろしくお願いいたします。 +++++++++++++++++++++++++++++++++++++++++++++++++++ 当方が作ったソース <script type="text/javascript" src="./js/jquery.js"></script> <form action="abc.cgi" method="post" name="form1" id="form1"> <div id="msg">ここへ出力</div> <button class="button8" type="submit" name="volume" value="100">100購入</button </form> <BR> <button id="btn0">追加表示</button> <script type="text/javascript"> jQuery(function($){ $("#btn0") .click(function () { $.ajax({ beforeSend:function(BTN){ $("#msg").append("<BR>新規ボタンを表示します<BR>"); }, complete: function (BTN, textStatus) { $("#msg").append("<button class=\"button8\" type=\"submit\" name=\"volume\" value=\"500\">500購入</button><BR>"); } }); }); }); </script>

  • actionscript3.0でボタン操作無効化

    flashのHPを作っております。 (mc)ボタンを配置しクリックすると画面の背景が変わる操作をしたいと思っており(top、new、main・・・など) 下記のHPのような http://www.mediacreator.jp/tutorials/show_tutorial.asp?id=69&pn=3 操作ボタンを作っております。 上記HPは2.0で製作されているため、3.0に改変し、 アクションを下のようにしました。 var buttonNames= new Array("button1", "button2", "button3", "button4"); button1.buttonMode = true; button2.buttonMode = true; button3.buttonMode = true; button4.buttonMode = true; button1.addEventListener(MouseEvent.CLICK, button1click); button2.addEventListener(MouseEvent.CLICK, button2click); button3.addEventListener(MouseEvent.CLICK, button3click); button4.addEventListener(MouseEvent.CLICK, button4click); function resetButton(buttonName){ for(var i = 0; i < buttonNames.length; i++){ if(buttonNames[i] != buttonName){ this[buttonNames[i]].gotoAndStop(1); this[buttonNames[i]].enabled = true; } } } function button1click(event:MouseEvent):void { resetButton(button1); this.gotoAndStop(2); this.enabled = false; } function button2click(event:MouseEvent):void { resetButton(button2); this.gotoAndStop(2); this.enabled = false; } function button3click(event:MouseEvent):void { resetButton(button3); this.gotoAndStop(2); this.enabled = false; } function button4click(event:MouseEvent):void { resetButton(button4); this.gotoAndStop(2); this.enabled = false; } コンパイルエラーは無くなったのですが、ボタン自体が動いてくれません。 どこが間違っているか分かる方、お教え下さい!

  • JavaScriptのエラー ( 関数の未定義)

    htmlであるボタンを押すと、そこで実行するはずの関数が未定義になる、 という不具合が出ていたのですが、 JavaScript(<script>)の記述場所を変更する事により、対処することができました。 でもまだ、理解ができずにいます。 たとえば <head> <script ・・・・外部jsファイル> </head> <body> <input type="text" name="hizuke" ・・・> <input type="button" name="newdisp" value="表示" onclick="hyouji();">  ・  ・ <input type="hidden" name="syori" value="">  ・  ・  ・ </body>  ・  ・ ※外部jsファイルでhyouji()関数記述 のようなhtmlで、今回「表示」ボタンをクリックするとエラーになり、 エラーの詳細を見ると    hyouji()が未定義です となり、 JavaScriptの関数がまだ読み込まれていないから 記述を後に移動したほうがいいというアドバイスを受け、 このhtmlを <head> </head> <body> <input type="text" name="HIZUKE" ・・・> <input type="button" name="newdisp" value="表示" onclick="hyouji();">  ・  ・  ・ <input type="hidden" name="syori" value="">  ・ <script ・・・・外部jsファイル> </body>  ・  ・ のように変更して、エラーをなくすことができました。 外部jsファイルのhyouji()関数の処理は 「syori」のhiddenに「hyouji」というような処理識別をセットし、 submitしています。 hyouji()関数の前にもたくさんの関数が定義されていて その中には    var aaa = document.form1.xxxx.value; などの記述もたくさんあります。 <script>の記述場所を移動したことで    htmlを読み込んで、    「表示」ボタンを表示し、    jsファイルを読み込む・・・ という処理順序になると思うのですが 表示ボタンをクリックしたときには、 jsファイルの読込みは終了しているのでしょうか??? ボタンをクリックした時にはjsの読込みを終了していないといけないと 思うのですが、なぜjsの記述を<inputボタン>の記述より後のほうに移動させて、 未定義関数が解決されるのかがわかりません。 エラーの内容が   オブジェクトが見つかりません などだと、hidden項目が後に記述されているからか・・・と理解できるのですが。 うまく伝わるか不安ですが、 ボタンクリックの前にはJavaScriptの関数が読込みが 終了していなければならないのはわかるのですが、 なぜ、ボタンの表示より、後に記述することで解決できるのか 解説していただけると助かります。 よろしくお願いします。

  • alert()が実行できない

    JavaScriptについての質問です。 何故か、jsファイルにてalert()が実行できなくなりました。 alert("aaa"); と記述した「test.js」ファイルを作成して実行すると、 「オブジェクトを指定してください」とエラーメッセージが表示されます。 しかし、 <script type="text/javascript"> alert("aaa"); </script> と記述した「test.html」ファイルを作成して実行(IE7)すると、 エラーは表示されず、意図したとおりアラート画面が表示されます。 どうしてこのような現象が起こるなのか全く分かりません。 解決策をご存知の方は、教えていただけないでしょうか。

  • Javascriptを実行ファイルにすることはできますか?

    Javascriptを実行ファイルにすることはできますか? ブラウザをいちいち立ち上げなくても、普通のアプリケーションとして振舞うようなものを作れるソフトはありますか? サイドバーのガジェットも中身はJSなようなのでできなくもなさそうなのですが。

  • JAvaScriptの外部ファイルの記述について

    HTML内にJavaScriptの処理書くのが嫌で、外部ファイルにしてJavaScriptを読み込むようにしたのですが、このファイルに、実行したい処理を複数書いてしまうとHTMLで正しく処理されなくなるのは何故ですか?.jsファイルには処理は1つしか記述できないのでしょうか?CSSファイルみたいに1つのファイルに何個も処理を記述してHTMLに反映させるようにしたいのですが・・・。どなたにも質問できず困っています。どなたか教えて下さい。jsファイルには処理は1つしか記述できないものなのかどうか回答お願い申し上げます。

専門家に質問してみよう