Question

我静态加载了两个视频，第三个使用`

动态加载

FB.XFBML.parse(document.getElementById("container-id"));

但不是重新加载容器，而是重新加载整个页面。

<body>
    <!-- Load Facebook SDK for JavaScript -->
    <div id="fb-root"></div>
    <script>
    </script>
    <!-- Your embedded video player code -->
    <div id="video-basket">
        <div  
            class="fb-video"
            data-href="https://www.facebook.com/facebook/videos/10153231379946729/" 
            data-width="500" 
            data-allowfullscreen="true"></div>
        <div  
            class="fb-video"
            data-href="https://www.facebook.com/MichaelMcIntyreFans/videos/1418120488209365/" 
            data-width="500"
            data-allowfullscreen="true"></div>
    </div>

    <div id="cutty-video-basket"></div>

    <script src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            facebook = "";
            /* Facebook videos initialization */
            window.fbAsyncInit = function () {
                FB.init({
                    appId: '{1367462833276100}',
                    xfbml: true,
                    version: 'v2.8'
                });
                facebook = FB;
            };
            (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/sdk.js";
                fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));
            /* Facebook videos initialization */

            /* Load the third video dynamically after five seconds */
            setTimeout(function () {
                var str = '<div class="fb-video" data-href="https://www.facebook.com/thehumaneleague/videos/1740263742655957/" data-width="500" data-allowfullscreen="true"></div>';
                $("#cutty-video-basket").append(str);
                facebook.XFBML.parse(document.getElementById("comment_basket"));
            }, 5000);
            /* Load the third video dynamically after five seconds */
        });
    </script>
</body>

但fb-comments的相同代码工作正常，并且它没有重新加载页面只有容器。请注意，我已阅读some questions but我需要的是动态地在新div上加载fb-video 不要修改现有数据的href

Answer 1

我的坏，应该是

   facebook.XFBML.parse(document.getElementById("cutty-video-basket"));

不是

facebook.XFBML.parse(document.getElementById("comment_basket"));

值得注意的是，按照我的预期，它会动态加载而无需重新加载。

FB.XFBML.parse重新加载整个页面，而不是重新加载fb-videos的内容

1 个答案: