<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="generator" content="Movable Type Publishing Platform 4.01" />
    
    <link rel="stylesheet" href="http://pm.11op.net/styles.css" type="text/css" />

    <link rel="alternate" type="application/atom+xml" title="Atom" href="http://pm.11op.net/atom.xml" />
    <link rel="alternate" type="application/rss+xml" title="RSS" href="http://pm.11op.net/rss.xml" />


    <title>

    ブラウザの戻るボタン対策 多分 safari にも対応版 - pm11op のブログ

    </title>


    
    <link rel="start" href="http://pm.11op.net/" title="Home" />
    



    <link rel="prev" href="http://pm.11op.net/2007/02/web.php" title="ステキwebサービス" />
    <link rel="next" href="http://pm.11op.net/2007/02/innerhtml.php" title="innerHTML は文法にうるさい。" />


    <!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
         xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
         xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
    rdf:about="http://pm.11op.net/2007/02/-safari.php"
    trackback:ping="http://pm.11op.net/mt/mt-tb.cgi/15"
    dc:title="ブラウザの戻るボタン対策 多分 safari にも対応版"
    dc:identifier="http://pm.11op.net/2007/02/-safari.php"
    dc:subject="ajax"
    dc:description="                      もはや当たり前となった javascript とか ajax とか..."
    dc:creator="pm11op"
    dc:date="2007-02-08T02:20:02+09:00" />
</rdf:RDF>
-->

    <script type="text/javascript" src="http://pm.11op.net/mt.js"></script>


    

</head>
<body class="mt-archive-listing mt-entry-archive layout-wt" onload="individualArchivesOnLoad(commenter_name)">
    <div id="container">
        <div id="container-inner">
            <div id="header">
                <div id="header-inner">
                    <div id="header-content">

                        <div id="header-name"><a href="http://pm.11op.net/" accesskey="1">pm11op のブログ</a></div>
                        <div id="header-description"></div>

                    </div>
                </div>
            </div>
            <div id="content">
                <div id="content-inner">
                    <div id="alpha">
                        <div id="alpha-inner">


<div id="entry-16" class="entry-asset asset">
    <div class="asset-header">
        <h1 class="asset-name">ブラウザの戻るボタン対策 多分 safari にも対応版</h1>
        <div class="asset-meta">
    <span class="byline">

        2007&#24180;2&#26376; 8&#26085; 02:20 pm11op

    </span>
    <span class="separator">|</span> <a class="permalink" href="http://pm.11op.net/2007/02/-safari.php">個別ページ</a>
    | <a href="http://pm.11op.net/2007/02/-safari.php#comments">コメント(0)</a>
    | <a href="http://pm.11op.net/2007/02/-safari.php#trackback">トラックバック(0)</a>
</div>

    </div>
    <div class="asset-content">

        <div class="asset-body">
            <p><br />
        <div class="section"><br />
            <p>もはや当たり前となった javascript とか ajax とか使って</p><br />
            <p>ページ遷移しない web アプリの弱点として、</p><br />
            <p>ブラウザの戻るボタンは罠問題があります。</p><br />
            <br></p>

<p>            <p>ブラウザの「戻る」は生理的に染み付いてるものなので、</p><br />
            <p>今さら注意書きで「使っちゃだめよ」とか言っても無駄です。</p><br />
            <br></p>

<p>            <p>また、ページ遷移しない場合、パーマリンクどうするよ。って話にもなりますね。</p><br />
            <br></p>

<p>            <p>という需要で、ajax の戻る対策をしたライブラリはいろいろあるわけですが、</p><br />
            <p>ちょっと思うことあって自分でも作ってみました。</p><br />
            <p>大いに参考にしたのはこちら。</p><br />
            <p><a href="http://blog.mikage.to/mika/2006/08/ajax_f5cb.html" target="_blank">Ajaxと戻るボタン・ブックマーク</a></p><br />
            <br></p>

<p>            <p>こちらがさらに参考にしてたのはこちら。</p><br />
            <p><a href="http://la.ma.la/blog/diary_200502270128.html" target="_blank">location.hashを使ったセッション復元</a></p><br />
            <br></p>

<p>            <p>あと、safari 対応にあたり、<a href="http://www.asual.com/swfaddress/" target="_blank">SWFAddress</a>も参考にしました。</p><br />
            <p>こっちは flash で同様のことを実現してます。</p><br />
            <br></p>

<p>            <p>IE, Firefox については、先の<a href="http://blog.mikage.to/mika/2006/08/ajax_f5cb.html" target="_blank">みかログ</a>さんの言ってる通りやってます。</p><br />
            <p>で、safari に関しては、history.length が肝っぽい。</p><br />
            <br></p>

<p>            <p>SWFAddress のぞいたら、history.length を元に cookie に書き込んだり、</p><br />
            <p>見えない form 作って submit したりうにゃうにゃやってましたが、</p><br />
            <p>hisotry.length をキーとした配列に、location.hash 突っ込んでいったら事足ります。</p><br />
            <br></p>

<p>            <p>で、さらに作り直す上で実現したかったのは、以下</p><br />
            <ul><br />
                <li> callback の登録をもちょっとやりやすく</li><br />
                <li> safari 対応</li><br />
                <li> &以降を get 変数 like に扱う</li><br />
                <li> クロスブラウザ対策に Factory メソッドパターンを使う</li><br />
            </ul><br />
            <p><a href="http://d.hatena.ne.jp/am11op/20070118/1169093029" target="_blank">javascript で factory メソッドを使わない理由</a></p><br />
            <p>このエントリで書いた、クロスブラウザ対策に Factory メソッドパターンを使う有用な例がこれかなーって思いました。</p><br />
            <p>history 周りの挙動はブラウザによって全く異なるので、</p><br />
            <p>ここはハードコーディングでよいのです。多分。</p><br />
            <br></p>

<p>            <p><a href="http://pm11op.xii.jp/pm11op/history/history.html" target="_blank">動作サンプル</a></p><br />
            <br></p>

<p>            <p>万が一使ってみた方おられましたら、フィードバック的なものをいただけると超うれしいです。</p><br />
            <p>あ、YUI依存あります。</p><br />
            <p>extend くらいにしか使ってないので、自分好みのフレームワークに入れ替えたらよいと思います。</p><br />
        </div></p>
        </div>


    </div>
    <div class="asset-footer">
        
                
<div class="entry-categories">
    <h4 class="entry-categories-header">カテゴリ<span class="delimiter">:</span></h4>
    <ul class="entry-categories-list">
        <li class="entry-category"><a href="http://pm.11op.net/ajax/">ajax</a><span class="delimiter">,</span></li> <li class="entry-category"><a href="http://pm.11op.net/javascript/">javascript</a></li>
    </ul>
</div>


        
                

    </div>
</div>



<div id="trackbacks" class="trackbacks">
    <h2 class="trackbacks-header">トラックバック(0)</h2>
    <div class="trackbacks-info">
        <p>このブログ記事を参照しているブログ一覧: <a href="http://pm.11op.net/2007/02/-safari.php">ブラウザの戻るボタン対策 多分 safari にも対応版</a></p>
        <p>このブログ記事に対するトラックバックURL: <span id="trackbacks-link">http://pm.11op.net/mt/mt-tb.cgi/15</span></p>
    </div>
    
</div>




<div id="comments" class="comments">
    
    
    
    
<div class="comments-open" id="comments-open">
    <h2 class="comments-open-header">コメントする</h2>
    <div class="comments-open-content">
    
            <div id="comment-form-external-auth">
                <script type="text/javascript">
                <!--
                
                writeCommenterGreeting(commenter_name, 16, 1, commenter_id, commenter_url);
                //-->
                </script>
            </div>
    
        <form method="post" action="http://pm.11op.net/mt/mt-comments.cgi" name="comments_form" id="comments-form" onsubmit="if (this.bakecookie.checked) rememberMe(this)">
            <input type="hidden" name="static" value="1" />
            <input type="hidden" name="entry_id" value="16" />
            <input type="hidden" name="__lang" value="ja" />
            <div id="comments-open-data">
                <div id="comment-form-name">
                    <label for="comment-author">名前</label>
                    <input id="comment-author" name="author" size="30" value="" />
                </div>
                <div id="comment-form-email">
                    <label for="comment-email">電子メール</label>
                    <input id="comment-email" name="email" size="30" value="" />
                </div>
                <div id="comment-form-url">
                    <label for="comment-url">URL</label>
                    <input id="comment-url" name="url" size="30" value="" />
                </div>
                <div id="comment-form-remember-me">
                    <label for="comment-bake-cookie"><input type="checkbox" id="comment-bake-cookie" name="bakecookie" onclick="if (!this.checked) forgetMe(document.comments_form)" value="1" />
                        ログイン情報を記憶</label>
                </div>
            </div>
            <div id="comments-open-text">
                <label for="comment-text">コメント (スタイル用のHTMLタグを使うことができます)</label>
                <textarea id="comment-text" name="text" rows="15" cols="50"></textarea>
            </div>
            
            
            <div id="comments-open-captcha">
            </div>
            
            <div id="comments-open-footer">
                <input type="submit" accesskey="v" name="preview" id="comment-preview" value="確認" />
                <input type="submit" accesskey="s" name="post" id="comment-submit" value="投稿" />
    
            </div>
        </form>
    </div>
</div>


    
</div>



                        </div>
                    </div>

    
            
                    <div id="beta">
    <div id="beta-inner">
<div class="widget-search widget">
   <h3 class="widget-header">about pm11op</h3>
   <div class="widget-content">
<p>関西で PHP プログラマやってます。
javascript も勉強中。
</p>
<ul>
<li><a href="http://twitter.com/pm11op/"><img alt="twitter / pm11op" src="http://pm.11op.net/img/twitter.gif" width="120" height="20"/></a></li>
<li>pm11op at gmail.com</li>
</ul>
&nbsp;</div>
</div>

<div class="widget-search widget">
   <h3 class="widget-header">検索</h3>
   <div class="widget-content">
      <form method="get" action="http://pm.11op.net/mt/mt-search.cgi">
         <input type="hidden" name="IncludeBlogs" value="1" />
         <label for="search" accesskey="4">ブログを検索</label><br />
         <input id="search" name="search" size="20" />
         <input type="submit" value="検索" />
      </form>
   </div>
</div>
<div class="widget-archives widget">
   <h3 class="widget-header">最近のブログ記事</h3>
   <div class="widget-content">
      <ul class="widget-list">
      
         <li class="widget-list-item"><a href="http://pm.11op.net/2007/12/post-28.php">「いちばん簡単な認証システム」が安全ではない件</a></li>
      
         <li class="widget-list-item"><a href="http://pm.11op.net/2007/12/scriptaculous-sortable-tree-jq.php">scriptaculous の sortable tree の方が jquery plugin の Nested Sortable より速かった</a></li>
      
         <li class="widget-list-item"><a href="http://pm.11op.net/2007/12/-bookmarklet.php">処理の重さを可視化する bookmarklet</a></li>
      
         <li class="widget-list-item"><a href="http://pm.11op.net/2007/12/kanasanjs.php">Kanasan.JS に行って来た</a></li>
      
         <li class="widget-list-item"><a href="http://pm.11op.net/2007/12/cakephp-4.php">CakePHP 勉強会に行ってきた</a></li>
      
         <li class="widget-list-item"><a href="http://pm.11op.net/2007/12/cake-12-prebeta.php">cake_1.2 pre-beta での多言語対応のメモ</a></li>
      
         <li class="widget-list-item"><a href="http://pm.11op.net/2007/12/post-27.php">心に残らない言葉</a></li>
      
         <li class="widget-list-item"><a href="http://pm.11op.net/2007/12/post-26.php">頭に残る言葉</a></li>
      
         <li class="widget-list-item"><a href="http://pm.11op.net/2007/12/tweditor-firebug.php">Tweditor は Firebug が入ってないと動かないんじゃないか疑惑</a></li>
      
         <li class="widget-list-item"><a href="http://pm.11op.net/2007/12/tweditor-1.php">Tweditor 機能追加しました</a></li>
      
      </ul>
   </div>
</div>
<div class="widget-cloud widget">
    <h3 class="widget-header">タグクラウド</h3>
    <div class="widget-content">
        <ul class="widget-list">
            
                <li class="rank-10 widget-list-item">
                    <a href="http://pm.11op.net/mt/mt-search.cgi?tag=API&amp;blog_id=1">API</a>
                </li>
            
                <li class="rank-4 widget-list-item">
                    <a href="http://pm.11op.net/mt/mt-search.cgi?tag=CakePHP&amp;blog_id=1">CakePHP</a>
                </li>
            
                <li class="rank-3 widget-list-item">
                    <a href="http://pm.11op.net/mt/mt-search.cgi?tag=javascript&amp;blog_id=1">javascript</a>
                </li>
            
                <li class="rank-10 widget-list-item">
                    <a href="http://pm.11op.net/mt/mt-search.cgi?tag=jquery&amp;blog_id=1">jquery</a>
                </li>
            
                <li class="rank-7 widget-list-item">
                    <a href="http://pm.11op.net/mt/mt-search.cgi?tag=Kanasan.JS&amp;blog_id=1">Kanasan.JS</a>
                </li>
            
                <li class="rank-10 widget-list-item">
                    <a href="http://pm.11op.net/mt/mt-search.cgi?tag=locale&amp;blog_id=1">locale</a>
                </li>
            
                <li class="rank-5 widget-list-item">
                    <a href="http://pm.11op.net/mt/mt-search.cgi?tag=php&amp;blog_id=1">php</a>
                </li>
            
                <li class="rank-10 widget-list-item">
                    <a href="http://pm.11op.net/mt/mt-search.cgi?tag=scriptaculous&amp;blog_id=1">scriptaculous</a>
                </li>
            
                <li class="rank-10 widget-list-item">
                    <a href="http://pm.11op.net/mt/mt-search.cgi?tag=SNS&amp;blog_id=1">SNS</a>
                </li>
            
                <li class="rank-7 widget-list-item">
                    <a href="http://pm.11op.net/mt/mt-search.cgi?tag=tweditor&amp;blog_id=1">tweditor</a>
                </li>
            
                <li class="rank-3 widget-list-item">
                    <a href="http://pm.11op.net/mt/mt-search.cgi?tag=Twitter&amp;blog_id=1">Twitter</a>
                </li>
            
                <li class="rank-10 widget-list-item">
                    <a href="http://pm.11op.net/mt/mt-search.cgi?tag=WEB%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9&amp;blog_id=1">WEBサービス</a>
                </li>
            
                <li class="rank-7 widget-list-item">
                    <a href="http://pm.11op.net/mt/mt-search.cgi?tag=%E3%81%86%E3%81%9D&amp;blog_id=1">うそ</a>
                </li>
            
                <li class="rank-1 widget-list-item">
                    <a href="http://pm.11op.net/mt/mt-search.cgi?tag=%E3%81%86%E3%82%93%E3%81%93&amp;blog_id=1">うんこ</a>
                </li>
            
                <li class="rank-4 widget-list-item">
                    <a href="http://pm.11op.net/mt/mt-search.cgi?tag=%E3%81%A1%E3%82%93%E3%81%93&amp;blog_id=1">ちんこ</a>
                </li>
            
                <li class="rank-10 widget-list-item">
                    <a href="http://pm.11op.net/mt/mt-search.cgi?tag=%E3%82%A4%E3%83%B3%E3%82%B3&amp;blog_id=1">インコ</a>
                </li>
            
                <li class="rank-10 widget-list-item">
                    <a href="http://pm.11op.net/mt/mt-search.cgi?tag=%E3%82%AF%E3%83%AA&amp;blog_id=1">クリ</a>
                </li>
            
                <li class="rank-10 widget-list-item">
                    <a href="http://pm.11op.net/mt/mt-search.cgi?tag=%E4%BE%8B%E3%81%A8%E3%81%97%E3%81%A6%E3%81%AE%E3%81%86%E3%82%93%E3%81%93&amp;blog_id=1">例としてのうんこ</a>
                </li>
            
                <li class="rank-10 widget-list-item">
                    <a href="http://pm.11op.net/mt/mt-search.cgi?tag=%E4%BE%8B%E3%81%A8%E3%81%97%E3%81%A6%E3%81%AE%E3%81%A1%E3%82%93%E3%81%93&amp;blog_id=1">例としてのちんこ</a>
                </li>
            
                <li class="rank-10 widget-list-item">
                    <a href="http://pm.11op.net/mt/mt-search.cgi?tag=%E5%86%8D%E5%B8%B0&amp;blog_id=1">再帰</a>
                </li>
            
                <li class="rank-4 widget-list-item">
                    <a href="http://pm.11op.net/mt/mt-search.cgi?tag=%E5%8B%89%E5%BC%B7%E4%BC%9A&amp;blog_id=1">勉強会</a>
                </li>
            
                <li class="rank-10 widget-list-item">
                    <a href="http://pm.11op.net/mt/mt-search.cgi?tag=%E6%AD%A6%E5%A3%AB&amp;blog_id=1">武士</a>
                </li>
            
        </ul>
    </div>
</div>

<div class="widget-archives widget">
   <h3 class="widget-header"><a href="http://pm.11op.net/archives.html">アーカイブ</a></h3>
   <div class="widget-content">
   
      <ul class="widget-list">
         <li class="widget-list-item"><a href="http://pm.11op.net/2007/12/">2007&#24180;12&#26376;</a></li>
      
   
      
         <li class="widget-list-item"><a href="http://pm.11op.net/2007/11/">2007&#24180;11&#26376;</a></li>
      
   
      
         <li class="widget-list-item"><a href="http://pm.11op.net/2007/10/">2007&#24180;10&#26376;</a></li>
      
   
      
         <li class="widget-list-item"><a href="http://pm.11op.net/2007/09/">2007&#24180;9&#26376;</a></li>
      
   
      
         <li class="widget-list-item"><a href="http://pm.11op.net/2007/08/">2007&#24180;8&#26376;</a></li>
      
   
      
         <li class="widget-list-item"><a href="http://pm.11op.net/2007/07/">2007&#24180;7&#26376;</a></li>
      
   
      
         <li class="widget-list-item"><a href="http://pm.11op.net/2007/06/">2007&#24180;6&#26376;</a></li>
      
   
      
         <li class="widget-list-item"><a href="http://pm.11op.net/2007/05/">2007&#24180;5&#26376;</a></li>
      
   
      
         <li class="widget-list-item"><a href="http://pm.11op.net/2007/03/">2007&#24180;3&#26376;</a></li>
      
   
      
         <li class="widget-list-item"><a href="http://pm.11op.net/2007/02/">2007&#24180;2&#26376;</a></li>
      
   
      
         <li class="widget-list-item"><a href="http://pm.11op.net/2007/01/">2007&#24180;1&#26376;</a></li>
      </ul>
   
   </div>
</div>

<a href="http://awasete.com/show.phtml?u=http%3A%2F%2Fpm.11op.net%2F"><img src="http://img.awasete.com/image.phtml?u=http%3A%2F%2Fpm.11op.net%2F" width="160" height="140" alt="あわせて読みたい" border="0"></a><div class="widget-syndicate widget">
   <div class="widget-content">
      <a href="http://pm.11op.net/atom.xml">このブログを購読</a><br />
      [<a href="http://www.sixapart.jp/about/feeds">フィードとは</a>]
   </div>
</div>

<!--
        <div class="widget-search widget">
            <h3 class="widget-header">検索</h3>
            <div class="widget-content">
                <form method="get" action="http://pm.11op.net/mt/mt-search.cgi">
                    <input id="search" name="search" size="20" value="" />
        
                    <input type="hidden" name="IncludeBlogs" value="1" />
        
                    <input type="submit" value="検索" />
                </form>
            </div>
        </div>


        <div class="widget-welcome widget">
            <h3 class="widget-header">
    
                このブログ記事について
    
    
            </h3>
            <div class="widget-content">
    
    
                <p class="first">このページは、pm11opが2007&#24180;2&#26376; 8&#26085; 02:20に書いたブログ記事です。</p>
        
                <p>ひとつ前のブログ記事は「<a href="http://pm.11op.net/2007/02/web.php">ステキwebサービス</a>」です。</p>
        
        
                <p>次のブログ記事は「<a href="http://pm.11op.net/2007/02/innerhtml.php">innerHTML は文法にうるさい。</a>」です。</p>
        
    
    
    
    
    
                <p>最近のコンテンツは<a href="http://pm.11op.net/">インデックスページ</a>で見られます。過去に書かれたものは<a href="http://pm.11op.net/archives.php">アーカイブのページ</a>で見られます。</p>
    
            </div>
        </div>


 






        <div class="widget-syndicate widget">
            <div class="widget-content">
                <ul class="blog-feeds">
                    <li class="blog feed"><img src="http://pm.11op.net/mt/mt-static/images/status_icons/feed.gif" alt="購読する" width="9" height="9" /> <a href="http://pm.11op.net/atom.xml">このブログを購読</a></li>
    
                </ul>
            </div>
        </div>
        <div class="widget-powered widget">
            <div class="widget-content">
                <a href="http://www.sixapart.jp/movabletype/"><img src="http://pm.11op.net/mt/mt-static/images/mt4-bug-pbmt-white.png" alt="Powered by Movable Type 4.01" width="120" height="75" /></a>
            </div>
        </div>
-->
    </div>
</div>

                
            
        

                </div>
            </div>
            <div id="footer">
                <div id="footer-inner">
                    <div id="footer-content">
                        <div class="widget-powered widget">
                            <div class="widget-content">
                                by pm11op
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<script type="text/javascript" src="http://www.assoc-amazon.jp/s/link-enhancer?tag=utsukusa-22&o=9">
</script>
<noscript>
    <img src="http://www.assoc-amazon.jp/s/noscript?tag=utsukusa-22" alt="" />
</noscript>


<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-1027603-5";
urchinTracker();
</script>

</body>
</html>