インラインフレームのキーイベント

2023/08/08 22:24

このQ&Aのポイント

インラインフレームでのキーイベント取得時にオブジェクトがないエラーが発生
通常の場合は正常に機能するが、インラインフレーム内でキーイベントを取得するとエラーが発生
解決方法を求めています

ベストアンサー

インラインフレームのキーイベント

2009/06/09 17:45

ＩＥ７のインラインフレームでキーイベントを取得しようとしているのですが、オブジェクトがありませんとエラーになってしまいます。こちら通常の場合は上手くいくのですが、 <html> <head> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <title>HTML Editor</title> <script type="text/javascript"> document.onkeydown = function(e) { var shift, ctrl; keycode = event.keyCode; ctrl = event.ctrlKey; shift = event.shiftKey; // キーコードの文字を取得 keychar = String.fromCharCode(keycode).toUpperCase(); // Ctrl同時押しの場合 if (ctrl) { if (keychar == "C") { alert('Ctrl+C'); } } } </script> </head> <body id="oBody"> <span id="editSpan"> <iframe id="oIframe" style="width:100%;height:50%"> </iframe> </span> </body> </html> 次のようにインラインフレームの中で行おうとするとエラーになってしまいます。 <html> <head> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <title>HTML Editor</title> </head> <body id="oBody"> <span id="editSpan"> <iframe id="oIframe" style="width:100%;height:50%"> </iframe> </span> <script type="text/javascript"> oIframe.document.onkeydown = function(e) { var shift, ctrl; keycode = event.keyCode; ctrl = event.ctrlKey; shift = event.shiftKey; // キーコードの文字を取得 keychar = String.fromCharCode(keycode).toUpperCase(); // Ctrl同時押しの場合 if (ctrl) { if (keychar == "C") { alert('Ctrl+C'); } } } </script> </body> </html> なにか解決方法ありますでしょうか。よろしくお願いします。

take_july
お礼率54% (88/162)

JavaScript
回答数1
ありがとう数2

みんなの回答 （1）
専門家の回答

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

ベストアンサー

fujillin
ベストアンサー率61% (1594/2576)

2009/06/09 18:54 回答No.1

event.keyCode ってIE用じゃなかったかな？それはおいといて… event～だと親フレームの（発生していない）イベントが呼び出されるので、エラーになっているのでは？とりあえず、oIframe.eventみたいにしてあげれば、IE6では動作するみたいだけど… （とりあえずのヒントとして。ちゃんとした解決は他の方の回答に譲ります）

質問者

お礼 2009/06/09 21:09

ありがとうございました。解決できました。

関連するQ&A

ファンクションキー制御？
こんにちわです。タイトル通りなのですが、 JSでは、 function kdown(e) {var msg =""; var flg = 1; switch(window.event.srcElement.tagName){ case "INPUT" :if(event.srcElement.type != "text" && event.srcElement.type != "password" && event.keyCode!=9 && event.keyCode!=16 && event.keyCode!=32){return false;}else{flg=0;}break; case "TEXTAREA" :flg = 0;break; case "SELECT" :flg = 0;break; case "A" :flg = 2;break; } switch(event.keyCode){ case 8 :msg = "BS";break; case 78 :if(event.ctrlKey){msg = "Ctrl+N";}break; case 82 :if(event.ctrlKey){msg = "Ctrl+R";}break; case 116 :msg = "F5";break; case 122 :msg = "F11";break; } if(event.altKey){msg = "Alt";} if (flg == 0 ){switch(event.keyCode){case 8 :msg = "";break;case 13 :msg = "";break;}} else if (flg == 2 && event.keyCode==13)msg = ""; if(msg != ""){event.keyCode = 0;return false;}else{return true;} } document.onkeydown = kdown; こんな感じに制御するのを、アクションスクリプトで制御出来ますか？ HTMLにこのJS埋め込んでも、FLASHの所クリックして、各キー押すと意味なくなってしまうので・・ F5やF11など使用されたくないのですが・・・入れ替えなどでも良いのですが。。。宜しくお願いします。
- 締切済み
- Flash
JavaScript テキストボックスキーイベント
JavaScript テキストボックスキーイベントこんにちは。趣味でプログラミングをしている者です。タイマーを使って計算ドリルを作ったのですが、特定のキーコードで正解かどうか判定する関数を呼び出そうとしたのですが、テキストボックスにこたえを入力して、キーを押すたびに「キーン」というような音が鳴るのですが、その音は、どのような仕組みで鳴るのでしょうか？また、音を鳴らさないようにする方法がありましたら、教えていただけないでしょうかよろしくお願いします <html> <head> <script type="text/javascript"> function init() { document.attachEvent("onkeypress", KotaeAwase); } function KotaeAwase() { if( event.keyCode == 13) { var key = 1; var kotae = parseInt( document.Form1.kotae.value ); var Result = document.Form1.result; if( kotae == key ) Result.value = "せいかいです!"; else Result.value = "ちがいます"; } } </script> </head> <body onLoad="init();"> <form name="Form1"> <input type="text" name="kotae" size="20"> <br><br> <input type="text" name="result" size="20"> <br> </form> </body> </html>
- ベストアンサー
- JavaScript
designMode=on のときのキーイベント処理
HTMLエディタを使ったWEBアプリケーションを作っているのですが、 designMode=onにしてインナーフレームを編集可能にしたとき、 Mozillaの場合、キーイベントが反応せず困っております。(IEでは動きます) どなたか、ご存知のかたは教えてください。よろしくお願いします。 OS : WindowsXP ブラウザ：firefox 2.0.0.4 ・ソース <html> <head> <script type="text/javascript"> var doc=null; function init(){ var doc = document.getElementById("testFrame").contentWindow.document; doc.designMode = "on"; doc.onkeydown = test; } function test(){ alert("OK"); } </script> </head> <body onload='init();'> <iframe id="testFrame" width="500px" height="500px" ></iframe> </body> </html>
- ベストアンサー
- JavaScript
セレクタの指定について質問です
セレクタの指定について質問です JavaScriptを独学で勉強中です。いつも動くようにできるのですが、他にもっといい方法があるんじゃないかと悩みます。。動くんだったらいいじゃないかと言われるんですが、初歩的なことほど、ホントにこれでいいのかなぁと考えてしまいますので、質問させてください。初歩中の初歩なんですが、セレクタの指定に変数を使用してもいいんでしょうか？こんな感じです。 var char_id = 'span#' + character.toLowerCase(); $(char_id).addClass('down'); jQueryを使用してKeyCodeに対応した文字の色を変えるプログラムを作成しています。 IE8で確認したところ、期待通りに動くんですが、こんな書き方でいいんでしょうか？また、他にこんなやり方もある場合は教えてください。よろしくお願いします。 <html> <head> <style type="text/css">  </style> </head> <body> <span id="a">a</span> <span id="b">b</span> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript">  </script> </body> </html>
- ベストアンサー
- JavaScript
インラインフレームが消えてしまいました
行間を空けようと思い、body内に <span style="font-size:17px; line-height:20pt;"> を入れたとたん、インラインフレームが表示されなくなってしまいました。？？と思い<span style="font-size:17px; line-height:20pt;">を消してみてもインラインフレームが戻ってきません。他にやった操作はないはずなのですが・・・（<br>をいくつか削ったりはしました）インラインフレームのタグもいじっていません。なにがいけないのか、さっぱり分かりません。inline.htmlもきちんと同じフォルダ内にあります。私はＨＴＭＬもｃｓｓもとても初心者なので、凄く簡単なところで見落としがあるのかもしれません。と思って小一時間ほどソースを見直してみたのですが、原因となるものが分からず、困っています。「こういう状況下ではインラインは使えない」というものでもあるのでしょうか・・・？一応ソースを貼っておきます。******は単なる文字列だと思ってください。 <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta content="****" name="keywords"> <meta content="**************" name="description"> <meta name="description" content="******************" /> <meta name="keywords" content="*************************" /> <link rel="stylesheet" href="style.css" media="all" type="text/css"> <title>****************</title> </head> <body><body background="title.gif"> <span style="font-size:17px; line-height:20pt;"> <h1 id="HEADER"><img src="title.jpg" alt="タイトル画像"></h1> <br><br><br> <ul id="NAV"> <li><a href="index.html" title="ホームに戻ります"><img src="home.gif" border=0 alt="ホームに戻ります"></a></li><br><br> <li><a href="main.html" title="********"><img src="bosyu.gif" border=0 alt="********"></a></li><br><br> <li><a href="http://*********.com/" title="******"><img src="blog.gif" border=0 alt="管理人のブログです"></a></li><br><br> <li><a href="douga.html" title="********"><img src="douga.gif" border=0 alt="*****"></a></li><br><br> <li><a href="http://*********/" title="***********"><img src="bbs.gif" border=0 alt="掲示板"></a></li><br><br> <li><a href="link.html" title="お世話になっているサイト様です。ネチケットを守ってお伺いして下さい。"><img src="link.gif" border=0 alt="リンク"></a></li> <br><br> <li><a href="http://******" title="******"><img src="mail.gif" border=0 alt="メールフォーム"></li></a> </li> </ul> <div id="CONTENT"> <center><b> <font color=blue> <br> *****************<br> ****************<br> <font color="green><u>****</u><br> ***********<br> ***********</font><br><br> <iframe src="inline.html" width="50%" height="150" name="koushin">ここはインラインフレームです。表示されない場合はお使いのブラウザが対応しておりませんです。。。</iframe><br><br><br> <h1><font color=red>**********</h1><br> ********<br> ******** <br> <a href=*****.html target="_blank"><br><br> <font size=5>****</font><br></a> ******<br> ****** </font><br> *************<br> *************<br><br> <font color=#00008B><h1>*******</h1> *******************<br> *******************<br><br> *******************<br> *******************<br> *******************<br><br> ************</font> <br> <br> <br>  <center><bottom> <script language="JavaScript" type="text/javascript" src="http://counter1.fc2.com/counter.php?id=3362754"></script><noscript><img src="http://counter1.fc2.com/counter_img.php?id=3362754"><br>undefined</noscript>  </div> </body></html> どこを見落としていますでしょうか・・・とてもお手数なのですが、どうぞお力をお貸し下さい。
- 締切済み
- CSS
Altを使ったショートカットキー無効の方法
いつもお世話になってます。 javascriptで、IEのショートカットキーのいくつかを無効にしているのですが、 Altと組み合わせて使うショートカットキーの無効化ができずに困ってます。例えば、Ctrl＋Iでお気に入りを開く処理の無効化はこう実現できました。 function keydown() { if(event.ctrlKey & event.keyCode == 73){ event.keyCode = 0; return false; } } document.onkeydown = keydown; ですが、Alt＋Dでアドレスバー選択の無効化は以下では実現できませんでした。 function keydown() { if(event.altKey & event.keyCode == 68){ event.keyCode = 0; return false; } } document.onkeydown = keydown; どうすれば実現できるのか、教えてください。
- 締切済み
- JavaScript
うまく動作しないのはなぜ？
shift、→、↓の３つのキーにのうち、１つだけ押すとブラウザに「１」を表示、２つ押すと「２」を表示、３つとも押すと「３」を表示する、という動作のjava scriptを書きました。（初心者です）ところが３つ押した場合なぜか動作してくれません。「→」ではなく「←」キーで行った場合はちゃんと「３」が表示されるのですが…。原因がわからず困ってます。どなたかお助け下さい。こちらの環境はwindowsXPでIE（バージョン6）です。ソースも載せておきます。 <html> <head> <script type="text/javascript"> document.onkeydown = keydown; document.onkeyup = keyup; var shift=0, right=0, back=0; function keydown(){ switch(event.keyCode){ case 32: shift=1; break; case 39: right=1; break; case 40: back=1; break; } } function keyup(){ switch(event.keyCode){ case 32: shift=0; break; case 39: right=0; break; case 40: back=0; break; } } function timer(){ window.setTimeout("timer();", 20); document.getElementById("shift+right+back").innerHTML = shift + right + back; } </script> </head> <body> <script> timer(); </script> shift+right+back=<p id="shift+right+back"></p> </body> </html>
- ベストアンサー
- JavaScript
マウスでスクロールした値を取得できない
IE6.02を使っています。マウスの座標を追いかけるプログラムで、ブラウザを縦方向にスクロールしてもその座標を取得したいのですが、なぜかdocument.body.scrollTopが0のままで追いかけてきませんでした。次のどこがいけないのでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>sample</title> <script type="text/javascript"></script> </head> <body> <span id="Myimg" style="position:absolute"><img src="gazou.gif"></span> a<br>←スクロールバーがでるように改行していく a<br> a<br> a<br> a<br> ・・・ </body> </html>
- ベストアンサー
- JavaScript
クリックする度に表示/非表示が切り替わるスクリプト
クリックする度に表示/非表示が切り替わるスクリプト Content1をクリックするとSubContentsの表示/非表示が切り替わるスクリプトを組みたいのですが、下記スクリプトのjavascript内で表示/非表示の実現方法がよくわかりません。調べるとStyleのVisibilityという要素(?)を指定することで表示/非表示が切り替えられる可能なのは分かったのですが、具体的にはどんなプログラムを組めばいいのか分かりません。どなたかご教授お願いします。 <html> <head> <title>Template</title> <style type="text/css"> span.content{ background-color: #FFCC66; width: 100; height: 20; } div.subcontent { position: absolute; top: 40px; left: 40px;} </style> <script language="javascript"> function cont_pop(){ //ここをどうすれば良いでしょうか？ } </script> </head> <body bgcolor=#EEEEEE> <span id="cont1" class="content" onClick="cont_pop()">Content1</span><BR> ↓これを表示/非表示させたい <div class="subcontent" id="scon1"> SubContents </div> </body> </html>
- ベストアンサー
- JavaScript
JavaScriptで擬似フレーム、読み込み完了を知るには？
サイト内の各ページ上部に、Ajaxで共通のメニュー部分.htmlを読み出し、表示しています。参考：AjaxでIFRAME的な表示をやってみる http://bizcaz.com/archives/2006/11/13-000253.php 参考：階層メニューにJavaScriptで書き換え http://www.dhtmlgoodies.com/index.html?whichScript=dhtmlgoodies_menu2 <html> <head> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="ajaxcontents.js"></script> <script type="text/javascript" src="ListbasedDHTMLmenu.js"></script> </head> <body> <span id="ajax_content_block"></span> <script type="text/javascript">  </script> <div> 本文 </div> </body> </html> ajaxcontents.jsでメニュー部分.htmlを読み出しListbasedDHTMLmenu.jsで階層メニューに書き換えています。 "dhtmlgoodies_menuObjはNullまたはオブジェクトではありません" のエラーが出て、階層メニュー部分が表示されません。 dhtmlgoodies_menuObjは階層メニュー書き換えのListbasedDHTMLmenu.jsで使われています。ページ読み出しjavascript完了後に、ページ書き換えjavascriptを実行すればと思っているのですが、方法の検討がつきません。 if ( location.search.indexOf("1") == -1 ) { setTimeout("_reload()",100); } function _reload() { location.href = location.href + "?1"; } ↑でリロードさせて見たのですが、バックすると表示されなくなります。すいませんがアドバイスをお願いいたします。
- ベストアンサー
- JavaScript