Подтвердить что ты не робот

Остановить выполнение страницы, как функция alert()

Когда я пишу alert('Hello'), выполнение страницы останавливается и ждет одобрения для продолжения.

У меня есть настройка div для отображения в качестве фальшивого оповещения, используя HTML - эта кнопка div имеет кнопку "ОК".

Я хочу, чтобы страница остановила свое выполнение (точно так же, как и предупреждение), пока пользователь не нажмет кнопку "ОК".

Возможно ли это?

4b9b3361

Ответ 1

Вы не можете. Только специальные встроенные модули могут это сделать. Некоторое время существовал специальный встроенный showModalDialog, который позволял вам указывать URI для контента и, таким образом, настраивать его, но он никогда не был широко поддерживается и теперь не рекомендуется даже браузерам, которые когда-то поддерживали его.

Вместо этого сделайте свою текущую функцию оповещения, которая использует div принять обратный вызов для того, когда предупреждение закрыто (или вернуть обещание, которое было установлено при его закрытии), чтобы вы могли продолжить обработку.

Так, например, если ваш код использовал alert и работал следующим образом:

function foo() {
    var x;

    x = doSomething();
    alert("Alert! Alert!");
    doSomethingAfterTheAlertIsCleared(x);
    doAnotherThingAfterward();
}

... вы измените его на:

function foo() {
    var x;

    x = doSomething();
    fakeAlert("Alert! Alert!", function() {
        doSomethingAfterTheAlertIsCleared(x);
        doAnotherThingAfterward();
    });
}

Обратите внимание, что теперь весь код, следующий за предупреждением, находится в функции, ссылка на которую мы передаем в fakeAlert. Функция foo возвращается, пока фальшивое предупреждение все еще отображается, но в конечном итоге пользователь отклоняет фальшивое предупреждение и вызывается наш обратный вызов. Обратите внимание, что наш код обратного вызова имеет доступ к местным жильцам в вызове foo, который мы обрабатывали, потому что наш обратный вызов является закрытием (не беспокойтесь, если это довольно новый и/или таинственный термин, закрытия не сложны).

Конечно, если единственное, что следует за предупреждением - это единственный вызов функции, который не принимает никаких аргументов, мы могли бы просто передать эту ссылку на функцию напрямую. Например, это:

function foo() {
    doSomething();
    alert("Alert! Alert!");
    doSomethingAfterTheAlertIsCleared();
}

становится:

function foo() {
    doSomething();
    fakeAlert("Alert! Alert!", doSomethingAfterTheAlertIsCleared);
}

(Обратите внимание, что после doSomethingAfterTheAlertIsCleared нет () - мы имеем в виду объект функции, а не вызываем функцию; fakeAlert будет вызывать его.)

В случае, если вы не знаете, как fakeAlert вызовет обратный вызов, он будет находиться в обработчике событий для пользователя, "закрывающего" div для предупреждения, и вы просто вызываете аргумент для обратного вызова так же, как и с любая другая ссылка на функцию. Поэтому, если fakeAlert получает его как callback, вы вызываете его, говоря callback();.

Ответ 2

Да, возможно,, я сделал неточную и не очень хорошо протестированную демоверсию, которая делает это.

Основная концепция:

  • В этом примере у нас есть метод Login.Try(), который выполняется Метод Login.Proceed(). Login.Proceed() делает запрос AJAX и мы хотел бы дождаться его выполнения, но не хочу связывать какие-либо обработчиков (просто подождите, как это делает window.alert())
  • вместо прямого выполнения функции Login.Proceed, мы используем async() и wait() (например, на С#)
  • когда нам нужно "приостановить" script и ждать чего-то, мы остановимся выполнение метода с использованием функции throw и parse caller для запуска его вторая часть, когда ожидаемый (асинхронный) метод завершил выполнение.

Что осталось вне сферы действия:

  • Чистый код
  • Тестовое решение для разных браузеров
  • Сохранить/Восстановить локальные переменные
  • Не работает для циклов.

Демо:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script>

Login.Try(); // START!! START!! START!!

var Login = {
    Url: "http://xxxx",
    Try: async(this, function (T) {

        console.log('before login');

        //var success = call(this, Login.Proceed); // normal call
        var success = await(this, Login.Proceed);  // that we want!

        console.log('after login');
        console.log('success ' + success);

    }),

    Proceed: function (callback) {
        console.log('before ajax');
        $.ajax({
            url: this.Url,
            context: document.body
        }).done(function () {
            console.log('after ajax');
            callback("role=admin");
        });
    }
}


function async(T, method){
   console.log('before async create');
   return function () { return method.apply(T); };
   console.log('after async create');
};

function await(T, method) {
    var fn = arguments.callee.caller.toString();
    var pos = fn.indexOf('await(');
    var allBeforeAwait = fn.substring(0, pos);

    var pos1 = fn.indexOf('await(');
    pos1 = fn.indexOf(',', pos1) + 1;
    var pos2 = fn.indexOf(')', pos1);
    var cc = fn.substring(pos1, pos2);


    pos = allBeforeAwait.lastIndexOf(';');
    var allBeforeCall = allBeforeAwait.substring(0, pos + 1) + "}";
    var callResult = allBeforeAwait.substring(pos + 1);

    var result = 10;
    var allAfterCall = "("+fn.substring(0, fn.indexOf(")")) + ",V){" + callResult + "V;";
    pos = fn.indexOf(')', pos) + 2;
    allAfterCall = allAfterCall + fn.substring(pos)+")";

    //uncomment to see function parts after split
    //console.debug(allBeforeCall);
    //console.debug(cc);
    //console.debug(allAfterCall);

    method.apply(T, [function (value) {
        console.log('ajax response ' + value);
        eval(allAfterCall).apply(T, [T, value]);
    } ]);

    throw "";
};

</script>

Надеюсь, что эта демонстрация вдохновит вас на некоторые идеи.

Кроме того, вы можете взглянуть на http://blogs.msdn.com/b/rbuckton/archive/2011/08/15/promise-js-2-0-promise-framework-for-javascript.aspx

Ответ 3

Это невозможно, как предупреждение, но вы можете заставить вещи выглядеть как предупреждение.

Например, вы создаете функцию, которая вызывает функции.:) Затем вы создаете функцию с огромным IF.

window.callfunction = function (f, a, b) /* function name, arguments, boolean*/
{
    var handler = window[f];
    if (typeof handler === 'function') {
        handler(a, b);
    } else {
        alert("No function like that mate, sry.");
    }
}

function deleteAfterConfirm(a, b) /* arguments, boolean */
{
    if (b == true) {
        alert("i can delete, confirmed.");
        alert(a);
        return false;
    }
    magicConfirm(a);
}

function magicConfirm(a) {
    /** 
        modals, popovers, etc, anything you want,
    **/
    $("#confirmModal").modal("show");
    /**
        and put the function name to the binding element data
    **/
    $("#returntrue").data("call", arguments.callee.caller.name);
    $("#returntrue").data("arguments", a);
    /** 
        the element like OK button in the alert 
        calls the magicConfirm function caller function 
        with true, which is the deleteAfterConfirm, and 
        because the bool is true, it will alert i can delete... 
    **/
    $("#returntrue").bind("click", function () {
        callfunction($(this).data("call"), $(this).data("arguments"), true);
    });
}


$(document).ready(function () {
    $("#deleteAfterConfirm").on("click", function () {
        deleteAfterConfirm("variable which is needed later.");
    });
});

Итак, теперь вы можете использовать функцию deleteAfterConfirm как функцию с alert() или confirm(), потому что она вызывает другую часть, если она сама.

Не лучший метод, но это может как-то заменить подтверждения и предупреждения для более удобной версии. Это способ фальшивого предупреждения:)

Удачи - R

Ответ 4

Вы можете сделать это с помощью API Promise. Это просто деление вашего кода и размещение некоторых строк в прослушивателе действий. Вот пример кода:

В этом примере есть две кнопки. Нажатие первой кнопки запускает код, а остальная часть кода будет помещена в функцию promise.then.

Код HTML:

<body>
  <button id='startButton' onclick='start();'>Start Button</button>
  <button id='targetButton'>Target Button</button>
</body>

Script Код:

<script>
    function start(){
      console.log('first log'); //put your div displayer code here
      let promise = new Promise(function(resolve, reject) {
          console.log('promise started');
          let targetButton = document.getElementById('targetButton');
          targetButton.addEventListener("click",function(){
            resolve();
          });
      });
      promise.then(function() {
          console.log('second log'); //put the rest of your code
      });
    }
</script>

Вы увидите first log и promise started сразу после запуска кнопки запуска. second log будет отображаться после нажатия целевой кнопки.

Ресурсы для API Promise:

Ответ 5

Я думаю, что это возможно, используя базовый JavaScript. Вы можете установить поддельную кнопку следующим образом:

<button id="fakeButton" value="not" onclick="fakeButtonValChange()">OK</button>

Тогда:

function fakeButtonValChange() {
var fakebuttonval = document.getElementById("fakeButton").value;
document.getElementById("fakebutton").value = 
"clicked"
if (fakebuttonval == "clicked") {
*place stuff to show div here (i'm not good with css and that stuff)*
}

Ответ 6

Использовать модаж 'Bootstap'

Затем удалите кнопку закрытия и отключите скрытие окна модели, используя приведенный ниже код

$('#myModal').modal({backdrop: 'static', keyboard: false})

Свяжите свою функцию и закройте событие кнопкой OK этого модального окна.

Ответ 7

Вы можете использовать следующий код для приостановки выполнения в течение длительного периода времени.

функция PauseExcecution() {
  // Делаем некоторые вещи
  сон (1000);
 // Делаем некоторые вещи...

}

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}