0

pjaxを使用してページとURLを制御しているので、ナビゲーションボタンを押すと、コンテンツとURLの一部が更新されずに変更されます。

しかし今、私はページ内にFacebookコメントプラグインを挿入するという問題に直面しています。これは、Facebookコメントプラグインが初めて表示されたときにのみ機能しますが、ページを別のページからFacebookコメントプラグインページに移動すると、もう機能していません。このページをナビゲートするたびに、「// connect.facebook.net/en_US/all.js#xfbml=1&appId=xxxxxxxx」を削除してリロードしようとしましたが、結果はまだです。同じように、誰かがこの問題を解決するのを手伝ってくれませんか？どうもありがとう。

私のコードは以下の通りです：-

//index.phpの一部

<div id="wrapper">
    <div id="content">
        <div id="navigation">
            <div id="timer">1</div>
            <ul>
                <li>
                    <a href="/html5/sample3/finished/index.php" title="You Get What You Give">
                        You Get What You Give
                    </a>
                    <a href="/html5/sample3/finished/index.php?page=fortune-faded" title="Fortune Faded">
                        Fortune Faded
                    </a>
                    <a href="/html5/sample3/finished/index.php?page=liar" title="Liar">
                        Liar
                    </a>
                    <a href="/html5/sample3/finished/index.php?page=universal" title="Universal">
                        Universal
                    </a>
                </li>
            </ul>
        </div>

        <div id="container">
            <div id="left">
                <?php echo $content['left']; ?>
            </div>

            <div id="right">            
                <?php echo $content['right']; ?>
            </div>
        </div>

    </div>

    <div class="clearer"></div>
</div>

<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/core.js"></script>




//part of core.js
var systemObject = {
    run : function() {
        this.content($('#navigation ul li a'));
        this.pop();
    },
    content : function(obj) {
        obj.live('click', function(e) {
            var thisUrl = $(this).attr('href');
            var thisTitle = $(this).attr('title');
            systemObject.load(thisUrl);
            window.history.pushState(null, thisTitle, thisUrl);
            e.preventDefault();
        });
    },
    pop : function() {
        window.onpopstate = function() {
            systemObject.load(location.pathname);
        };
    },
    load : function(url) {
        $("#facebook-jssdk").remove();                                  //delete //connect.facebook.net/en_US/all.js#xfbml=1&appId=xxxxxxxxx
        url = url === '/' ? '/ygwyg' : url;
        jQuery.getJSON(url, { ajax : 1 }, function(data) {              //load content
            jQuery.each(data, function(k, v) {
                $('#' + k + ' section').fadeOut(200, function() {
                    $(this).replaceWith($(v).hide().fadeIn(200));
                });
            });
        });
    },
};
$(function() {
    systemObject.run();
});



 //part of index.php?page=fortune-faded
<section>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=xxxxxxxxx";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-comments" data-href="http://example.com" data-num-posts="2" data-width="470"></div>
</section>
4

1 に答える 1

1

「 FB.XFBML.parse() 」を AJAX 成功関数内で明示的に呼び出します。これにより、html が再解析され、Facebook コメント セクションがレンダリングされます。

   //facebook comments
    var isFacebook = $data.find('.fb-comments');
    if(isFacebook != 'undefined' ) {
        var scriptText = 'FB.XFBML.parse();';
        var scriptNode = document.createElement('script');
        scriptNode.appendChild(document.createTextNode(scriptText));
        contentNode.appendChild(scriptNode);                   
    }

あなたのコードでは、ロード内に次のように記述します。

   load : function(url) {
        url = url === '/' ? '/ygwyg' : url;
        jQuery.getJSON(url, { ajax : 1 }, function(data) {   //load content
            jQuery.each(data, function(k, v) {

                //here check if the response data contains .fb-contents class
                //Then call the FB.XFBML.parse() function    

                $('#' + k + ' section').fadeOut(200, function() {
                    $(this).replaceWith($(v).hide().fadeIn(200));
                });
            });
        });
    },
于 2012-07-30T18:29:04.757 に答える