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

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

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

IE7のインラインフレームでキーイベントを取得しようとしているのですが、オブジェクトがありませんとエラーになってしまいます。 こちら通常の場合は上手くいくのですが、 <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> なにか解決方法ありますでしょうか。 よろしくお願いします。

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

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

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

take_july
質問者

お礼

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

関連するQ&A

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

  • C#で、Shift+Ctrl+Cを認識できない

    Windows10 VS2010 C# keydownイベントで、ctrl + Shift + C を取ろうとすると e.Shift、e.Controlがtrue、e.KeyCodeがKeys.ShiftKeyになってしまい ”C”を 判別できなかった。なにか認識できる方法ありませんか?

  • インラインフレームが消えてしまいました

    行間を空けようと思い、body内に <span style="font-size:17px; line-height:20pt;"> を入れたとたん、インラインフレームが表示されなくなってしまいました。 ??と思い<span style="font-size:17px; line-height:20pt;">を消してみてもインラインフレームが戻ってきません。他にやった操作はないはずなのですが・・・(<br>をいくつか削ったりはしました) インラインフレームのタグもいじっていません。 なにがいけないのか、さっぱり分かりません。inline.htmlもきちんと同じフォルダ内にあります。 私はHTMLもcssもとても初心者なので、凄く簡単なところで見落としがあるのかもしれません。 と思って小一時間ほどソースを見直してみたのですが、原因となるものが分からず、困っています。 「こういう状況下ではインラインは使えない」というものでもあるのでしょうか・・・? 一応ソースを貼っておきます。******は単なる文字列だと思ってください。 <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> <!-- FC2カウンター ここから --> <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> <!-- FC2カウンター ここまで --> </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; どうすれば実現できるのか、教えてください。

  • うまく動作しないのはなぜ?

    shift、→、↓の3つのキーにのうち、1つだけ押すとブラウザに「1」を表示、2つ押すと「2」を表示、3つとも押すと「3」を表示する、という動作のjava scriptを書きました。(初心者です) ところが3つ押した場合なぜか動作してくれません。「→」ではなく「←」キーで行った場合はちゃんと「3」が表示されるのですが…。 原因がわからず困ってます。どなたかお助け下さい。 こちらの環境は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>

  • クリックする度に表示/非表示が切り替わるスクリプト

    クリックする度に表示/非表示が切り替わるスクリプト 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で擬似フレーム、読み込み完了を知るには?

    サイト内の各ページ上部に、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"> <!-- ajax_content_onload_get('メニュー部分.html','','ajax_content_block','ajax_content_progress'); //--> </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 テキストボックス キーイベント

    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>

  • ctrl+vを無効にする方法

    タイトルのとおりなのですが、 javascriptで、キー制御(今回は、ctrl+v)をしたいのですが、どうすればよいのでしょうか? ちょっと、調べてみたのですが、 if( ((event.ctrlKey == true) && (event.keyCode == 86))) { event.returnValue = false; return false; } で、できるようなのですが、どのイベントに書けばよいのでしょうか? onkeydownとonkeyupでやってみましたが、ダメでした。 宜しくお願いします。 環境:Win2k(SP4)+IE6(SP1)

  • Event.observe について教えてください。

    javascript および prototype.js について理解が中途半端なのですが、Event.observe() の 'click' 指定で、関数に引数を渡すにはどうしたらよいでしょうか?そんなことできないのでしょうか? どういうことかといいますと、まず次のようなプログラムは動かすことが出来ました。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <script src="prototype.js" type="text/javascript"></script> </head> <body> test page <form name="form1"> <input type="button" name="exe" value="実行" id="b1" > </form> </body> </html> <script type="text/javascript"> function myfunc(){ return confirm('exe ?'); } Event.observe($('b1'), 'click', myfunc, false); </script> ------------------------------------- なのですが、この myfunc()関数に引数を与えれたらよいな、と思いまして、 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <script src="prototype.js" type="text/javascript"></script> </head> <body> test page <form name="form1"> <input type="button" name="exe" value="実行" id="b1" > </form> </body> </html> <script type="text/javascript"> function myfunc(a){ alert(a); return confirm('exe ?'); } Event.observe($('b1'), 'click', myfunc(3), false); </script> のようにしてみましたが、これは意図通り動かず、何故か画面をロードした時に、myfunc()関数も呼ばれているようです。 何分理解が中途半端なので、わたしがよく分かっていないことがあるのだと思いますが、どなたかご教授していただけたら嬉しいです。よろしくお願い致します。