Блог

Главная - Вопросы по программированию - API буфера обмена — копирование тега привязки href URL возвращает неопределенный текст записи?

API буфера обмена — копирование тега привязки href URL возвращает неопределенный текст записи?

#javascript

#javascript

Вопрос:

Я работаю с API буфера обмена, чтобы скопировать URL привязки при нажатии на этот элемент. Тем не менее, я получаю Uncaught TypeError: Cannot read properties of undefined (reading 'writeText') undefined .

Как я могу это решить?

Я хочу скопировать внутренний текст HREF в https://google.nl URL-адрес по щелчку мыши.

 const sharePostLink = document.querySelector('[aria-role="share-link"]');

if (sharePostLink) {
    sharePostLink.addEventListener('click', (e) => {
        e.preventDefault();

        navigator.clipboard
            .writeText(sharePostLink)
            .then(() => {
                console.log(
                    `"${sharePostLink}" was copied to your clipboard.`
                );
            })
            .catch((err) => {
                console.error(
                    `Error copying text to clipboard: ${err}`
                );
            });
    });
}

И HTML:

         <article class="card" aria-role-card="light">
            <div class="card__body card__body--downloadable">
                <header class="card__header">
                    <h4 class="card__title">Camp</h4>
                </header>

                <div class="card__actions" aria-role="card-actions">
                    <ul class="card__socials" aria-role="card-socials">
                        <li class="card__item">
                            <a href="https://google.nl" class="card__link" aria-role="share-link">
                                <span class="card__icon card__icon--link"></span>
                            </a>
                        </li>
                        <li class="card__item">
                            <a href="!#" class="card__link">
                                <span class="card__icon card__icon--facebook"></span>
                            </a>
                        </li>
                        <li class="card__item">
                            <a href="!#" class="card__link">
                                <span class="card__icon card__icon--twitter"></span>
                            </a>
                        </li>
                        <li class="card__item">
                            <a href="!#" class="card__link">
                                <span class="card__icon card__icon--linkedin"></span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </article>

Комментарии:

1. Какой браузер вы используете? Является ли ваш сайт https? Я считаю, что для этого объекта требуется защищенный источник (HTTPS или localhost), если да, предоставили ли вы разрешение для этого интерфейса? — Я читаю между строк.

2. @Adrian работает с локальным хостом с LocalWP и HTTP. Я работаю в Chrome

3. API буфера обмена доступен только в защищенном контексте (https).

4. @Christopher oke полезно знать!

Метки: