ベストアンサー

各ページごとにjsで表示内容を変更したい

2008/04/20 14:53

ページごとにディレクトリ名を判別して表示内容を変更するスクリプトを書きたいのですが、現状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）
専門家の回答

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

ベストアンサー

OKbokuzyo
ベストアンサー率43% (130/296)

2008/04/21 21:54 回答No.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に書くのが一般的です。

質問者

お礼 2008/04/23 02:22

解説いただきありがとうございます。問題解決の参考になりました。スクリプトを読み込む順番がおかしかったようです。

その他の回答 (3)

auty
ベストアンサー率58% (284/486)

2008/04/20 18:47 回答No.3

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

質問者

お礼 2008/04/23 01:54

ご指摘ありがとうございます。お礼が遅くなり申し訳ありません。 trueになることがなかったので、該当箇所の間違いを見落としていました。

auty
ベストアンサー率58% (284/486)

2008/04/20 16:00 回答No.2

[追記] ・　もう一つ気になることがありました。　　dirsは、配列ですね。　　？？？　if(dirs == 'hoge')

質問者

お礼 2008/04/20 16:50

質問の意図が明確でなくて申し訳ありません。 if(d.length ==1){dirs = d;} else{dirs = d[0];} var target = "上記の内容"; $("#list").html(target);//jqueryをつかっていました。これで、ie6,7だとレンダリングされないことが多く、getElementByIdで得たノードがnullになっていることがわかったので、どうしたらよいでしょうかというのが質問内容です。

質問者

補足 2008/04/20 16:29

すみません。 rootから1階層下を前提にしているので dirs = d[0]; です。ご指摘ありがとうございます。

auty
ベストアンサー率58% (284/486)

2008/04/20 15:56 回答No.1

・　innerHTMLの書き方が間違っているようです。 document.getElementById('listWrap').lastChild.innerHTML = target; または document.getElementById('list').innerHTML = target;

質問者

お礼 2008/04/20 16:22

早速ご回答いただきありがとうございます。記述ミスでした。ご指摘ありがとうございます。上記箇所のdocument.getElementById('list')で、ieの場合nullが返されることが多いため、こまっています。 DOMツリーの読み込みが完了していればnullにならないと思っていたのですが。。。

関連するQ&A

onmouseoverの表示切り替えが上手くいかない
onmouseoverを使って、隠していた＜DIV＞を表示させたいと思っています。＜li＞にマウスが重なったら、その直前に表示させていた＜DIV＞を隠した上で、idに対応する＜DIV＞を表示させ、さらに＜H2＞に重なった場合にも隠す、という流れの処理を考えています。 firefoxのエラーコンソールでは「descriptionw0 is not defined」となって、動作しません。IEでもエラーになります。どこかでミスをしてはずなのですが、どうやっても上手くできないので、知恵を貸していただけないでしょうか。よろしくお願いします。 -------------------------- javascript --------------------------- <script language="javascript">  </script> ---------------------------- HTML部分 ---------------------------- <div class="part"> <h2 class="title" onMouseover="mOut()">＊＊＊</h2> <ul class="article"> <li onMouseover="mOver(descriptionw0)"><a href="#">ＡＡＡ</a></li> <li onMouseover="mOver(descriptionw1)"><a href="#">ＢＢＢ</a></li> </ul> <div class="description" id="descriptionw0" style="display:none;">ａａａ</div> <div class="description" id="descriptionw1" style="display:none;">ｂｂｂ</div> </div>
- ベストアンサー
- JavaScript
スクリプトで<div id="links">
下記スクリプトで<div id="links"></div>のところを開いた瞬間 <ul> <li><a href="http://foo.com/">foo</a></li> <li><a href="http://bar.com/">bar</a></li> </ul> に変換したいのですがうまくいきませんどこをどのように変更すれば変換されるのでしょうか【スクリプト】 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript"> var URL = new Array("http://foo.com/","http://bar.co.jp/"); var TITLE = new Array("foo","bar"); // 表示用コンテナ var container = document.getElementById('links'); // リセット container.innerHTML=''; var ul=document.createElement('ul'); container.appendChild(ul); for(var i=0;i<URL.length;i++){ var li=document.createElement('li'); var a=document.createElement('a'); // 'href'属性の設定 a.setAttribute('href',URL[i]); // ラベル a.appendChild(document.createTextNode(TITLE[i])); li.appendChild(a); ul.appendChild(li); } </script> </head> <body> <div id="links"></div> </body> </html>
- 締切済み
- AJAX
クリックすると内容が展開されるリスト
親項目をクリックすると、隠れていた子項目が表示され、再び親項目をクリックすると、子項目が隠れる。といったページを作成するため（http://www.openspc2.org/reibun/javascript/mouse/060/index.html）より、サンプルをいただきました。これを、さらに・「ダブルクリックではなく、シングルクリックで開閉」・「１つだけ展開し後はたたむのではなく、展開したものは閉じる操作をするまで展開している」というように変換したいと思っています。（JavaScript等、かなりの初心者です。できるだけ単純かつ分りやすい方法で作成したいと考えております。）お知恵を貸してください。自分の要望に近いサンプルコードを探しましたが、コードが複雑で理解できず、皆さんへご質問している次第です。＝＝＝＝＝＝＝＝＝＝＝＝＝（以下、コード）＝＝＝＝＝＝＝＝＝＝＝＝＝ <html> <head> <title>ページの名前</title> <script> window.onload=function(){ setNavi(); hideNavi(); } function setNavi(){ var tags=document.getElementById("navi").getElementsByTagName("a"); for(var i=0;i<tags.length;i++){ if(tags[i].href.match(/#$/)) tags[i].onclick=disp; } } function hideNavi(){ var n=document.getElementById("navi").firstChild; while(n){ if(n.nodeName=="LI") n.className="hide"; n=n.nextSibling; } } function disp() { var pp=this.parentNode.parentNode; var flg=pp.className=="hide"; hideNavi(); pp.className=flg?"":"hide"; return false; } </script> <style> #navi,#navi ul{ margin:0px; padding:0px; list-style:none; } #navi li.hide ul{ display:none; } </style> </head> <body> <ul id="navi"> <li> <div><a href="#">☆★☆スパゲッティー☆★☆</a></div> <ul> <li><a href="http://～">・カルボナーラ</a></li> <li><a href="http://～">・ペスカトーレ</a></li> <li><a href="http://～">・ペペロンチーノ</a></li> </ul> </li> <li> <div><a href="#">☆★☆どんぶり☆★☆</</a></div> <ul> <li><a href="http://～">・親子丼</a></li> <li><a href="http://～">・カツ丼</a></li> <li><a href="http://～">・天丼</a></li> </ul> </li> <li> <div><a href="#">☆★☆ファーストフード☆★☆</div> <ul> <li><a href="http://～">・ハンバーガー</a></li> <li><a href="http://～">・ホットドッグ</a></li> <li><a href="http://～">・フライドポテト</a></li> </ul> </li> </ul> </body> </html> ===============＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝よろしくお願いいたします。
- ベストアンサー
- JavaScript
カテゴリページ内　複数タブ
wordpressでサイト作っています idの番号を変えることで１ページ内に#numの連番で複数タブを置ける様にはしたのですが、 while文のなかで番号に連番を振るやり方がわかりません。初心者ですいませんが、よろしくお願いします <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/ … <script type="text/javascript"> $.hoge = function( target ) { //Default Action target.find(".tab_content").hide(); //Hide all content target.find("ul.tabs li:first").addClass("active").show(); //Activate first tab target.find(".tab_content:first").show(); //Show first tab content //On Click Event target.find("ul.tabs li").click(function() { target.find("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab target.find(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content activeTab = activeTab.replace( '#', '.' ); target.find(activeTab).fadeIn(); //Fade in the active content return false; }); }// $.hoge // -------------------------------------- $(function() { $.hoge( $('#num1') ); $.hoge( $('#num2') ); }); </script> </head> <body> <div id="num1" class="container"> <ul class="tabs"> <li><a href="#tab1">Gallery</a></li> <li><a href="#tab2">Submit</a></li> </ul> <div class="tab_container"> <div class="tab1 tab_content"> <h2>Gallery</h2> </div> <div class="tab2 tab_content"> <h2>Submit</h2> </div> </div> </div> <div id="num2" class="container"> <ul class="tabs"> <li><a href="#tab1">Gallery</a></li> <li><a href="#tab2">Submit</a></li> </ul> <div class="tab_container"> <div class="tab1 tab_content"> <h2>Gallery</h2> </div> <div class="tab2 tab_content"> <h2>Submit</h2> </div> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
別ページのインラインフレームに表示させる方法
別ページのインラインフレームに表示させる方法こんにちは。いつもお世話になっております。数日前に自閉式ツリーについて質問させていただきました。ありがとうございました。 http://okwave.jp/qa/q5526156.html --------------------------------------------------------------- <script type="text/javascript"> </script> <style type="text/css"> </style> <p><a href="javascript:tree2('tree','menu1');" title="展開">展開</a></p> <div class="tree" id="menu1"> <ul> <li><a href="a.html" title="あ" target="frame">あ</a></li> <li><a href="aa.html" title="ああ" target="frame">ああ</a></li> </ul> </div> --------------------------------------------------------------- 【参考ページ】http://amenti.usamimi.info/treemenu2.html というふうに作っているのですが、たとえばAページの上記ツリーをクリックした際に内容がBﾍﾟｰｼﾞのインラインフレームframeに表示され、かつツリーが展開しているというような動作は可能でしょうか。いろいろと高望みをしているとは思いますが、できればお力をお貸しください。よろしくお願いします。
- ベストアンサー
- JavaScript
jQueryでデータを受け渡しで動作が・・・。
jQueryでデータを受け渡しで動作がどうしてもうまくいきません。 <li>タグにjsonデータを呼び出して表示しています。それで別の処理のデータを加えるとどうしても最大６行表示の方が機能しなくなってしまいどうしたらうごくのでしょうか？普通においただけではダメなのでしょうか？ <script type="text/javascript"> jQuery(function(){ $.getJSON("./json_sql.php",function(data){ $.each(data,function(i,items){ $("<li/>",{ text : items.category+'　'+ items.date+'　'+items.content, 'class' : items.category, }).appendTo('ul','#portfolio'); }); }); }); $(document).ready(function() { var max = 6 /* 最大表示数 */ var mx = ':lt(' + max + ')', pf = $('#portfolio li'); pf.filter(':not(' + mx + ')').hide(); $('#navi a').click(function(){ var filterVal = '.' + $(this).text().toLowerCase().replace(' ', '-'); if(filterVal=='.all') filterVal = '*'; pf.filter(':visible').fadeOut('fast', function(){ pf.filter(filterVal + mx).fadeIn('slow'); }); }); }); </script> <div id="main"> <ul id="navi" class="tab"> <li class="all"><a href="#" onclick="document.getElementById('samplebox').style.backgroundColor = '#e2260d';">ALL</a></li> <li class="topix"><a href="#" onclick="document.getElementById('samplebox').style.backgroundColor = '#0f639f';">topix</a></li> <li class="cleaning"><a href="#" onclick="document.getElementById('samplebox').style.backgroundColor = '#0e99b0';">cleaning</a></li> <li class="insurance"><a href="#" onclick="document.getElementById('samplebox').style.backgroundColor = '#0ea653';">insurance</a></li> </ul> <div id="samplebox"></div> <div class="content"> <ul id="portfolio"></ul> </div>  </div>
- 締切済み
- JavaScript
指定位置に要素を追加する
<script type="text/javascript"> function test(){ var hako2 = document.createElement('div'); hako1.innerHTML = "TEST2"; var lk2 = document.getElementById('link2'); var li2 = lk2.parentNode; li2.appendChild(hako2); } </script> </head> <body> <div><a href="1" id="link1">1</a></div> <div><a href="2" id="link2">2</a></div> <div><a href="3" id="link3">3</a></div> <input type="button" onclick="test()" value="test"> </body> みたいなイメージなのですが、いかんせんスマートじゃありませんできれば<div>で<a>を囲うのをやめたいのです。ターゲットになる<a>の位置は固定ではなく前後に他の要素が入ることもあります <a href="2" id="link2">2</a>の次に<div>TEST2</div>を生成できればどんなのでも？いいのですが、何かいいやり方ありませんか？
- ベストアンサー
- JavaScript
パララックスページスクロールについて
こんにちは。下記のコードはJQUERYコードをコピペしたもので、ド素人です。ナビをクリックすると、各コンテンツBOXにいきますが、下のコードだとTOPの一番上まで来てしまいます、クリック→ページトップから下へ85pxのところに来るように設定したいのですが。＝＝＝＝＝＝＝＝javascript＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <script> //スムーススクロール　各コンテンツbox// $(function() { $(".scroll").click(function(event){ event.preventDefault(); var url = this.href; var parts = url.split("#"); var target = parts[1]; var target_offset = $("#"+target).offset(); var target_top = target_offset.top; $('html, body').animate({scrollTop:target_top}, 1200); }); }); </script> ==＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝HTML=====＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <nav> <ul id="dropmenu"> <li><a href="#top" class="scroll">Top</a></li> <li><a href="#introduce" class="scroll">薬膳レシピとは</a></li> <li><a href="#basictypecheck" class="scroll">基本体質のチェック</a></li> <li><a href="#typedescription" class="scroll">気・血・水について</a></li> <li><a href="#mix" class="scroll">混合タイプの特徴</a></li> <li><a href="#notfeelingcheck" class="scroll">不調の原因チェック</a> <li><a href="#Profile" class="scroll">Profile</a></li> <li><a href="#Lesson" class="scroll">Lesson</a></li> </ul> </nav> ==＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝=====＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝他にもコードが必要であれば、ご教示いただければ補足します。どうぞ宜しくお願い致します。
- 締切済み
- JavaScript
ツリーメニューで子のページのとき親が開く
他のプログラムと連携しています現時点ではクリックすれば親が開き子の部分が出てくるようにしています。子のページのＵＲＬを見たときにツリーのその親は自動的に開きたいのです。 show('1');のこの”１”は他のプログラムから出力しているものです。子のものも同じように値を出力できるのですが JavaScriptでどのように書けば親が開くのかよくわかりません＾＾；。よろしくお願いします。 //javascript// function show(inputData) { var objID=document.getElementById( "obj_" + inputData ); var buttonID=document.getElementById( "button_" + inputData ); if(objID.className=='close'){ objID.style.display='block'; objID.className='open'; buttonID.src='images/close.gif'; } else{ objID.style.display='none'; objID.className='close'; buttonID.src='images/open.gif'; } } //HTML// <ul> <li><input type="image" src="images/open.gif" id="button_1" onclick="show('1');"> <a href="javascript:show(1)">Ａメニュー</a> </li> <div id="obj_1" style="display:none;position:relative;" class="close"> <ul><li><a href="11.html" >Ａ-1メニュー </a></li> <li><a href="12.html">Ａ-2メニュー </a></li> <li><a href="11.html" >Ａ-3メニュー </a></li> </ul> </div> </ul> <ul> <li><input type="image" src="images/open.gif" id="button_2" onclick="show('2');"> <a href="javascript:show(2)">Ｂメニュー</a> </li> <div id="obj_2" style="display:none;position:relative;" class="close"> <ul><li><a href="21.html">Ｂ-1メニュー </a></li> <li><a href="22.html">Ｂ-2メニュー </a></li> <li><a href="23.html">Ｂ-3メニュー </a></li> </ul> </div> </ul>
- 締切済み
- JavaScript
オブジェクトがありませんのエラー
過去ログを呼んで近いのがあったのでよく読んだのですがよくわかりませんので書き込みします。以下のスクリプトで「オブジェクトがありませんのエラーが発生します。３行目のfor文の「obj.childNodes」でエラーが発生します。「document.getElementById」が「null」であるのが原因のようですが、なぜ「document.getElementById」に値が入らないのかがつかめません。お手数ですがよろしくお願いします【script】 --------------------------------------------- if(document.getElementById && document.all && !navigator.userAgent.match(/Opera/)){ var obj = document.getElementById("mainmenu"); for(var i=0;i<obj.childNodes.length;i++){ if(obj.childNodes[i].className=="pullmenu"){ obj.childNodes[i].onmouseover = function(){pull(this) }; obj.childNodes[i].onmouseout = function(){pull(this) }; } } } --------------------------------------------- 【html】 --------------------------------------------- <ul id="mainmenu"> <li id="Begginer" class="pullmenu"><a href="http://www.○○○.co.jp/b/w.php">○○○</a> <ul> <li><a href="http://www.○○○.co.jp/b/w.php">○○○ </a></li> <li><a href="http://www.○○○.co.jp/b/s.php">○○○ </a></li> <li><a href="http://www.○○○.co.jp/b/m.php">○○○ </a></li> </ul> </li> </ul>
- ベストアンサー
- JavaScript

各ページごとにjsで表示内容を変更したい