Как заставить сафари поверить в то, что вызов clipboard api делается по нажатию на кнопку если в процессе выполняется асинхронный вызов?

Ссылка скопирована
1 ответ

https://codepen.io/FragsterAt/pen/WNmgreX

Если в сафари нажать на кнопку, delay то в девтулзах видно, что после 1000мс наступает ошибка. При этом в других браузерах ошибки нет ни при какой задержке (кажется).

Самое обидное, что если дернуть api (это делает нажатие на кнопку api), то при любой задержке сразу же идет ошибка.

Реальная задача состоит в том, чтобы дернуть api и поместить результат работы в буфер обмена.

Если нажать кнопку delay + api, то, вроде, все отрабатывает. Но если вызов api будет больше секунды (кнопка delay + slow api) то все равно падает.

Помогите решить.

Дополнительно:

странная конечно задача, но да ладно, используй в своей ситуации цикл for of

  • szQocks, третья кнопка работает, но что будет, если вызов апи будет дольше секунды?
    Вопрос не в том, что я не знаю, как сделать цbкл с await а в том, что у меня нет safari, но в нем (и только в нем) если после нажатия на кнопку проходит больше секунды (кнопка delay) или идет вызов api (кнопка api), раобта с буфером обмена падает.

    Можно его обмануть запустив параллельно вызову api таймер, но как решить проблему, если вызов api дольше секунды?

  • Антон Антон, всё будет чётко Антон Антон
  • szQocks, добавил кнопку с "долгим api", называется delay + slow api. так вот - она не работает
  • Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Игорь Волков Ответ

    Для того чтобы заставить Safari поверить в то, что вызов Clipboard API делается по нажатию на кнопку, даже если в процессе выполняется асинхронный вызов, можно воспользоваться следующим подходом.

    Сначала необходимо добавить атрибут `disabled` к кнопке, которая будет вызывать асинхронный вызов. Это предотвратит возможность повторного нажатия на кнопку до завершения вызова. Далее, после завершения асинхронного вызова, нужно удалить атрибут `disabled` и сразу же выполнить вызов Clipboard API.

    Пример кода на JavaScript:

    const button = document.getElementById('myButton');
     
    button.addEventListener('click', async () => {
      button.disabled = true;
     
      try {
        // Выполняем асинхронный вызов
        await someAsyncFunction();
     
        // После завершения вызова, удаляем атрибут disabled и вызываем Clipboard API
        button.disabled = false;
     
        // Вызываем Clipboard API
        await navigator.clipboard.writeText('Текст для копирования');
     
        console.log('Текст скопирован в буфер обмена');
      } catch (error) {
        console.error('Произошла ошибка:', error);
      }
    });

    const button = document.getElementById('myButton'); button.addEventListener('click', async () => { button.disabled = true; try { // Выполняем асинхронный вызов await someAsyncFunction(); // После завершения вызова, удаляем атрибут disabled и вызываем Clipboard API button.disabled = false; // Вызываем Clipboard API await navigator.clipboard.writeText('Текст для копирования'); console.log('Текст скопирован в буфер обмена'); } catch (error) { console.error('Произошла ошибка:', error); } });

    Таким образом, при нажатии на кнопку, сначала она становится неактивной, затем выполняется асинхронный вызов, после его завершения кнопка становится активной и происходит копирование текста в буфер обмена. Такой подход позволит убедить Safari в правильной последовательности действий и избежать возможных проблем с асинхронным вызовом.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно