javascript - 使用 javascript 包含字体会阻止其他 javascript

Question

我正在用这段代码加载字体。

<script type="text/javascript">
    (function () {
        var path = '//easy.myfonts.net/v2/js?sid=84112(font-family=John+Sans+Text)&sid=84097(font-family=John+Sans+Lite)&key=Ff0uyBryqy',
                  protocol = ('https:' == document.location.protocol ? 'https:' : 'http:'),
                  trial = document.createElement('script');
        trial.type = 'text/javascript';
        trial.src = protocol + path;
        trial.async = true;
        var head = document.getElementsByTagName("head")[0];
        head.appendChild(trial);
     })();
</script>

它加载了字体，但我的表单 javascript 不起作用。

Nette.addEvent(window, 'load', function () {
        for (var i = 0; i < document.forms.length; i++) {
                Nette.initForm(document.forms[i]);
        }
});

但是当我在 head.appendChild 之后放置警报时，它工作得很好。

我尝试将 async 设置为 false 或完全删除它，但结果仍然相同。

有一个没有字体的头部片段

<script></script>
<script src="/nette/www/js/modernizr.custom.js"></script>
<link media="screen, projection" href="/nette/www/css/settings-live-form-validation.css" rel="stylesheet">

这是包含字体的头部片段:

  <script type="text/javascript" async="" src="http://easy.myfonts.net/v2/get?U4EE9fOUltFonWL1AupSkAm2&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cCo6Ly8qL3YyL2dldD9VNEVFOWZPVWx0Rm9uV0wxQXVwU2tBbTIiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE0MzQ0NDU0NjB9fX1dfQ__&Signature=PM~gjifl7dOhJzXBzdSjLJhBZgxxBF9YmiNjwaS1xqJInBexm4qW2Fx1Vo-0p0S5gYxgGiFTIVzR57DDJCwHNYY39dY9mv8YlluqypJSXGU0dgP8WrIwg1N2SuN8ZcFhmmfVzdK2y9iOhUHs8~R93fXAZ~WNzTYnPcaVxOWs3SWLkCJfZjGSyptYs~94~d8d1LhJFKrvboswFdAIaLsFbw73Xd624rEHqGFhhwcQ-nx4J4zD2GgOyB4RpGukiaALP-SDY775uRVphvX8L0rp4Pp5PQEiuSMW3tMhjhG~qTuqhoAoe8sSQqEVau2eNgPeWtAeDSLdUbl4rKEwlNO4cg__&Key-Pair-Id=APKAJN6QFZEE4BZCL6XQ"></script>
    <script></script>
    <script src="/nette/www/js/modernizr.custom.js"></script>
    <link media="screen, projection" href="/nette/www/css/settings-live-form-validation.css" rel="stylesheet">
    <script type="text/javascript"></script> //fonts includer
    <script type="text/javascript" async="" src="http://easy.myfonts.net/v2/js?sid=84112(font-family=John+Sans+Text)&sid=84097(font-family=John+Sans+Lite)&key=Ff0uyBryqy"></script>
    <style type="text/css"></style>
    <link rel="stylesheet" type="text/css" href="http://cdn.myfonts.net/widgets/webfont_preview_bar/webfont_preview_bar.css">

Answer 1

您需要关闭脚本标记。

<script type="text/javascript" async="" src="http://easy.myfonts.net/v2/get?U4EE9fOUltFonWL1AupSkAm2&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cCo6Ly8qL3YyL2dldD9VNEVFOWZPVWx0Rm9uV0wxQXVwU2tBbTIiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE0MzQ0NDU0NjB9fX1dfQ__&Signature=PM~gjifl7dOhJzXBzdSjLJhBZgxxBF9YmiNjwaS1xqJInBexm4qW2Fx1Vo-0p0S5gYxgGiFTIVzR57DDJCwHNYY39dY9mv8YlluqypJSXGU0dgP8WrIwg1N2SuN8ZcFhmmfVzdK2y9iOhUHs8~R93fXAZ~WNzTYnPcaVxOWs3SWLkCJfZjGSyptYs~94~d8d1LhJFKrvboswFdAIaLsFbw73Xd624rEHqGFhhwcQ-nx4J4zD2GgOyB4RpGukiaALP-SDY775uRVphvX8L0rp4Pp5PQEiuSMW3tMhjhG~qTuqhoAoe8sSQqEVau2eNgPeWtAeDSLdUbl4rKEwlNO4cg__&Key-Pair-Id=APKAJN6QFZEE4BZCL6XQ"></script>
<script src="/nette/www/js/modernizr.custom.js"></script>
<link media="screen, projection" href="/nette/www/css/settings-live-form-validation.css" rel="stylesheet">
<script type="text/javascript" async="" src="http://easy.myfonts.net/v2/js?sid=84112(font-family=John+Sans+Text)&sid=84097(font-family=John+Sans+Lite)&key=Ff0uyBryqy"></script>

您遇到了一大堆与使用<script>定义脚本相关的问题。但随后不使用 </script> 关闭它们.