javascript - 在外部库中调用函数时出现引用错误-仅限Firefox

我正在使用Geoplugin来检索有关发送表单以订阅新闻通讯的用户的数据。

在Chrome和Safari上运行良好。另一方面，Firefox产生ReferenceError: geoplugin_request is not defined

为什么Firefox的行为有所不同？我如何解决它？
谢谢

的HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WEHMIX</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/stile.css">
    <!--<script src="http://www.geoplugin.net/javascript.gp"></script>-->
    <script src="http://www.geoplugin.net/javascript.gp"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-10 col-sm-offset-1 text-center">
                <h1 class="title-box">wehmix</h1>
                <h3>Rimani in contatto con il progetto wehmix.</h3>
                <p>Iscriviti alla newsletter per essere aggiornato in anteprima sull'evoluzione del progetto, per partecipare agli incontri di presentazione e far parte della ricerca.</p>
                <form id="contatto" method="post" action="https://anypoint.mulesoft.com/apiplatform/proxy/https://mocksvc.mulesoft.com/mocks/4790cf82-7131-46a1-b427-562e4e8f22ce/newsletter/subscriber">
                    <input id="email" name="email" type="text" placeholder="Inserisci la tua e-mail" value="">
                    <input type="submit" value="Iscriviti">
                </form>
                <p class="feedback"><i class="glyphicon glyphicon-thumbs-up"></i></p>
            </div>
        </div>
    </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>

var request;

$("#contatto").submit(function(e){
    // Abort any pending request
    if (request) {
        request.abort();
    }

    // Retrieve email
    var $email = $('#email').val();

    // Take data available from navigator object
    var $ip = geoplugin_request();
    var $browserCodeName = navigator.appCodeName;
    var $browserName = navigator.appName;
    var $browserVersion = navigator.appVersion;
    var $language = navigator.language;
    var $platform = navigator.platform;
    var $city = geoplugin_city();
    var $region = geoplugin_regionName();
    var $country = geoplugin_countryName();

    // Prova stampa valori geocode
    console.log($city);
    console.log($region);
    console.log($country);

    // Create the JSON structure
    var user = {};
    user['user_agent'] = {};

    user.email_address = $email;
    user.user_agent.ip = $ip;
    user.user_agent.browserCodeName = $browserCodeName;
    user.user_agent.browserName = $browserName;
    user.user_agent.browserVersion = $browserVersion;
    user.user_agent.language = $language;
    user.user_agent.platform = $platform;
    user.user_agent.city = $city;
    user.user_agent.region = $region;
    user.user_agent.country = $country;

    var finalJson = JSON.stringify(user);

    console.log(finalJson);

    // setup some local variables
    var $form = $(this);

    // Let's select and cache all the fields
    var $inputs = $form.find("input");

    // Serialize the data in the form
    //var serializedData = $form.serialize();

    // Let's disable the inputs for the duration of the Ajax request.
    // Note: we disable elements AFTER the form data has been serialized.
    // Disabled form elements will not be serialized.
    $inputs.prop("disabled", true);

    // Fire off the request to /form.php
    request = $.ajax({
        type: "post",
        url: "https://anypoint.mulesoft.com/apiplatform/proxy/https://mocksvc.mulesoft.com/mocks/4790cf82-7131-46a1-b427-562e4e8f22ce/newsletter/subscriber",
        contentType: "application/json; charset=utf-8",
        data: finalJson
    });

    // Callback handler that will be called on success
    request.done(function (response, textStatus, jqXHR){
        // Log a message to the console
        console.log("Hooray, it worked!");
        $('.feedback').text('Iscrizione completata con successo!');
    });

    // Callback handler that will be called on failure
    request.fail(function (jqXHR, textStatus, errorThrown){
        // Log the error to the console
        console.error("The following error occurred: "+textStatus, errorThrown);
    });

    // Callback handler that will be called regardless
    // if the request failed or succeeded
    request.always(function () {
        // Reenable the inputs
        $inputs.prop("disabled", false);
    });

    // Prevent default posting of form
    e.preventDefault();
});

最佳答案

可能存在比赛条件。您将同时加载geoplugin脚本和您自己的事件处理程序。如果geoplugin需要比您自己的脚本加载更长的时间，并且您提交表单的速度足够快，则可能是全局geoplugin_request尚不可用。脚本需要这么多时间似乎很奇怪，但是在本地有自己的脚本，而在其他地方都可以使用它。

您的标签说您使用的是jQuery，因此您可以通过$.getScript()函数加载geoplugin，并在作为第二个参数给出的匿名函数中注册点击处理程序：

$.getScript("http://www.geoplugin.net/javascript.gp", function () {
  $("#contatto").submit(function(e){ ... }
});

一个更优雅的解决方案是使用处理诸如RequireJs之类依赖项的模块加载器工具。

关于javascript - 在外部库中调用函数时出现引用错误-仅限Firefox，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37653322/