Объединение jQuery Mobile и MathJax на мобильном сайте? - PullRequest
Новая
       13

Объединение jQuery Mobile и MathJax на мобильном сайте?

1 голос
/ 29 июня 2011

Кажется, есть некоторые проблемы при объединении MathJax и jQuery Mobile на одной странице.Иногда MathJax отображает правильно, а иногда нет - и это может случиться с одной и той же страницей.

HTML-код, который загружает их оба, выглядит следующим образом: 

<script type='text/javascript' src='http://code.jquery.com/jquery.min.js'>
</script> 
<script type='text/javascript'
        src='http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js'>
</script> 
<link rel='stylesheet' type='text/css'
      href='http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css' /> 
<script src='/beta/mathjax/MathJax.js'>
</script>

Вы можете видетьпример страницы здесь: http://stackmobile.com/beta/math.stackexchange.com/questions/view/?id=47772

Редактировать: Кажется, проблема в том, что MathJax не распознает новую страницу, загружаемую через AJAX - вот пример, который, похоже, неработа: http://stackmobile.com/beta/#/beta/physics.stackexchange.com/questions/view/?id=11678

Ответы [ 2 ]

0 голосов
/ 30 июня 2011

Не уверен, что это более простой / лучший способ добавить скрипт, но вот что я нашел:

(не проверено) Может быть (используя ваше сообщение: Объединение jQuery Mobile и MathJax на мобильном сайте? ) 

$('#page_id').live('pageshow', function(event, ui) {
    $.getScript('http://path_to_mathjax/MathJax.js', function() { 
        callback(); 
    });
});

var mathjax_loaded = false;
function callback()
{
    if(mathjax_loaded)
        MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
    else
    {
        MathJax.Hub.Startup.onload();
        mathjax_loaded = true;
    }
}
0 голосов
/ 30 июня 2011

Ну, я нашел решение ... и оно выглядит примерно так:

  • Сначала присвойте уникальные номера страницам. Поскольку эти страницы генерируются в PHP, это можно сделать с помощью uniqid().

  • Назначьте следующую функцию событию pageshow: 

    $('#page_id').live('pageshow', function(event, ui) {
    var script = document.createElement('script');
    script.type   = 'text/javascript';
    script.src    = 'path_to_mathjax/MathJax.js';
    script.onload = callback;
    document.getElementsByTagName('head')[0].appendChild(script);
});

    Это загружает MathJax и вставляет его в DOM - этот скрипт должен включать в элемент страницы. Также обратите внимание, что мы упоминаем «обратный вызов». Это будет вызвано при загрузке скрипта.

  • Эта функция (обратный вызов) должна выходить за пределы любых страниц. Это предотвратит его повторное включение после загрузки новой страницы. 

    var mathjax_loaded = false;
function callback()
{
    if(mathjax_loaded)
        MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
    else
    {
        MathJax.Hub.Startup.onload();
        mathjax_loaded = true;
    }
}

    Здесь много всего. Прежде всего, мы отслеживаем, был ли этот обратный вызов вызван один раз. Если нет, мы говорим MathJax проанализировать страницу, как если бы она была вызвана из события window.onload. Если это уже произошло (и мы на новой странице), тогда нам просто нужно запустить MathJax через новую страницу.

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

...