2

次の古い学校のスニペットをalertify.js0.3.8に変換しようとしています。

window.doPrompt = function() {
  var str;
  do str = prompt("Enter your name");
  while (str === "" && (alert("Can't be empty!") || true));
  if (str) document.getElementsByTagName("body")[0].innerHTML += ("<pre>Your name is: " + str + "</pre>");
}

上記のJSFiddle

これは私が最初に試したものです：

window.doPrompt = function() {
  alertify.prompt(
    "Enter your name", 
    function(confirmed, str) { 
      if (confirmed) { 
        if (str.length === 0) {
          alertify.alert(
            "Can't be empty!", 
            function() { doPrompt(); }
          ); 
        } else {
          document.getElementsByTagName("body")[0].innerHTML += ("<pre>Your name is: " + str + "</pre>");
        }
      }
    }
  );
}

上記のJSFiddle

意図したとおりに動作していません。たとえば、Firefox 19では、キーボードを使用してプロンプトを空に送信すると、「エラー」アラートはごく短時間しか表示されず、その後自動的に消えます。これは、以前の動作とは異なります。

各alertify呼び出しの前後window.setTimeoutにタイムアウトを設定して、に呼び出しを挿入することにより、再帰を中断してみました。0それは役に立たなかった。

代わりに使用できる同様のAPIを備えた代替JavaScriptライブラリを推奨していただければ問題ありません（もちろん、この問題はありません）。

4

1 に答える 1

2

では問題ないようですalertify.jsが、Firefoxでは問題があります。（ソースによると、ダイアログアニメーションで使用されている）に関連するバグtransitionendを検索すると、発生している問題の潜在的な候補がいくつか表示されます（特に、「複数のトランジションがある場合にトランジションエンドイベントが発生しない」）。これはあなたが経験していることと一致しています-他のダイアログがまだ配置されている間にダイアログを表示しようとすると（つまり、前のダイアログがまだ遷移の途中にある場合）、物事は壊れます。

ただし、回避策を提供することはできます。それはきれいではありませんが、仕事を成し遂げます。しかし、最初に、私がすべてのブラウザで見つけた無関係の問題：

  1. body;に何かを追加すると、ライブラリが混乱するようです。div代わりに「ターゲット」を使用すると、問題が解決します。

    <div id="target"></div>
...
document.getElementById("target").innerHTML += ("<pre>Your name is: " + str + "</pre>");

  2. アラートを表示するときとプロンプトを再表示するときの両方で、setTimeout提案どおりに使用する必要があります。ただし、ここでの問題はにあるため、タイムアウトをゼロにするだけでは不十分ですtransitionend。前のダイアログが非表示を終了するのに十分な高さの値を設定すると、問題が修正されます。

            setTimeout(function() {
          alertify.alert(
            "Can't be empty!", 
            function() {
                setTimeout(function() {
                    doPrompt(); 
                }, 500);
            }
          ); 
        }, 500);

    （値が十分に高くない場合、Firefoxで壊れ続けるだけでなく、Chromeのような一度動作していたブラウザも壊れますので、それを覚えておいてください）

実例。Firefox 19.0、Chrome 25、Safari4.0.4で正常にテストされました。

于 2013-03-02T07:24:26.900 に答える