モバイルサイトでjQuery MobileとMathJaxを組み合わせる？

Question

MathJaxとjQuery Mobileを同じページに結合するときにいくつかの問題があるようです。時にはMathJaxが正しくレンダリングされ、それ以外のときにMathJaxがレンダリングされることがあります。これは同じページで発生する可能性があります。

両者は次のようになりロードHTML：http://stackmobile.com/beta/math.stackexchange.com/questions/view/?id=47772

編集：ないMathJaxに問題があるように思わ

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

あなたはここに例のページを見ることができますAJAX経由で読み込まれている新しいページを認識しています - ここにはうまくいかない例があります：

Answer 1

解決策は次のようになります。

• 最初にページに一意の番号を割り当てます。これらのページは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に挿入する - このスクリプトは内のページ要素を含めるべきです。また、「コールバック」についても言及しています。これは、スクリプトが読み込まれるときに呼び出されます。

• この関数（コールバック）はの外側にある以外のページに移動する必要があります。これにより、新しいページが読み込まれた後に2回インクルードされなくなります。

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

  多くがここにあります。まず、このコールバックが一度だけ呼び出されたかどうかを確認します。そうでない場合は、window.onloadイベントから呼び出されたかのようにページを解析するようにMathJaxに指示します。これが既に起こっている場合（新しいページになっている場合）、新しいページをMathJaxで実行するだけです。

私はおそらく何かが不足している可能性があり、これを行う良い方法があるかもしれません。しかし、私は他の方法が見つからない。

Answer 2

ない、これはスクリプトを追加する簡単/より良い方法ですが、ここで私が見つけたものであるかどうかわから：

• http://api.jquery.com/jQuery.getScript/
• Can't append <script> element

（未テスト）は、たぶん（あなたのポストを使用しました： 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; 
    } 
}