技術をかじる猫

適当に気になった技術や言語、思ったこと考えた事など。

クリックをハイジャックする。

jQuery 勉強

ほげっと書いといて

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <script type="text/javascript" src="./javascript/jquery.js"></script>
    <script type="text/javascript" src="./javascript/android.js"></script>
    <title>index</title>
</head> 
<body>
    <div id="header"><h1>Sample simple</h1></div>
    <div id="container"></div>
</body> 
</html>

こんなコードを書く。

$(document).ready(
    function(){
        loadPage();
    }
);

function loadPage(url) {
    if (url == undefined) {
        $('#container').load('index.html #header ul', hijackLinks);
    } else {
        $('#container').load(url + ' #content', hijackLinks);
    }
}

function hijackLinks(text, status) {
    $('#container a').click(function(e){
        e.preventDefault();
        loadPage(e.target.href);
    });
}
  • 読み込み完了直後に ready から処理開始。
  • loadPage を引数なし(undefined)で実行して、index.html の id="header" 拾ってきて読み込む。
  • 読み込み完了時点で hijackLinks が実行。
  • container 内の a タグクリックイベントをハンドルする関数を登録。
  • リンククリック時点で preventDefault でクリックイベントを強制停止、loadPage でコンテンツを読み込む。

で、リンククリックを乗っ取る。