Safari 7.0.1とonsubmit

Safari（7.0.1/Mac OS）のため、私は単純なJavaScriptの問題に苦しんでいます。私はフォームを提出し、ページの読み込み中にアイコンを表示したい。Safari 7.0.1とonsubmit

javascript自体とは関係ありませんが、onsubmitの動作にはより多くのものがあります（関数の外に移動すると、 "submit"時間ではなくページを読み込むときに期待される仕事をします）。

これは私のコードです（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>

出典

2014-01-17 Tom - Lunabee.com

'onsubmit'イベントを削除し、その代わりに入力上の' onclick'イベントでloadLoader（）を呼び出すと、おそらく 'onclick'はすべてのブラウザでより多くサポートされており、論理的にフォームが提出されていますか？ –

helloFélix、私は "submit"型の入力のonclickとまったく同じ振る舞いをしています。 –

面白いです。このページhttp://www.quirksmode.org/dom/events/に従って、送信イベントはサファリによって完全にサポートされるべきです。 –

申し訳ありませんあなたの投稿が私の評判のためにコメントできません。あなたは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>

出典

2014-12-18 08:46:29

-1

Buttonのidと、onClickという属性を呼び出すことができます。

オプション1：形式でみましょう、最初にメソッド

<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>

出典

2016-03-09 06:51:45

を提出してください：同上

<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により、ボタンのClickイベント：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付きあなたがフォームを提出するときに起こっていることについて話してください。ブラウザでonsubmitメソッドを呼び出した後、POSTリクエストを準備してサーバーに送信します。 POSTのリクエストブラウザ新しいHTMLページを取得すると、ブラウザが古いページをアンロードして新しいページを読み込みます。

プロセス全体が速すぎると、loadingImageは表示されません。しかし、サーバがPOSTのリクエストをゆっくりと処理すると、ブラウザが新しいページをレンダリングする前に、古いページに画像を読み込むようになります。

console.logを追加し、コンソールフラグをオンにしてログのクリーニングを防止すると、'show loader'が表示されますが、ブラウザが新しいページを読み込んで処理しているため、画像は表示されません。

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

出典

2016-03-09 22:27:54

Safari 7.0.1とonsubmit

答えて

関連する問題