Интеграция jQuery Mobile с Facebook Like и Twitter Tweet

Question

Я пытаюсь интегрировать JQM с Facebook Like и Twitter Tweet на моей второй странице. Вторая страница загружается первой страницей с использованием тега привязки, а затем с помощью AJAX-запроса для второй страницы.

Проблема в том, что сценарии JavaScript и Facebook не загружаются при загрузке со второй страницы.

Я могу отключить AJAX, но не хочу использовать эту функцию в качестве компромисса.

Есть ли способ перезагрузить js-скрипты на определенной странице после AJAX-запроса на JQM? (Я думаю, что это должно работать подобно живой функции jQuery).

Я использую Cakephp 2.0.4

Answer 1

Во встроенном коде кнопки твита есть оператор if, проверяющий элемент с идентификатором 'twitter-wjs'. При удалении этого элемента до загрузки страницы работает кнопка твита.

$(document).bind('pagebeforeload', function(){
    $('#twitter-wjs').remove();
});

Это исправляет кнопку лайка в фейсбуке. Я не совсем уверен, почему это работает, но это как-то связано с API Facebook.

$(document).bind('pageshow', function() {
    try{
        FB.XFBML.parse();
    } catch(err){}
});

Answer 2

У меня была такая же проблема, и я решил ее следующим образом:

1: в вашем html создайте тег или идентификатор на вашей странице div

<div data-role="page" class="page-class" id="page-id">

2: получите предоставленный кодчерез твиттер и измени его на использование синтаксиса jquery

$( '.page-class' ).live( 'pageinit',function(event){
    d =  $(document)[0];
    s = "script";
    id = "twitter-wjs";

    var js, fjs = d.getElementsByTagName(s)[0];
    if (!d.getElementById(id)) {
        js = d.createElement(s);
        js.id = id;
        js.src = "//platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore(js, fjs);   
    }
});

Я изменил код, предоставленный твиттером, как можно меньше.Возможно, есть лучший способ сделать то же самое.

Для Facebook, я думаю, можно использовать тот же подход.

Надеюсь, это поможет тем, кто сталкивается с той же проблемой.

Answer 3

Используете ли вы соответствующие стандарты страницы? Вам нужно будет загрузить скрипты внутри элемента data-role="page", потому что это то, что среда JQM извлекает из запроса AJAX.

<div data-role="page"> 
    <!-- Scripts here -->
</div> 

документы - http://jquerymobile.com/test/docs/pages/page-anatomy.html

Answer 4

Я думаю, что есть два решения для этого.Во-первых, нужно отключить переходы страниц Ajax для связанных страниц, добавив data-ajax = "false" к гиперссылке.Это может или не может быть уместно для вас, в зависимости от того, хотите ли вы сохранить тот же контекст на кнопке «Назад» - вы обычно делаете это, поэтому вы можете попробовать второе решение.

Это то, что я использую, когдаУ меня есть несколько кнопок «Мне нравится» на странице: когда ваша страница создана (подключитесь к событию создания страницы JQMobile), найдите все ваши кнопки, похожие на fb, и запустите их обработку.Я не могу дать вам полный пример, но что-то вроде этого (обратите внимание, что я предполагаю, что вы используете формат XFBML ''):

1. Найдите все ваши fb Like элементы, используя селектор jQuery.

2. Запустите их, используя что-то вроде:

   $('fb\\:like').each(function() { FB.XFBML.parse(this); });
   

Это приведет к тому, что все они будут расширены до полных кнопок Like.

Обратите внимание, что я не проверял часть селектора этого, но бит XFBML.parse - это то, что я использую, и оно работает.Я не сделал то же самое для Twitter, но мне было бы интересно увидеть эквивалентный код.

Безопасно запускать этот код несколько раз, потому что после его анализа элемент fb: like больше не будет присутствовать.в HTML.

Answer 5

Вот решение, на второй странице div создайте iframe.И src iframe будет страница, которая отображает твиты и лайки.

Таким образом, вам не нужно перезагружать js, потому что iframe перезагрузит код для лайков и твитов.

Надеюсь, это решит вашу проблему.