4

Jqueryアドレスを使用して、次の例に従って簡単なディープリンクページを作成しました：
http://www.asual.com/jquery/address/samples/state/

この例では、HTML5 ブラウザー (私は Chrome 10 を使用しています) に実際に表示されるソースが表示されます。つまり、 http://www.asual.com/jquery/address/samples/state/portfolioは、そのコンテンツがJquery address/Ajax/ を介して挿入されたにもかかわらずPortfolio content.、 div に表示されます。この例を再構築しましたが、私のページでは、ソースは常に、Ajax が実行される前の最初のページのものです。これは、HTML5 以外のブラウザーと同じ動作です。 私は何を間違っていますか？ ヒントをありがとう、 トーマスcontent$('.content').html()


編集：

デモコードは次のとおりです。

<script type="text/javascript"> 

        $.address.init(function() {

            // Initializes the plugin
            $('.nav a').address();

        }).change(function(event) {

            // Selects the proper navigation link
            $('.nav a').each(function() {
                if ($(this).attr('href') == ($.address.state() + event.path)) {
                    $(this).addClass('selected').focus();
                } else {
                    $(this).removeClass('selected');
                }
            });

            // Handles response
            var handler = function(data) {
                $('.content').html($('.content', data).html()).show();
                $.address.title(/>([^<]*)<\/title/.exec(data)[1]);
            };

            // Loads the page content and inserts it into the content area
            $.ajax({
                url: $.address.state() + event.path,
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    handler(XMLHttpRequest.responseText);
                },
                success: function(data, textStatus, XMLHttpRequest) {
                    handler(data);
                }
            });
        });

        // Hides the tabs during initialization
        document.write('<style type="text/css"> .content { display: none; } </style>');

    </script>

私のはほとんど同じです。リンクの強調表示を削除し、サイトに一致するように URL を変更し、HTML をロードしているため Ajax 呼び出しを変更しました。それに「何か」があるのだろうか（ドキュメントでは実際には語られていないが、プロジェクトのGitHubで見つけた必要な.htaccessなど）。

これが私のコードです：

$.address.init(function(event) {
        $('#blogMenu a').address();
        $('#blogBottomMenu a').address();
        $('.linkleiste a').address();
}).change(function(event) {
        var value = $.address.state().replace(/^\/$/, '') + event.value;
  value = value.replace(/^\/blog\//,'');
  value = value.replace(/_/,'');
        var teile = value.split('/');
        var name = '';
        var thema = '';
        if(teile[0]) name = teile[0];
        if(teile[1]) thema = teile[1];
        $('#blog').hide();
            if(!value.match(/ADFRAME/)) {
                $(document).scrollTo('#aufmacher','fast');
                $('#blogMenu').load('/snp/blog_menu.snp',{A_NAME:name,ETIKETT:thema,id:id});
                $('#blog').load('/blog/article.snp',{A_NAME:name,ETIKETT:thema,id:id},function() {
                    $('#blog').show();
                });
            }
            else {
                $('#blog').fadeIn('fast');
            }

    });
4

1 に答える 1

0

デモをセットアップしていただけると助かります。しかし、コードを見て、すべてがロードされる前にイベントをトリガーする必要があります。

$(function () { // NOT $(document).ready(function () {});
    $.address.init();
});

また、ハッシュがない場合は、ハッシュの変更をトリガーする必要がある場合があります。

$(function () {
    $.address.init();
    $.address.change(); // Triggers hash change when there is no hash!
});

そこのコードを見ると、あなたのものとは異なるレイアウトを使用しているように見えます。

var init = true,
state = window.history.pushState !== undefined;

// Handles response
var handler = function (data) {
    $('title').html($('title', data).html());
    $('.content').html($('.content', data).html());
    $('.page').show();
    $.address.title(/>([^<]*)<\/title/.exec(data)[1]);
};

$.address.state('/jquery/address/samples/state').init(function () {

    // Initializes the plugin
    $('.nav a').address();

}).change(function (event) {

    // Selects the proper navigation link
    $('.nav a').each(function () {
        if ($(this).attr('href') == ($.address.state() + event.path)) {
            $(this).addClass('selected').focus();
        } else {
            $(this).removeClass('selected');
        }
    });

    if (state && init) {

        init = false;

    } else {

        // Loads the page content and inserts it into the content area
        $.ajax({
            url:$.address.state() + event.path,
            error:function (XMLHttpRequest, textStatus, errorThrown) {
                handler(XMLHttpRequest.responseText);
            },
            success:function (data, textStatus, XMLHttpRequest) {
                handler(data);
            }
        });
    }

});

if (!state) {

    // Hides the page during initialization
    document.write('<style type="text/css"> .page { display: none; } </style>');
}

デモをセットアップする場合は、回答を更新します。

于 2012-11-02T19:29:47.237 に答える