JavaScript置換について
- JavaScriptでイベント属性のみを置換する方法について
- 特定の属性を別の属性に置換する方法について
- JavaScriptのreplaceメソッドを使用して置換する方法について
- ベストアンサー
Ｊａｖａｓｃｒｉｐｔ 置換について
■■Ｊａｖａｓｃｒｉｐｔ 置換について■■ Ｊａｖａｓｃｒｉｐｔでイベント属性のみを置換することは可能でしょうか？ 【やりたいこと】 ｈｔｍｌソースの 「onmouseover」を「onClick」に置換したい。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>sanmple</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS"> <link rel="stylesheet" type="text/css" href="../../../css/left.css"> <script src="../../../../JS/jquery.js" type="text/javascript"></script> <script src="../../../../JS/jquery.cookie.js" type="text/javascript"></script> </head> <body> <map name="ima"> <area shape="rect" coords="10,20,82,156" onmouseover="POP('ここに表示さ せる文章がはいってます')" onmouseout="return NNN()"> <area shape="rect" coords="10,30,100,200" onmouseover="POP('いいいいいい いいいいいいいい')" onmouseout="return NNN()"> </map> </body> </html> 上記のような個別ページが1000ページくらいあります。 ある場所を「onmouseover」したら、POPという関数で説明文が表示される動きを しています。 POPという関数は、 インデックスページに【表示方法１ボタン】【表示方法２ボタン】があり、 押したボタンによって個別ページの表示方法を変更させるために関数を振り分けている。 （インデックスページでフラグをたてる処理をしている。） ｆunction POP(obj){ var text =$.cookie('flag'); //表示方法１ if ( text == "n"){ over(obj); } //表示方法２ else if( text == "ｋ"){ top(obj); } else { return false; } } というような動きをしていますが、 今回 「//表示方法２」の時に、イベントハンドラを 「onmouseover」から「onClick」に変更したい。 POP関数部分はそのままにしたい。 ↓ POP('ここに説明文がはいってます') 引数は文章が入っているのでJSに移動したくない。 イメージはこんな感じです。 個別ページを読み込んだとき $(document).ready(function(){ 【表示方法２ボタン】のフラグだったら area の onmouseover を onClick に変更 }); なにか簡単な置換方法はありませんでしょうか？ replaceで置換できませんでした。（string部分じゃないから？） document.body.innerHTML=document.body.innerHTML.replace(onmouseover,onclick); 何かご存じの方がいらっしゃいましたら、教えて頂けないでしょうか。 よろしくお願い致します。
- megane5050
- お礼率85% (30/35)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
やろうとなさっていることがうまく動作しない直接の原因は文字列にしていないから。 onmouseover → "onmouseover" onclick → "onclick" では？ ただし、全ての文字列 "onmouseover" に対して置き換えが起こるので注意が必要。（意味を解釈しないで置き換えられます） そういった意味からも、ANo2様の方法のほうが良さそう。 さらには、 ＞・文章内容を定期的に変更するページなので、 ＞2つページを作成すると、 ＞どちらも書き換えが必要な為、 「文章内容を変更すること」＝「構成が変わること」になるのでしょうから、スクリプトだけ別の修正の仕方を考える方が、実は不自然に感じられます。 どのような処理の可能性が存在するのかよくわかりませんが、いくつかのパターンに分けられるのであれば、例えばclass設定を変えればそれに応じた処理がされるようなスクリプトにしておけば、いちいちスクリプトの処理を置換えたりすることなく、文章の変更作業を行なうだけで終わりにできるかと思います。 イベントの種類ごと変えたいなどであるのならば、ドキュメントレベルでmouseover/out、clickなどを監視するようにしておけばよろしいかと。
その他の回答 (3)
- teketon
- ベストアンサー率65% (141/215)
なぜ動的に修正するのか？ページ数が多いからなどではなく、他の明示的な理由がないのでしたら、 元のHTMLをエディタ等の置換機能で修正するべきだと思います。
お礼
ありがとうございました。 解決できました。
補足
回答ありがとうございます。 わかりにくくて申し訳ありません。 ■動的に表示させる理由について ・文章内容を定期的に変更するページなので、 2つページを作成すると、 どちらも書き換えが必要な為、 １つのhtmlで作成できないか？との事です。 個別ページA_表示方法１のhtml 個別ページA_表示方法２のhtml という風に、 ２ページにしたくないということです。 ■今までの経緯 １.もともと onmouseoverした時に、overという関数で表示させるというように、個別ページが作成されていました。（表示方法１） 2.トップページにボタンを作成し、表示方法（表示方法２）を追加したいという要求がありました。 （表示方法２）は、onmouseoverした時にtopという関数で表示するものでした。 ３．トップページのボタンにフラグを作成し、POPという関数で動作を振り分けた。 ４．（表示方法２）を、onmouseoverからonClick、に変更して欲しいという要求があった。←イマココ よろしくお願いいたします。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
http://okwave.jp/qa/q7827495.html この辺の回答を参考にしてみてください。（ということがしたいってことで、いいですかね？） onmouseover、onmouseoutにnullを代入すれば、それらのイベントは実行されなくなります。
お礼
ありがとうございました。 解決できました。
補足
回答ありがとうございます！ 参考にさせていただきます。 「 onmouseover="POP('ここに表示さ せる文章がはいってます')"」を退避させておいて、 detachEventでイベントを消して attachEventでイベント追加の様な感じで試してみようと思います。
質問が理解できない。ストリングだから置換できないと思っている理由もよくわからない。何のエディターでどのコマンドを使ってリプレースしたの？
お礼
ありがとうございました。 解決できました。
補足
回答ありがとうございます。 わかりにくくて申し訳ありません。 ■やりたいこと htmlのソースを動的に置換したい タグの中のonmouseoverをonclickに動的に置換したい が適切だったかもしれません。 エディター上の置換機能の質問ではありませんでした。 安直に置換→replaceだ！と思ってhtml読み込んだ時に body内を書き換えるという動作させてみようと思いました。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>sanmple</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS"> <link rel="stylesheet" type="text/css" href="../../../css/left.css"> <script src="../../../../JS/jquery.js" type="text/javascript"></script> <script src="../../../../JS/jquery.cookie.js" type="text/javascript"></script> $(document).ready(function(){ alert(document.body.innerHTML); document.body.innerHTML=document.body.innerHTML.replace(onmouseover,onclick); alert(document.body.innerHTML); }); </head> <body> <map name="ima"> <area shape="rect" coords="10,20,82,156" onmouseover="POP('ここに表示さ せる文章がはいってます')" onmouseout="return NNN()"> <area shape="rect" coords="10,30,100,200" onmouseover="POP('いいいいいい いいいいいいいい')" onmouseout="return NNN()"> </map> </body> </html> onmouseoverがonclickに置換されなかったので、 ためしに $(document).ready(function(){ alert(document.body.innerHTML); document.body.innerHTML=document.body.innerHTML.replace("文章","ぶんしょう"); }); と書くと置換されたので、onmouseoverはタグの中だから置換できないのかな？イベント属性はstringじゃないのかな？stringでないとreplace置換できないのかな？というような疑問を持ちました。 よろしくお願いいたします。
関連するQ&A
- PHPでJavascriptの引数の扱い方
はじめまして。宜しくお願い致します。 環境：Linux(Redhat 9), apache2, PHP4.3.6 [やりたいこと] 下記↓ソース内容↓より、input=button と input=text が幾つかある。 個々のボタンが押されたら、PHPにて"個々"の内部処理を行う。 内部処理終了後は、個々のテキストにインクリメントした値が画面表示される。 HTML＋Javascript にて、カウンター部分は一応完成しています。 ↓ソース内容↓ <html> <head> <script language="JavaScript"> <!-- function ccc(obj0) { cnt = obj0.value; cnt++; obj0.value = cnt; } // --> </script> </head> <body> <form name="ose"> <input type="text" name="view0" readonly size=5 maxlength=3> <input type="button" value="押せ0" onClick="ccc(view0)"><br> <input type="text" name="view1" readonly size=5 maxlength=3> <input type="button" value="押せ1" onClick="ccc(view1)"> </form> </body> </html> コレをPHPに書き換えると、上手くいきません。 ↓PHPに書き換えた場合↓ <script type="text/javascript"> <!-- function ccc($obj0) { cnt = $obj0.value; cnt++; $obj0.value = cnt; } // --> </script> 引数に付いている "$"マークをJavascript側で認識しないのだろう、と考えています。 出来れば、PHPで単体の関数として使用したい為、模索中です。 ※現在は、別の関数の中に上記の『↓HTML＋Javascriptの場合↓』を無理矢理入れて使用しています。(別の関数：HTMLをPHPファイルに書き込む) 別の関数内に入れてても問題は無しです。 但、上記のJavascriptを使用しないソース達にも書き込んでしまうので、ちょとやだなーと。 いい方法があったら教えて下さい。
- ベストアンサー
- PHP
- 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の関数が読込みが 終了していなければならないのはわかるのですが、 なぜ、ボタンの表示より、後に記述することで解決できるのか 解説していただけると助かります。 よろしくお願いします。
- 締切済み
- JavaScript
- JAVASCRIPTで背景を切り替える方法
以下の２つのjsファイルをボタンで切り替えれるようにするにはどういうソースで可能でしょうか？ <SCRIPT type="text/javascript" src="http://www9.ocn.ne.jp/~aki2nd/dhtml/sample/heartdrop.js"></SCRIPT> <SCRIPT type="text/javascript" src="http://www9.ocn.ne.jp/~aki2nd/dhtml/sample/stardrop.js"></SCRIPT> ２つとも動く背景のjsファイルです。 bodyに置けば作動しますので、ボタンを押して２つを切り替えれるようにしたいのですがどうしても方法がわかりません。 どなたかご教授いただけないでしょうか？ よろしくお願いします。
- 締切済み
- JavaScript
- IEだけで動きません。Javascriptに関する質問です。
IEだけで動きません。Javascriptに関する質問です。 初心者です。よろしくお願いします。 下記のページを作りました。 menuをクリックすると、ページが現れるようにしています。aaa.jsで制御しています。 ページの高さがそれぞれ違うので、bbb.jsで高さを取得しています。 IEでは、bbb.jsのwindow.parent.document.getElementById('obj')で「オブジェクトがありません」とエラーが出て、動きません。 他のブラウザでは動きました。 どうしてでしょう？ 悩んでいます。 どなたか教えてください。よろしくお願いいたします。 <html> <head> <link rel="stylesheet" type="text/css" href="main.css" media="screen,print" /> <script type="text/javascript" src="aaa.js"></script> </head> <body> <div id="container"> </div> <div id="menu"> <ul> <li><a href="javascript:changeObj('a.htm')" title="a">a</a></li> <li><a href="javascript:changeObj('b.htm')" title="b">b</a></li> <li><a href="javascript:changeObj('c.htm')" title="c">c</a></li> </ul> </div> </body> </html> ***aaa.js*** /* オブジェクトの変更 */ function changeObj(html){ var contents = '<object id="obj" data="' + html + '" type="text/html"><\/object>'; window.document.getElementById('container').innerHTML = contents; } ***main.css*** /* obj */ #obj{ visibility:hidden; position:absolute; right:5%; min-width:560px; background-color:#CCFFFF; z-index:1; border-style:none; overflow:visible; } ***a.htm*** <html> <head> <script type="text/javascript" src="bbb.js"></script> </head> <body> <div id="page-height"> <div id="a"><!--ここにページ内容--> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
- javascriptをＣＳＳに書き込むと動作しません。何故ですか？
下記のjavascriptをＣＳＳに書き込みました。拡張子は.jsとしました。 jsのフォルダにtopmuv.jsというファイル名にしました。 <script type="text/javascript"> <!-- function blink() { if (!document.all) { return; } for (i = 0; i < document.all.length; i++) { obj = document.all(i); if (obj.className == "blink") { if (obj.style.visibility == "visible") { obj.style.visibility = "hidden"; } else { obj.style.visibility = "visible"; } } } setTimeout("blink()", 500); } // --> </script> </head> <body onload="blink()"> htmlの読み込みは <LINK rel="stylesheet" href="js/topmuv.js" type="text/javascript"> と書いています。 この場合、上記javascriptのソースをシート上にダイレクトに書き込むと正常に動作しますがｃｓｓにすると動作しません。 何が悪いのでしょうか？ 詳しい方宜しくお願いします。
- 締切済み
- その他([技術者向] コンピューター)
- javascript関数呼び出し時の()について
javascript関数呼び出し時に、 a関数があるとき、 a()をつけることで ・戻り値を代入するという意味になるということ ・関数自体を代入していますので、a関数を実行した戻り値を代入する ということを教えて頂きました。 また、()がないとき、aとした場合、 ・関数の登録だけがされる ということを教えて頂きました。 (http://okwave.jp/qa/q7383010.html) しかし、以下ソースの場合、onclickには、 関数名pushを[onclick="push"]ではなく、[onclick="push()"]と記述しないと 正しく動作しませんでした。 私的には、 onclickには、「push関数を登録してクリックされたときにだけ動作させる = push だけでいいのではないのか？」 と考え、[onclick="push"][onclick="push()"]の二つのボタンを用意したのですが、 push()ボタン しか 正常に動作しませんでした。 なぜなのでしょうか？ ()なしの、関数の登録だけがされる という内容を私は間違って捉えてしまっているのでしょうか。 ご教授お願いします。 以下ソース <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> <!-- function push(){ alert('ボタンが押されました'); } --> </script> <title>簡単実験</title> </head> <body> <h1>関数実験</h1> <hr> <input type="button" value="()ありボタン" onclick="push()"> <input type="button" value="()なしボタン" onclick="push"> </body> </html>
- ベストアンサー
- JavaScript
- javascriptの中でjavascriptを呼びだしたいのです。
javascriptで質問です。 javascriptの中でjavascriptを呼びだしたいのです。 実際にやるとエラーになりますが、方法はありますでしょうか。 xが１のとき、script1.js xが２のとき、script2.js のように実行を分けたいので、このような処理を したいのですが。 何卒よろしくお願いいたします。 <script type="text/javascript"> <script type='text/javascript' src='http://www.domain.com/script1.js'></script>"; </script>
- ベストアンサー
- JavaScript
- Javascriptについて
ページA ページB があって ページＡにiframeでページＢを埋め込んだり、ページＢ単体で表示したい場合、 それぞれで使用したいJavaScriptはそれぞれで読み込んでも良いですか？ 同一のJavaScriptそれぞれのページで読み込む。 <script type="text/javascript" src="xxx.js"></script>
- ベストアンサー
- JavaScript
- JavaScript内にJavaScriptを読み込む方法
HTML内に <script type="text/javascript" src="main.js"></script> という一行を追加すると、バナーが表示されるというスクリプトを作成しています。 main.jsは、 html = '<script language="JavaScript">'; html += 'var url0101 = "url01.xxx.jp";'; html += 'var url02 = "url02.oooo.jp";'; html += '</script>'; html += '<script language="JavaScript" src="http://xxx.xxxx.xxx/test.js"></script>'); html += '<script language="JavaScript">'; html += 'Function01("check")'; html += '</script>'; document.write(html); というような風になっており、 (1) 変数の宣言 ↓ (2) http://xxx.xxxx.xxx/test.jsの読み込み ↓ (3) (2)で読み込んだjs内の関数Function01を実行 という流れです。 FireFoxでは表示されましたが、IE6では (2)のjsを読み込む前に(3)のFunction01が実行され、 「オブジェクトを指定してください」のエラーが表示されてしまいます。 よい方法がありましたら教えていただけますでしょうか？ よろしくお願いします。
- 締切済み
- JavaScript
- JavaScript内にJavaScriptを読み込む方法
HTML内に <script type=\"text/javascript\" src=\"main.js\"></script> という一行を追加すると、バナーが表示されるというスクリプトを作成しています。 main.jsは、 html = \'<script language=\"JavaScript\">\'; html += \'var url0101 = \"url01.xxx.jp\";\'; html += \'var url02 = \"url02.oooo.jp\";\'; html += \'</script>\'; html += \'<script language=\"JavaScript\" src=\"http://xxx.xxxx.xxx/test.js\"></script>\'); html += \'<script language=\"JavaScript\">\'; html += \'Function01(\"check\")\'; html += \'</script>\'; document.write(html); というような風になっており、 (1) 変数の宣言 ↓ (2) http://xxx.xxxx.xxx/test.jsの読み込み ↓ (3) (2)で読み込んだjs内の関数Function01を実行 という流れです。 FireFoxでは表示されましたが、IE6では (2)のjsを読み込む前に(3)のFunction01が実行され、 「オブジェクトを指定してください」のエラーが表示されてしまいます。 よい方法がありましたら教えていただけますでしょうか？ よろしくお願いします。
- 締切済み
- JavaScript
お礼
回答ありがとうございました。 解決できました。