在移动网站上结合jQuery Mobile和MathJax？

在同一页面上结合MathJax和jQuery Mobile似乎存在一些问题。有时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

来源

2011-06-29 Nathan Osman

请注意，该页面可能会正确显示...这似乎是碰撞和错过。有时显示，有时不显示。 –

只是一个说明，但jQM已发布测试版本以及使用jQuery 1.6.x –

嗯，在第一个示例链接我看到MathJax。js在Chrome开发工具中加载，但在第二个例子中，它甚至没有列在标题中。你如何从一个页面切换到另一个页面？ –

那么我找到了一个解决方案...它就像这样：

首先为页面分配唯一的编号。由于这些页面是在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-30 05:13:30

不知道这是更简单/更好的方式来添加一个脚本，但这里是我发现：

（未经测试）也许（使用你的信息： Combining jQuery Mobile and MathJax on a mobile site?）

$('#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-30 13:28:20

在移动网站上结合jQuery Mobile和MathJax？

回答

相关问题