1

There seems to be some issues when combining MathJax and jQuery Mobile on the same page. Sometimes the MathJax renders correctly and other times it does not - and this can happen to the same page.

The HTML that loads both of them looks like this:

<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>

You can see an example page here: http://stackmobile.com/beta/math.stackexchange.com/questions/view/?id=47772

Edit: It seems to be a problem with MathJax not recognizing a new page being loaded via AJAX - here is an example that doesn't seem to work: http://stackmobile.com/beta/#/beta/physics.stackexchange.com/questions/view/?id=11678

4

2 回答 2

0

好吧，我找到了一个解决方案......它是这样的：

  • 首先为页面分配唯一编号。由于这些页面是用 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 在新页面上运行。

我可能遗漏了一些东西，并且可能有更好的方法来做到这一点。但我还没有找到任何其他有效的方法。

于 2011-06-30T05:13:30.470 回答
0

不确定这是否是添加脚本的更简单/更好的方法，但这是我发现的：

（未经测试）也许（使用您的帖子：在移动网站上结合 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;
    }
}
于 2011-06-30T13:28:20.267 回答