- ベストアンサー
各ページごとにjsで表示内容を変更したい
ページごとにディレクトリ名を判別して表示内容を変更するスクリプトを書きたいのですが、現状ieでのみ動作が不安定です。yuga.jsに組み込む形で記述しています。 //script------------------------ var filePath = location.href; var a = filePath.split('://'); schema = a[0]; var d = a[1].split('/'); host = d.shift(); var f = d.pop(); var dirs = d; if(dirs == 'hoge'){ var target = '<li><a href="..\/hoge\/index.html">hoge1<\/a><\/li>' + '<li><a href="..\/hoge\/hoge2.html">hoge2<\/a><\/li>' + '<li><a href="..\/hoge\/hoge3.html">hoge3<\/a><\/li>' } document.getElementById('listWrap').lastChild.innerHTML(target); //html----------------------------- <div id="listWrap"> <img src="./images/listTitle.jpg" alt="" width="**" height="**" /> <ul id="list"></ul> </div> 上記スクリプトを外部から読み込んでonloadで実行していますが、ieでは document.getElementById('listWrap')がnullを返すことが多く、表示される場合とされない場合があります。 ご教授よろしくお願いします。
- kim001
- お礼率100% (4/4)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
細かいミスは置いといて、、 >>document.getElementById('listWrap')がnullを返すことが多く Scriptを直接先頭に書き、その後にhtmlを書いていませんか？ 下記例３つの違いは認識していらっしゃるでしょうか？ １． ---↓これは「null」と表示されます <html> <script> alert(document.getElementById("listWrap")); </script> <body> <div id="listWrap"></div> </body> </html> --- ２． ---↓これは「object」と表示されます <html> <body> <div id="listWrap"></div> </body> <script> alert(document.getElementById("listWrap")); </script> </html> --- ３． ---↓これも「object」と表示されます <script> function test(){ alert(document.getElementById("listWrap")); } </script> <html> <body onload="test()"> <div id="listWrap"></div> </body> </html> --- 基本的には、HTML文書は上から順に読み込まれます。 １．の場合、HTMLを上から読んでいくとid="listWrap"のタグは まだ読み込まれていませんので「null」となります。 ２．の場合はHTMLが先に読み込まれるのでid="listWrap"は有効となります。 ３．の場合はbodyタグのonloadイベントで呼んでいます。 onloadイベントはすべて読み込まれた次点で開始となるので これも有効となります。 読み込みの制御はソフトの作りによるので当然ブラウザ毎に異なります。 ページ表示時に何かJavaScriptで処理を行う場合 ３．のfunctionとしてonloadに書くのが一般的です。
その他の回答 (3)
- auty
- ベストアンサー率58% (284/486)
if(d.length ==1){dirs = d;} else{dirs = d[0];} ------------------------------ これもまだ変です。あくまで、 dirs = d; は、配列 dirs = d[0]は、文字列 です。 下記の場合を参考にしてください。 [例] 1. var filePath = 'http://okwave.jp/qa3962294.html'; のとき d[0]==undefined d[1]==undefined 2. var filePath = 'http://okwave.jp/root/qa3962294.html'; のとき d[0]==root d[1]==undefined 3. var filePath = 'http://okwave.jp/root/sub/qa3962294.html'; のとき d[0]==root d[1]==sub
お礼
ご指摘ありがとうございます。 お礼が遅くなり申し訳ありません。 trueになることがなかったので、該当箇所の間違いを見落としていました。
- auty
- ベストアンサー率58% (284/486)
[追記] ・ もう一つ気になることがありました。 dirsは、配列ですね。 ？？？ if(dirs == 'hoge')
お礼
質問の意図が明確でなくて申し訳ありません。 if(d.length ==1){dirs = d;} else{dirs = d[0];} var target = "上記の内容"; $("#list").html(target);//jqueryをつかっていました。 これで、ie6,7だとレンダリングされないことが多く、getElementByIdで得たノードがnullになっていることがわかったので、どうしたらよいでしょうかというのが質問内容です。
補足
すみません。 rootから1階層下を前提にしているので dirs = d[0]; です。ご指摘ありがとうございます。
- auty
- ベストアンサー率58% (284/486)
・ innerHTMLの書き方が間違っているようです。 document.getElementById('listWrap').lastChild.innerHTML = target; または document.getElementById('list').innerHTML = target;
お礼
早速ご回答いただきありがとうございます。 記述ミスでした。ご指摘ありがとうございます。 上記箇所のdocument.getElementById('list')で、ieの場合nullが返されることが多いため、こまっています。 DOMツリーの読み込みが完了していればnullにならないと思っていたのですが。。。
お礼
解説いただきありがとうございます。 問題解決の参考になりました。 スクリプトを読み込む順番がおかしかったようです。