получение содержимого буфера обмена в виде строковой переменной - PullRequest
Новая
       10

получение содержимого буфера обмена в виде строковой переменной

5 голосов
/ 11 января 2020

Попытка получить содержимое буфера обмена в виде строковой переменной (например, копируется URL страницы);

Приведенный ниже код возвращает undefined в консоли. 

function get_clip(){
	navigator.clipboard.readText().then(text => {return text;})
	.catch(err => {console.error('Failed to read clipboard contents: ', err);});
}

var str = get_clip();
console.log(str);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Ответы [ 3 ]

4 голосов
/ 12 января 2020

Вы не можете получить значение буфера обмена, как это, по двум причинам:

  1. ваша функция асинхронная, поэтому при вызове функции не вызывается return, ваше значение равно не определено. Вы можете использовать функцию callBack, переданную в параметрах get_clip fun c, чтобы выполнить свою работу с вашим результатом.
  2. вы не можете вызывать буфер обмена программно из соображений безопасности, навигатор не позволяет вам получить доступ к буферу обмена без действие пользователя с веб-страницей. Поэтому только при нажатии кнопки вы получаете доступ к буферу обмена пользователя. 

function get_clip(callBack) {
  navigator.clipboard.readText()
    .then(text => {
      callBack(text);
    })
    .catch(err => {
      console.error('Failed to read clipboard contents: ', err);
    });
}


let callback = function(str) {
  console.log(str);
};

document.querySelector('#showClipboard').addEventListener('click', function() {
  get_clip(callback);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="showClipboard">click me to show clipboard</button>
1 голос
/ 12 января 2020

Просто чтобы дать другую форму ответа, включая функцию async: 

function get_clip(){

    navigator.clipboard.readText()
    .then(text => {
        console.log('Pasted content: ', text);
    })
    .catch(err => {
        console.error('Failed to read clipboard contents: ', err);
    });

}

get_clip();

И использование функции async: 

async function get_clip(){
    try {
        return await navigator.clipboard.readText();
    } catch (err) {
        console.error('Failed to read clipboard contents: ', err);
    }
}

get_clip().then(str => console.log(str));
1 голос
/ 12 января 2020

Это потому, что для выполнения get_clip() требуется время, для чтения буфера обмена требуется время (представьте, что в буфере обмена может быть огромное количество текста), и механизм JavaScript не останавливается, а вместо этого выполняет Следующая строка и журналы «неопределено».

Асинхронный JavaScript: (https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Introducing)

Итак, вы можете сказать get_clip(), что делать, когда закончите читать буфер обмена. Вы можете сказать get_clip(), выполнить эту функцию aCallback примерно так: 

var str = get_clip(aCallback);

Попробуйте этот код: 

function get_clip(callback) {
    navigator.clipboard.readText()
        .then(text => { return callback(text); })
        .catch(err => {
            console.error('Failed to read clipboard contents: ', err);
        });
}

var str = get_clip(aCallback);

function aCallback(text) {
    console.log(text);
}
...