1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Loading MathJax Dynamically — MathJax v1.1 documentation</title>
<link rel="stylesheet" href="_static/mj.css" type="text/css" />
<link rel="stylesheet" href="_static/pygments.css" type="text/css" />
<script type="text/javascript">
var DOCUMENTATION_OPTIONS = {
URL_ROOT: '',
VERSION: '1.1',
COLLAPSE_INDEX: false,
FILE_SUFFIX: '.html',
HAS_SOURCE: true
};
</script>
<script type="text/javascript" src="_static/jquery.js"></script>
<script type="text/javascript" src="_static/underscore.js"></script>
<script type="text/javascript" src="_static/doctools.js"></script>
<!--<script type="text/javascript" src="../../MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>-->
<link rel="top" title="MathJax v1.1 documentation" href="index.html" />
<link rel="next" title="Modifying Math on the Page" href="typeset.html" />
<link rel="prev" title="Using Signals" href="signals.html" />
</head>
<body>
<div class="related">
<h3>Navigation</h3>
<ul>
<li class="right" style="margin-right: 10px">
<a href="genindex.html" title="General Index"
accesskey="I">index</a></li>
<li class="right" >
<a href="typeset.html" title="Modifying Math on the Page"
accesskey="N">next</a> |</li>
<li class="right" >
<a href="signals.html" title="Using Signals"
accesskey="P">previous</a> |</li>
<li><a href="index.html">MathJax v1.1 documentation</a> »</li>
</ul>
</div>
<div class="document">
<div class="documentwrapper">
<div class="bodywrapper">
<div class="body">
<div class="section" id="loading-mathjax-dynamically">
<span id="ajax-mathjax"></span><h1>Loading MathJax Dynamically<a class="headerlink" href="#loading-mathjax-dynamically" title="Permalink to this headline">¶</a></h1>
<p>MathJax is designed to be included via a <tt class="docutils literal"><span class="pre"><script></span></tt> tag in the
<tt class="docutils literal"><span class="pre"><head></span></tt> section of your HTML document, and it does rely on being
part of the original document in that it uses an <tt class="docutils literal"><span class="pre">onload</span></tt> event
handler to synchronize its actions with the loading of the page.
If you wish to insert MathJax into a document after it has
been loaded, that will normally occur <em>after</em> the page’s <tt class="docutils literal"><span class="pre">onload</span></tt>
handler has fired, and so MathJax will not be able to tell if it is
safe for it to process the contents of the page. Indeed, it will wait
forever for its <tt class="docutils literal"><span class="pre">onload</span></tt> handler to fire, and so will never process
the page.</p>
<p>To solve this problem, you will need to call MathJax’s <tt class="docutils literal"><span class="pre">onload</span></tt>
handler yourself, to let it know that it is OK to typeset the
mathematics on the page. You accomplish this by calling the
<tt class="xref py py-meth docutils literal"><span class="pre">MathJax.Hub.Startup.onload()</span></tt> method as part of your MathJax
startup script. To do this, you will need to give MathJax an in-line
configuration.</p>
<p>Here is an example of how to load and configure MathJax dynamically:</p>
<div class="highlight-javascript"><div class="highlight"><pre><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">script</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s2">"script"</span><span class="p">);</span>
<span class="nx">script</span><span class="p">.</span><span class="nx">type</span> <span class="o">=</span> <span class="s2">"text/javascript"</span><span class="p">;</span>
<span class="nx">script</span><span class="p">.</span><span class="nx">src</span> <span class="o">=</span> <span class="s2">"http://cdn.mathjax.org/mathjax/latest/MathJax.js"</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">config</span> <span class="o">=</span> <span class="s1">'MathJax.Hub.Config({'</span> <span class="o">+</span>
<span class="s1">'extensions: ["tex2jax.js"],'</span> <span class="o">+</span>
<span class="s1">'jax: ["input/TeX","output/HTML-CSS"]'</span> <span class="o">+</span>
<span class="s1">'});'</span> <span class="o">+</span>
<span class="s1">'MathJax.Hub.Startup.onload();'</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">opera</span><span class="p">)</span> <span class="p">{</span><span class="nx">script</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">config</span><span class="p">}</span>
<span class="k">else</span> <span class="p">{</span><span class="nx">script</span><span class="p">.</span><span class="nx">text</span> <span class="o">=</span> <span class="nx">config</span><span class="p">}</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s2">"head"</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">script</span><span class="p">);</span>
<span class="p">})();</span>
</pre></div>
</div>
<p>You can adjust the <tt class="docutils literal"><span class="pre">config</span></tt> variable to your needs, but be careful to get
the commas right. The <tt class="docutils literal"><span class="pre">window.opera</span></tt> test is because some versions of
Opera doesn’t handle setting <tt class="docutils literal"><span class="pre">script.text</span></tt> properly, while Internet
Explorer doesn’t handle setting the <tt class="docutils literal"><span class="pre">innerHTML</span></tt> of a script tag.</p>
<p>Here is a version that uses the <tt class="docutils literal"><span class="pre">config=filename</span></tt> method to
configure MathJax:</p>
<div class="highlight-javascript"><div class="highlight"><pre><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">script</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s2">"script"</span><span class="p">);</span>
<span class="nx">script</span><span class="p">.</span><span class="nx">type</span> <span class="o">=</span> <span class="s2">"text/javascript"</span><span class="p">;</span>
<span class="nx">script</span><span class="p">.</span><span class="nx">src</span> <span class="o">=</span> <span class="s2">"http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML-full"</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">config</span> <span class="o">=</span> <span class="s1">'MathJax.Hub.Startup.onload();'</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">opera</span><span class="p">)</span> <span class="p">{</span><span class="nx">script</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">config</span><span class="p">}</span>
<span class="k">else</span> <span class="p">{</span><span class="nx">script</span><span class="p">.</span><span class="nx">text</span> <span class="o">=</span> <span class="nx">config</span><span class="p">}</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s2">"head"</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">script</span><span class="p">);</span>
<span class="p">})();</span>
</pre></div>
</div>
<p>Note that the <strong>only</strong> reliable way to configure MathJax is to use an
in-line configuration block of the type discussed above. You should
<strong>not</strong> call <tt class="xref py py-meth docutils literal"><span class="pre">MathJax.Hub.Config()</span></tt> directly in your code, as it will
not run at the correct time — it will either run too soon, in which case
<tt class="docutils literal"><span class="pre">MathJax</span></tt> may not be defined and the function will throw an error, or it
will run too late, after MathJax has already finished its configuration
process, so your changes will not have the desired effect.</p>
<div class="section" id="mathjax-and-greasemonkey">
<h2>MathJax and GreaseMonkey<a class="headerlink" href="#mathjax-and-greasemonkey" title="Permalink to this headline">¶</a></h2>
<p>You can use techniques like the ones discussed above to good effect in
GreaseMonkey scripts. There are GreaseMonkey work-alikes for all the
major browsers:</p>
<ul class="simple">
<li>Firefox: <a class="reference external" href="http://addons.mozilla.org/firefox/addon/748">GreaseMonkey</a></li>
<li>Safari: <a class="reference external" href="http://8-p.info/greasekit/">GreaseKit</a> (also requires <a class="reference external" href="http://www.culater.net/software/SIMBL/SIMBL.php">SIMBL</a>)</li>
<li>Opera: Built-in (<a class="reference external" href="http://www.ghacks.net/2008/08/10/greasemonkey-in-opera/">instructions</a>)</li>
<li>Internet Explorer: <a class="reference external" href="http://www.ie7pro.com/">IEPro7</a></li>
<li>Chrome: Built-in for recent releases</li>
</ul>
<p>Note, however, that most browsers don’t allow you to insert a script
that loads a <tt class="docutils literal"><span class="pre">file://</span></tt> URL into a page that comes from the web (for
security reasons). That means that you can’t have your GreaseMonkey
script load a local copy of MathJax, so you have to refer to a
server-based copy. The MathJax CDN works nicely for this.</p>
<hr class="docutils" />
<p>Here is a script that runs MathJax in any document that contains
MathML (whether its includes MathJax or not). That allows
browsers that don’t have native MathML support to view any web pages
with MathML, even if they say it only works in Forefox and
IE+MathPlayer.</p>
<div class="highlight-javascript"><div class="highlight"><pre><span class="c1">// ==UserScript==</span>
<span class="c1">// @name MathJax MathML</span>
<span class="c1">// @namespace http://www.mathjax.org/</span>
<span class="c1">// @description Insert MathJax into pages containing MathML</span>
<span class="c1">// @include *</span>
<span class="c1">// ==/UserScript==</span>
<span class="k">if</span> <span class="p">((</span><span class="nb">window</span><span class="p">.</span><span class="nx">unsafeWindow</span> <span class="o">==</span> <span class="kc">null</span> <span class="o">?</span> <span class="nb">window</span> <span class="o">:</span> <span class="nx">unsafeWindow</span><span class="p">).</span><span class="nx">MathJax</span> <span class="o">==</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">((</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s2">"math"</span><span class="p">).</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span><span class="p">)</span> <span class="o">||</span>
<span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagNameNS</span> <span class="o">==</span> <span class="kc">null</span> <span class="o">?</span> <span class="kc">false</span> <span class="o">:</span>
<span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagNameNS</span><span class="p">(</span><span class="s2">"http://www.w3.org/1998/Math/MathML"</span><span class="p">,</span><span class="s2">"math"</span><span class="p">).</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span><span class="p">)))</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">script</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s2">"script"</span><span class="p">);</span>
<span class="nx">script</span><span class="p">.</span><span class="nx">src</span> <span class="o">=</span> <span class="s2">"http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML-full"</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">config</span> <span class="o">=</span> <span class="s1">'MathJax.Hub.Startup.onload()'</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">opera</span><span class="p">)</span> <span class="p">{</span><span class="nx">script</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">config</span><span class="p">}</span> <span class="k">else</span> <span class="p">{</span><span class="nx">script</span><span class="p">.</span><span class="nx">text</span> <span class="o">=</span> <span class="nx">config</span><span class="p">}</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s2">"head"</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">script</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
</pre></div>
</div>
<p><strong>Source</strong>: <a class="reference external" href="_static/mathjax_mathml.user.js">mathjax_mathml.user.js</a></p>
<hr class="docutils" />
<p>Here is a script that runs MathJax in Wikipedia pages after first
converting the math images to their original TeX code.</p>
<div class="highlight-javascript"><div class="highlight"><pre><span class="c1">// ==UserScript==</span>
<span class="c1">// @name MathJax in Wikipedia</span>
<span class="c1">// @namespace http://www.mathjax.org/</span>
<span class="c1">// @description Insert MathJax into Wikipedia pages</span>
<span class="c1">// @include http://en.wikipedia.org/wiki/*</span>
<span class="c1">// ==/UserScript==</span>
<span class="k">if</span> <span class="p">((</span><span class="nb">window</span><span class="p">.</span><span class="nx">unsafeWindow</span> <span class="o">==</span> <span class="kc">null</span> <span class="o">?</span> <span class="nb">window</span> <span class="o">:</span> <span class="nx">unsafeWindow</span><span class="p">).</span><span class="nx">MathJax</span> <span class="o">==</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">//</span>
<span class="c1">// Replace the images with MathJax scripts of type math/tex</span>
<span class="c1">//</span>
<span class="kd">var</span> <span class="nx">images</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">'img'</span><span class="p">),</span> <span class="nx">count</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="nx">images</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mi">1</span><span class="p">;</span> <span class="nx">i</span> <span class="o">>=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span><span class="o">--</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">img</span> <span class="o">=</span> <span class="nx">images</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">img</span><span class="p">.</span><span class="nx">className</span> <span class="o">===</span> <span class="s2">"tex"</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">script</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s2">"script"</span><span class="p">);</span> <span class="nx">script</span><span class="p">.</span><span class="nx">type</span> <span class="o">=</span> <span class="s2">"math/tex"</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">opera</span><span class="p">)</span> <span class="p">{</span><span class="nx">script</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">img</span><span class="p">.</span><span class="nx">alt</span><span class="p">}</span> <span class="k">else</span> <span class="p">{</span><span class="nx">script</span><span class="p">.</span><span class="nx">text</span> <span class="o">=</span> <span class="nx">img</span><span class="p">.</span><span class="nx">alt</span><span class="p">}</span>
<span class="nx">img</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">replaceChild</span><span class="p">(</span><span class="nx">script</span><span class="p">,</span><span class="nx">img</span><span class="p">);</span> <span class="nx">count</span><span class="o">++</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">count</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">//</span>
<span class="c1">// Load MathJax and have it process the page</span>
<span class="c1">//</span>
<span class="kd">var</span> <span class="nx">script</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s2">"script"</span><span class="p">);</span>
<span class="nx">script</span><span class="p">.</span><span class="nx">src</span> <span class="o">=</span> <span class="s2">"http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML-full"</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">config</span> <span class="o">=</span> <span class="s1">'MathJax.Hub.Startup.onload()'</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">opera</span><span class="p">)</span> <span class="p">{</span><span class="nx">script</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">config</span><span class="p">}</span> <span class="k">else</span> <span class="p">{</span><span class="nx">script</span><span class="p">.</span><span class="nx">text</span> <span class="o">=</span> <span class="nx">config</span><span class="p">}</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s2">"head"</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">script</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
</pre></div>
</div>
<p><strong>Source</strong>: <a class="reference external" href="_static/mathjax_wikipedia.user.js">mathjax_wikipedia.user.js</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="sphinxsidebar">
<div class="sphinxsidebarwrapper">
<h3><a href="index.html">Table Of Contents</a></h3>
<ul>
<li><a class="reference internal" href="#">Loading MathJax Dynamically</a><ul>
<li><a class="reference internal" href="#mathjax-and-greasemonkey">MathJax and GreaseMonkey</a></li>
</ul>
</li>
</ul>
<h4>Previous topic</h4>
<p class="topless"><a href="signals.html"
title="previous chapter">Using Signals</a></p>
<h4>Next topic</h4>
<p class="topless"><a href="typeset.html"
title="next chapter">Modifying Math on the Page</a></p>
<div id="searchbox" style="display: none">
<h3>Quick search</h3>
<form class="search" action="search.html" method="get">
<input type="text" name="q" size="18" />
<input type="submit" value="Go" />
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
</form>
<p class="searchtip" style="font-size: 90%">
Enter search terms or a module, class or function name.
</p>
</div>
<script type="text/javascript">$('#searchbox').show(0);</script>
</div>
</div>
<div class="clearer"></div>
</div>
<div class="related">
<h3>Navigation</h3>
<ul>
<li class="right" style="margin-right: 10px">
<a href="genindex.html" title="General Index"
>index</a></li>
<li class="right" >
<a href="typeset.html" title="Modifying Math on the Page"
>next</a> |</li>
<li class="right" >
<a href="signals.html" title="Using Signals"
>previous</a> |</li>
<li><a href="index.html">MathJax v1.1 documentation</a> »</li>
</ul>
</div>
<div class="footer">
© Copyright 2011 Design Science.
Created using <a href="http://sphinx.pocoo.org/">Sphinx</a> 1.0.7.
</div>
</body>
</html>
|
