[Laravel 6.x]Route::get()で設定したURLパラメーターの取得
Laravel6.xでRoute::get('/path/to/{id}')で設定したidの取得方法について。
HOME>WEBプログラム覚書>出来ると思ったけど出来なかったJavascriptコード
出来ると思ったけど出来なかったJavascriptコード
「innerText」はFirefoxで利用できないようなので、try～catchで分岐させようと思ったけどダメだった。
Javascriptエラーテスト
サンプルコード
Javascript
- onload = function()
- {
- // エラーにならない
- try {
- var t = document.getElementById("SampleText").childNodes[0].innerText;
- }
- catch(e) {
- var t = document.getElementById("SampleText").childNodes[1].textContent;
- }
- var bt1 = document.getElementById("Alert1");
- bt1.onclick = function() {
- alert(t);
- }
- // エラーになる
- try {
- var t2 = document.getElementById("DummySampleText").childNodes[0].innerText;
- }
- catch(e) {
- /* IEがここで死ぬんで回避
- var t2 = document.getElementById("SampleText").childNodes[1].textContent;
- */
- var t2 = "Javascriptテスト";
- }
- var bt2 = document.getElementById("Alert2");
- bt2.onclick = function() {
- alert(t2);
- }
- // エラーにならない
- try {
- var t3 = document.getElementById("DummySampleText");
- }
- catch(e) {
- var t3 = document.getElementById("SampleText").childNodes[1].textContent;
- }
- var bt3 = document.getElementById("Alert3");
- bt3.onclick = function() {
- alert(t3);
- }
- }
HTML
- <div id="SampleText">
- <p>Javascript のテスト</p>
- </div>
- <input type="button" value="ボタン1" id="Alert" />
- <input type="button" value="ボタン2" id="Alert2" />
- <input type="button" value="ボタン3" id="Alert3" />
実行結果
Javascript のテスト
- オブジェクトの存在しないプロパティ(?)の参照はエラーとならない。
- 存在しないオブジェクトの参照はエラー。
- オブジェクトの取得失敗はエラーとならない。
ブラウザ判定による分岐
結局try～catchでは分岐できないので、何がしかの分岐処理を実装する必要がある。
Javascript
- if (t == "undefined") {
- var t = document.getElementById("SampleText").childNodes[1].textContent;
- }
一番簡単だけど、いまいち汎用性に乏しいのでいいブラウザ判定ないかと見てみたら jQueryのブラウザ判定がすっきりしてていい感じだったので採用。
jQueryのブラウザ判定部分を利用したサンプル
Javascript
- onload = function()
- {
- // jQuery ブラウザ判定部分を拝借
- var userAgent = navigator.userAgent.toLowerCase();
- var browser = {
- version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [])[1],
- safari: /webkit/.test( userAgent ),
- opera: /opera/.test( userAgent ),
- msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
- mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
- };
- if (browser.msie) {
- var t4 = document.getElementById("SampleText").childNodes[0].innerText;
- } else {
- var t4 = document.getElementById("SampleText").childNodes[1].textContent;
- }
- var bt4 = document.getElementById("Alert4");
- bt4.onclick = function() {
- alert(t4);
- }
- }
実行結果
勉強のためライブラリを利用しないようにしてたけど、 やっぱり便利だすどす。ってことで今さらながらjQuery使っていきますかねー。
| 投稿日 | 2008年6月27日 20:22 |
|---|---|
| カテゴリ | JavaScript |
| タグ | jQuery | エラーコード |
| トラックバック URL | http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1129 |
はりー
2010年2月 3日 19:36 | 返信
自分はブックマークレットしか作れませんが、IEとFirefox両対応にするため研究してました。
最初は単にundefined（＝void 0）の検出で済ませました。
Javascript:var S,X=document.body;if((S=X.innerText)===void 0){S=X.textContent;}alert(S);
しかし、毎回エラーもどきを出して調べる手法が気になったので、in演算子を使いました。
Javascript:var S,X=document.body,F='innerText'in X;S=F?X.innerText:X.textContent;alert(S);
当初はブラウザ判別も考えましたが、どこかに「ブラウザ判別に頼るとバージョン違い等でハマるから、個々の使いたい機能の有無を判定し分岐させよ」ということが書かれていて、なるほどと思いました。