人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

以下のjavascriptでlocation.hashを使用せずに
アンカーで選択されているものを中心に表示するには
どうしたらいいでしょうか?

IEだとサーバ上で2回読み込んでしまう為、
ブラウザの戻るを二回押す事を避けたいです。

<script type="text/JavaScript">

<!--

function ajustCenter(){

var ls = location.search;
if (ls.match(/\/test_id\/([\d_]+)/)){
id = RegExp.$1;
} else if (ls.match(/[&|\?]test_id=([\d_]+)/)){
id = RegExp.$1;
}
var lh = location.hash;
if(id != ""){
var aryId = id.split("_");
//アンカが指定されたので真中になるように調整
if(lh != ""){
location.href=location.hash; // scrollTopが上手く取れないので追加
//アンカが指定されたので真中になるように調整
document.body.scrollTop = document.body.scrollTop - (document.body.clientHeight / 2);
}
var tagname = "TD";
for (var i=0; i < document.getElementsByTagName(tagname).length; i++) {
var elem = document.getElementsByTagName(tagname)[i];
for (var j=0; j < aryId.length; j++) {
if(elem.id==aryId[j]){
elem.style.backgroundColor="#D7FDFF";
}
}
}
}
}

//-->

</script>

●質問者: hopefully
●カテゴリ:就職・転職 ウェブ制作
✍キーワード:BODY href IE JavaScript LH
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● llusall
●35ポイント

こちらで、いかがでしょうか?


■1ページ目

<html>

<body>

<a href="0.html?test_id=123_321&scroll_to=a123">次ページ123</a><br><br>

</body>

</html>

■2ページ目

<html>

<body onload="ajustCenter();changeColor();">

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <table>

        <tr><td id=123><a id="a123">1</td><td id=123>2</td></tr>

        <tr><td id=231><a id="a231">3</td><td id=231>4</td></tr>

        <tr><td id=321><a id="a321">5</td><td id=321>6</td></tr>

    </table>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</body>

</html>

<script type="text/JavaScript">

<!--

// セルの色を変える関数

function changeColor(){

    var oSearch = new CLocationSearch(location.search);

    var id = oSearch.item('test_id');

    if(id == "")return;

    var aryId = id.split("_");

    var tagname = "TD";

    for (var i=0; i < document.getElementsByTagName(tagname).length; i++) {

        var elem = document.getElementsByTagName(tagname)[i];

        for (var j=0; j < aryId.length; j++) {

            if(elem.id==aryId[j]){

                elem.style.backgroundColor="#D7FDFF";

            }

        }

    }

}

// センター位置に調整する関数

function ajustCenter(){

    var oSearch = new CLocationSearch(location.search);

    var id = oSearch.item('scroll_to');

    if(id == "")return;

    scrollTo(id);

}

function scrollTo(id) {

    var element = document.getElementById(id);

    var offsets = cumulativeOffset(element);

    document.body.scrollTop = offsets[1] - (document.body.clientHeight / 2);

}

// 参考 prototype.js

//       http://www.imgsrc.co.jp/~kuriyama/prototype/prototype.js.html

function cumulativeOffset(element) {

    var valueT = 0, valueL = 0;

    do {

      valueT += element.offsetTop  || 0;

      valueL += element.offsetLeft || 0;

      element = element.offsetParent;

    } while (element);

    return [valueL, valueT];

}

// 参考 Javascript版 location.search汎用クラス

//       http://frog.raindrop.jp/knowledge/archives/000070.html

function CLocationSearch(sSource) {

    

    /* 初期化処理 */

    var sAry = new Array(); /* アイテム配列を追加 */

    {

        var nCur = 0, nRet = 0;

        var sSearch = sSource.substr(1);

        var sName, sValue;

                

        nRet = sSearch.indexOf('=', nCur)       // 最初の'='を検索

        while(nRet >= 0) {

            // '='以前が変数名

            sName = sSearch.substring(nCur, nRet);

            nCur = nRet + 1;

            

            // 値を取り出す

            nRet = sSearch.indexOf('&', nCur);  // 変数の区切りを検索

            if (nRet == -1) nRet = sSearch.length + 1;      // なければ最後まで

            sValue = sSearch.substring(nCur, nRet);

            

            // 配列に格納

            sAry[sName] = sValue;

            

            // 次を検索

            nCur = nRet + 1;

            nRet = sSearch.indexOf('=', nCur);

        }

    }

    

    /* 値 */

    this.valueOf = function () {

        return sSource;

    }

    

    /* 値を取り出すメソッド */

    this.item = function (sVarname) {

        try {

            return sAry[sVarname];  //あれば返す

        } catch(e) {

            return '';              //なければ空文字を返す

        }

    }

    

    /* 要素数 */

    this.length   = function () {

        return sAry.length;

    }

    

    /* toString */

    this.toString = function () {

        return this.length + '';

    }

    

}

//-->

</script>



その他参考

scriptaculous.js:effects.js 指定エレメントまで移動

frog.raindrop.jp Javascript版 location.search汎用クラス

prototype.js

◎質問者からの返答

すいません、URLからのtest_idの取得になるので

location.searchでは取得できない場合はどうしたら言いのでしょうか?


2 ● llusall
●35ポイント

毎度すみません。

test_id の取得は、質問文の通りに、元に戻してみました。

解決できない場合は、当該ページに渡されるURL(引数を含む)のサンプルを提示ください。


// セルの色を変える関数

function changeColor(){

//  var oSearch = new CLocationSearch(location.search);

//  var id = oSearch.item('test_id');

    var id;

    var ls = location.search;

    if (ls.match(/\/test_id\/([\d_]+)/)){

        id = RegExp.$1;

    } else if (ls.match(/[&|\?]test_id=([\d_]+)/)){

        id = RegExp.$1;

    }

    if(id == "")return;

    var aryId = id.split("_");

    var tagname = "TD";

    for (var i=0; i < document.getElementsByTagName(tagname).length; i++) {

        var elem = document.getElementsByTagName(tagname)[i];

        for (var j=0; j < aryId.length; j++) {

            if(elem.id==aryId[j]){

                elem.style.backgroundColor="#D7FDFF";

            }

        }

    }

}

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ