Rails 使用 Facebook Like 和 Twitter 使用 jQuery Mobile 跟随带有布局页面的小部件

Question

我一直在努力将这两个小部件添加到我的布局页面（即 application.html.haml）。

页面第一次加载时它们会显示，然后如果我导航到它们不显示的另一个页面，所以我想我会编写一些 JS 来删除加载相应 SDK 的脚本元素，然后再运行样板以调用 SDK。

这适用于 Twitter Follow 小部件，但不适用于 Facebook like。

我的 JS 在下面：

$(document).bind('pageshow', function() {

    // Remove the Facebook and Twitter SDKs to force them to reload
    // Note: Located in head element, not div[data-role="page"]
    var $twitter_sdk = $('#twitter-wjs');
    var $facebook_sdk = $('#facebook-jssdk');

    // First time page is requested script tags won't exist
    if ($twitter_sdk.length) {
        $twitter_sdk.remove();
    }

    if ($facebook_sdk.length) {
        $facebook_sdk.remove();
    }

    // Facebook SDK
    (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";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    // Twitter SDK
    ! function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0],
            p = /^http:/.test(d.location) ? 'http' : 'https';
        if (!d.getElementById(id)) {
            js = d.createElement(s);
            js.id = id;
            js.src = p + '://platform.twitter.com/widgets.js';
            fjs.parentNode.insertBefore(js, fjs);
        }
    }(document, 'script', 'twitter-wjs');

});

我的 HAML 在这里：

%div#home-page{:data => {:role => 'page'}}

    -# header
    %div.page-header{:data => {:role => 'header'}}
        %div.logo

    -# main content
    %div{:data => {:role => 'content'}}
        %div.shadow1box
            %img.shadow{:src => image_path('theme/shadow1.png'), :alt => 'shadow'}
        %div.content-padd

            %hr.ornamental
            %h3.home-title South Africa's premier business collaboration platform
            %hr.ornamental

            -# Search
            %form
                %div#main-search{:data => {:role => 'fieldcontain'}}
                    %input#search{:type => 'search', :name => 'search', :autofocus => true, :placeholder => 'Search site...'}

            -# Flash messages
            %div
                %p.notice
                    = notice
                %p.alert
                    = alert

            = yield :layout

            = render 'devise/shared/links'

            -# social
            %br
            %div.fb-follow{:data => {:href=> 'https://www.facebook.com/zuck', 'show-faces' => 'true', :width => '300'}}
            %br
            %br
            %a.twitter-follow-button{:href => 'https://twitter.com/KeepItLocal', :data => {'show-count' => 'false', :size => 'large'}}
                Follow @KeepItLocal


    -# footer
    %div{:data => {:role => 'footer'}}

Answer 1

好的，我为解决这个问题所做的工作如下：

我将以下内容放在 body 元素中，但在 jQM 页面之外（即它存在于 DOM 中，但不可见）

:javascript
    !function(d,s,id){var js,fjs=d.getElementsByTagName(s)     [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id))
{js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');

:javascript
    (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";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

-# social
%div#social
    %br
    %div.fb-follow{:data => {:href=> 'https://www.facebook.com/zuck', 'show-faces' => 'true', :width => '300'}}
    %br
    %br
    %a.twitter-follow-button{:href => 'https://twitter.com/KeepItLocal', :data => {'show-count' => 'false', :size => 'large'}}
        Follow @KeepItLocal

然后我写了一点 JS 来克隆 #social 并将其插入到页面中。

$(document).bind('pageshow', function() {

    $('#social').clone().appendTo('.ui-page-active #social-placeholder');

});

然后创建所需的效果。作为额外的好处，在页面更改时，小部件会立即出现，而不是需要几秒钟才能加载。

如果有人有更好的解决方案，请分享。

Answer 2

$(document).bind('pageshow', function() {

// Remove the Facebook and Twitter SDKs to force them to reload
// Note: Located in head element, not div[data-role="page"]
var $twitter_sdk = $('#twitter-wjs');
var $facebook_sdk = $('#facebook-jssdk');

// First time page is requested script tags won't exist
if ($twitter_sdk.length) {
    $twitter_sdk.remove();
}

if ($facebook_sdk.length) {
    $facebook_sdk.remove();
}

// Facebook SDK
(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";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

// Twitter SDK
! function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0],
        p = /^http:/.test(d.location) ? 'http' : 'https';
    if (!d.getElementById(id)) {
        js = d.createElement(s);
        js.id = id;
        js.src = p + '://platform.twitter.com/widgets.js';
        fjs.parentNode.insertBefore(js, fjs);
    }
}(document, 'script', 'twitter-wjs');

}); 我的 HAML 在这里：

%div#home-page{:data => {:role => 'page'}}

-# header
%div.page-header{:data => {:role => 'header'}}
    %div.logo

-# main content
%div{:data => {:role => 'content'}}
    %div.shadow1box
        %img.shadow{:src => image_path('theme/shadow1.png'), :alt => 'shadow'}
    %div.content-padd

        %hr.ornamental
        %h3.home-title South Africa's premier business collaboration platform
        %hr.ornamental

        -# Search
        %form
            %div#main-search{:data => {:role => 'fieldcontain'}}
                %input#search{:type => 'search', :name => 'search', :autofocus => true, :placeholder => 'Search site...'}

        -# Flash messages
        %div
            %p.notice
                = notice
            %p.alert
                = alert

        = yield :layout

        = render 'devise/shared/links'

        -# social
        %br
        %div.fb-follow{:data => {:href=> 'https://www.facebook.com/zuck', 'show-faces' => 'true', :width => '300'}}
        %br
        %br
        %a.twitter-follow-button{:href => 'https://twitter.com/KeepItLocal', :data => {'show-count' => 'false', :size => 'large'}}
            Follow @KeepItLocal


-# footer
%div{:data => {:role => 'footer'}}