2016-06-19 3 views
0

내 웹 페이지의 <head> 요소에 MathJax 권장 명령을 붙여 넣어 MathJax를 성공적으로로드하고 구성했습니다. MathJax는 내 웹 페이지의 <body>에서 LaTex 렌더링에 훌륭한 역할을합니다.MathJax가 정의되지 않았습니다.

내 문제는 <body> 요소의 맨 끝에 실행되는 자바 스크립트로 MathJax 개체에 액세스하는 것입니다. 예를 들어 아래 코드는 undefined을 콘솔에 반환합니다. 이것은 내게 혼란 스럽습니다. <head> 요소의 내 명령이 어디서나 액세스 할 수있는 전역 변수로 MathJax을 만들지 않았습니까? 여기

<script type="text/x-mathjax-config"> 
    MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}}); 
</script> 
<script type="text/javascript" async 
    src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"> 
</script> 
<body>에서 코드의 관련 섹션 : 여기 code screenshot

<head> 요소에서 코드의 관련 섹션 : 여기

내 코드의 스크린 샷입니다 요소 :

<h1 class="header"> 
    If $ax^2+bx+c=0$, then $x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}$. 
</h1> 

<script type="text/javascript" > 
    console.log(window.MathJax); 
</script> 
+0

스크립트에 포함 된 순서가 잘못되었습니다. 참조하기 전에 MathJax 스크립트를 포함해야합니다. –

+0

@EvanTrimboli, 고맙습니다. 그러나 문제는 ''요소의 스크립트 순서가 아니라 25:27 행의 스크립트와 관련이 있습니다. (나는 ''요소에있는 스크립트의 순서가 더 반대가된다는 것에 동의하지만, [http://docs.mathjax.org/ko/latest/start.html]에서 바로 그대로 복사했습니다. (MathJax.org), 그들은 잘 작동하는 것 같습니다.) – Patch

+0

미래의 노트 : cdn.mathjax.org의 수명이 다해 가고 있습니다. https://www.mathjax.org/cdn-shutting- 아래로/마이그레이션 팁. –

답변

2

MathJax.jsasync attribute으로로드합니다. 따라서 브라우저는 스크립트가로드 될 때까지 렌더링을 차단하지 않고 대신 페이지를 계속 처리합니다. 이제 MathJax.js이 페치되고로드되는 것과 브라우저의 파서가 script 태그가 페이지 아래로 내려가는 경주가 있습니다. 필연적으로, 파서는 MathJax.js이 로딩을 완료하기 전에 로그를 얻어서 실행합니다. 따라서 글로벌 MathJax 개체가 없습니다.

async을 제거하면 나머지 페이지를 구문 분석하기 전에 브라우저가 먼저 MathJax.js을 실행하므로 console.log은 의미있는 것을 제공합니다. 마찬가지로 async 속성을 지원하지 않는 구형 브라우저에서는 결과를 얻을 수 있습니다.)

그러나 MathJax는 그 자체로 매우 비동기 적이므로 (추가 구성 요소, 구성 등을로드하는 중입니다) synchronize your code with Matax's APIs.

+0

@PeterSmith, 대단히 감사합니다! – Patch

관련 문제