0

我一直在努力将这两个小部件添加到我的布局页面（即 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'}}
4

2 回答 2

0

OK, what I have done to work around this is as follows:

I placed the following in the body element, but outside of the jQM page (i.e it is present in the DOM, but not visible)

: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

I then wrote a bit of JS to clone #social and insert it into the page.

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

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

});

This then creates the desired effect. As an added bonus, on page changes the widgets appear immediately as opposed to taking a few seconds to load.

If someone has a better solution please share.

于 2013-06-03T10:02:58.467 回答
0

$(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'}}
于 2013-07-26T13:41:25.410 回答