Safari 7.0.1 и при отправке

Из-за Safari (7.0.1/Mac OS) я борюсь с простой проблемой Javascript. Я отправляю форму и хочу отображать значок во время загрузки страницы.

Из того, что я вижу, это связано не с самим javascript, а скорее с поведением при отправке (если я перемещаю его за пределы функции, он выполняет ожидаемую работу при загрузке страницы, а не во время «отправки»).

Это мой код (отлично работает в 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>

javascript html safari onsubmit
person Tom - Lunabee.com    schedule 17.01.2014    source источник
comment
если вы удалите событие onsubmit и вместо этого вызовете loadLoader() в событии onclick на входе. может быть, onclick больше поддерживается всеми браузерами и логически приводит к отправке формы?   -  person Félix Adriyel Gagnon-Grenier    schedule 18.01.2014
comment
привет, Феликс, у меня точно такое же поведение при нажатии на ввод типа submit.   -  person Tom - Lunabee.com    schedule 19.01.2014
comment
это забавно. в соответствии с этой страницей quirksmode.org/dom/events событие отправки должно полностью поддерживаться сафари.   -  person Félix Adriyel Gagnon-Grenier    schedule 19.01.2014
comment
Верно. Я только что видел, что на моем iPad Air поведение ожидаемое. Похоже на ошибку в Safari Mac 7.0.1...   -  person Tom - Lunabee.com    schedule 20.01.2014
comment
Все еще не работает в Safari 7.0.5   -  person Carlos Fontes    schedule 05.12.2014
comment
Попробуйте эту ссылку stackoverflow.com/ вопросов/9573333/ Это может вам помочь   -  person Shashikala    schedule 09.03.2016

Ответы (3)


arrow_upward
1
arrow_downward

Извините, я не могу комментировать ваш пост из-за моей репутации. Поскольку ваш код 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>
person Manuel B.    schedule 18.12.2014

arrow_upward
0
arrow_downward

Во-первых, давайте поговорим о том, что происходит, когда вы отправляете форму. Браузер вызывает метод onsubmit, после чего начинает готовить POST запрос и отправляет его на сервер. После POST запроса браузер получает новую html-страницу, браузер выгружает старую страницу и загружает новую.

Вы не увидите loadingImage, если весь процесс будет слишком быстрым. Но если сервер обрабатывает POST запрос медленно, вы увидите загрузку изображения на старой странице до того, как браузер отобразит новую страницу.

Вы можете попробовать добавить console.log и включить флаг консоли, чтобы предотвратить очистку журналов, и вы увидите 'show loader', но вы не увидите изображение, потому что браузер загружает новую страницу и обрабатывает ее.

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

arrow_upward
-1
arrow_downward

Вы можете вызвать функцию onClick по атрибуту кнопки и по идентификатору кнопки.

вариант 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: событие нажатия кнопки по идентификатору

<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>
person Nirav Patel    schedule 09.03.2016