Question

由于Safari（7.0.1 / Mac OS），我正在努力解决一个简单的Javascript问题。我提交了一个表单，我希望在页面加载期间显示一个图标。

从我所看到的，它与javascript本身无关，而是与onsubmit行为有关（如果我将它移到函数外部，它在加载页面而不是“提交”时间时执行预期的工作）。

这是我的代码（在Chrome和Firefox上完美运行）。有什么想法吗？

<html>
<body>    
  <img id="loadingImage" src="assets/images/loadingIcon.png" style="display:none;"/>
  <form method="POST" action="js.php" onsubmit="loadLoader()">
    <input type="submit" value="Go"/>   
  </form>

<script  type="text/javascript">
function loadLoader(){
    document.getElementById('loadingImage').style.display = 'block';
    return true;
}
</script>
</body>
</html>

Answer 1

抱歉，由于我的声誉，我无法评论您的帖子。由于JS代码是非阻塞的，我试图将其移到头部并在函数调用之前添加javascript。我在Safari 7.0.1中进行了测试，但它确实有效。

<html>
<head>
    <script type="text/javascript">
        function loadLoader() {
            alert('loadLoader called');
            document.getElementById('loadingImage').style.display = 'block';
            return true;
        }
    </script>
</head>

<body>
    <img id="loadingImage" src="assets/images/loadingIcon.png" style="display:none;" />
    <form method="POST" action="js.php" onsubmit="javascript:loadLoader()">
        <input type="submit" value="Go" />
    </form>
</body>
</html>

Answer 2

首先，让我们谈谈您提交表单时发生的事情。浏览器调用onsubmit方法，然后开始准备POST请求并将其发送到服务器。在POST请求浏览器获取新的html页面后，浏览器卸载旧页面并加载新页面。

如果整个过程太快，你就不会看到loadingImage。但是，如果服务器缓慢处理POST请求，您将看到在浏览器呈现新页面之前在旧页面上加载图像。

您可以尝试添加console.log并打开控制台标记以防止清除日志，您将看到'show loader'，但您将看不到图像，因为浏览器已加载新页面并处理它

function loadLoader(){
    console.log('show loader');
    document.getElementById('loadingImage').style.display = 'block';
    return true;
}

Answer 3

您可以调用Button的函数onClick属性和按钮的Id。

选项1：使用OnClick属性

<html>
<body>    
  <img id="loadingImage" src="assets/images/loadingIcon.png" style="display:none;"/>
  <form method="POST" action="js.php">
    <input type="submit" value="Go" onclick="loadLoader()"/>   
  </form>

<script  type="text/javascript">
function loadLoader(){
    document.getElementById('loadingImage').style.display = 'block';
    return true;
}
</script>
</body>
</html>

选项2：按Id的按钮点击事件

<html>
<body>    
  <img id="loadingImage" src="assets/images/loadingIcon.png" style="display:none;"/>
  <form method="POST" action="js.php">
    <input id="btnsubmit" type="submit" value="Go"/>   
  </form>

<script  type="text/javascript">
$("#btnsubmit").click(function() {
    document.getElementById('loadingImage').style.display = 'block';
    return true;
});
</script>
</body>
</html>

选项3：按表格提交方法

<html>
<body>    
  <img id="loadingImage" src="assets/images/loadingIcon.png" style="display:none;"/>
  <form method="POST" action="js.php">
    <input id="btnsubmit" type="submit" value="Go"/>   
  </form>

<script  type="text/javascript">
$('form').submit(function() {
    document.getElementById('loadingImage').style.display = 'block';
    return true;
});
</script>
</body>
</html>

Safari 7.0.1和onsubmit

3 个答案: