Битрикс, копирование в буфер обмена в локальном приложении
В общем, не получилось у меня научиться писать локальные приложения для Битрикс на NextJs (см. предыдущий вопрос).
Поставил OSPanel и пишу, прям туда с Вебшторма.
Вот в чём вопрос.
Начал делать небольшую форму для подгрузки информации об организации с checko.ru, пока по-минимализму (ввиду моей непродвинутости в программинге), прикрутил бутстрап пятый и меня интересует копирование некоторых данных в буфер обмена (для работников немаловажная функция).
Погуглячил и нашёл подобное решение для бутстрапа - https://onstartup.ru/articles/wordpress/kopirovanie-teksta-v-bufer-obmena-s-razmetkoj-bootstrap-5-i-tooltips/
Из OSPanel'и, по адресу 127.0.0.1 всё нормально работает - инфу загружает, в буфер обмена копирует.
Когда запускаю енто дело на битриксе (пробовал сначала, просто прописывая 127.0.0.1, затем и загружая архив с HTML и скриптами), информацию-то, слава DOS'у подгружает, но копировать в буфер обмена ни в какую не желает. Ошибка:
[Violation] Permissions policy violation: The Clipboard API has been blocked because of a permissions policy applied to the current document.
Никак не могу понять в чём причина - бутстрап или какие-то новые ограничения у Хрома.
Как я понял, копать нужно в этом направлении:
Но, каким образом я могу воздействовать на разрешения айфрейма, который вызываю не я, ума не приложу ((((
UPD: прочитал рекомендации, не знаю, может ещё не совсем всё правильно осознал, но постараюсь исправиться.
Вот HTML код из примера с подгрузкой bootstrap из CDN:
<!doctype html>
<html lang="ru" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha256-z8OR40MowJ8GgK6P89Y+hiJK5+cclzFHzLhFQLL92bg=" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" integrity="sha256-PDJQdTN7dolQWDASIoBVrjkuOEaI137FI15sqI3Oxu8=" crossorigin="anonymous">
<title>Пример копирования текста с применением Twitter Bootstrap 5 Tooltips | onstartup.ru</title>
</head>
<body class="d-flex h-100 bg-light">
<div class="container m-auto">
<div class="row justify-content-center">
<div class="col-auto">
<div class="card shadow">
<div class="card-header text-center">
<h1 class="display-6">Пример копирования текста<br>Twitter Bootstrap 5 Tooltips</h1>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-borderless mb-0">
<tbody>
<tr>
<th scope="row">ПРИМЕР 1:</th>
<td>
<div class="copy-clipboard d-flex justify-content-between">
<span class="lead h5">Скопировать строку 1</span><i class="bi bi-clipboard-plus btn p-1 pt-0" data-bs-toggle="tooltip" title="Скопировать"></i>
</div>
</td>
</tr>
<tr>
<th scope="row">ПРИМЕР 2:</th>
<td>
<div class="copy-clipboard d-flex justify-content-between">
<span class="lead h5">Скопировать строку 2</span><i class="bi bi-clipboard-plus btn p-1 pt-0" data-bs-toggle="tooltip" title="Скопировать"></i>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha256-KuvCVS19rfTjoLgMyDDCdOkRRlhNrY4psEM4uezts2M=" crossorigin="anonymous"></script>
<script>
let copyList = document.querySelectorAll( '.copy-clipboard' );
let copyArray = Array.prototype.slice.call( copyList );
function tooltipUpdate( button, tooltip, title ) {
tooltip.dispose();
button.setAttribute( 'title', title );
tooltip = new bootstrap.Tooltip( button );
tooltip.show();
return tooltip;
}
copyArray.map( function ( copy ) {
let text = copy.querySelector( 'span' ).innerText;
let button = copy.querySelector( 'i' );
let tooltip = new bootstrap.Tooltip( button );
button.addEventListener( 'mouseover', function () {
tooltip = tooltipUpdate( button, tooltip, 'Скопировать' );
this.classList.remove( 'bi-clipboard-check' );
this.classList.add( 'bi-clipboard-plus' );
} );
button.addEventListener( 'click', function () {
window.navigator.clipboard.writeText( text );
tooltip = tooltipUpdate( button, tooltip, 'Готово!' );
this.classList.remove( 'bi-clipboard-plus' );
this.classList.add( 'bi-clipboard-check' );
} );
} );
</script>
</body>
</html>
На отдельно странице с локалхоста всё нормально работает:
Но, при попытке запустить его из Битрикса нифига не работает - ошибка та же.
[Violation] Permissions policy violation: The Clipboard API has been blocked because of a permissions policy applied to the current document.
Uncaught (in promise) NotAllowedError: Failed to execute 'writeText' on 'Clipboard': The Clipboard API has been blocked because of a permissions policy applied to the current document.
Ответы (1 шт):
Итак, для таких же как я - ищущих ответов новичков.
В примере HTML кода с бутстрапом находим слушатель "клик":
button.addEventListener( 'click', function () {
window.navigator.clipboard.writeText( text );
tooltip = tooltipUpdate( button, tooltip, 'Готово!' );
this.classList.remove( 'bi-clipboard-plus' );
this.classList.add( 'bi-clipboard-check' );
} );
В нём строку
window.navigator.clipboard.writeText( text );
заменяем на код
let area = document.createElement('textarea'); /* Создали */
area.value = text;
document.body.appendChild(area).select(); /* Добавили на страницу и выделили */
document.execCommand('copy'); /* Скопировали */
area.remove(); /* Удалили */
Итоговый код, для сравнения:
<!doctype html>
<html lang="ru" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha256-z8OR40MowJ8GgK6P89Y+hiJK5+cclzFHzLhFQLL92bg=" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" integrity="sha256-PDJQdTN7dolQWDASIoBVrjkuOEaI137FI15sqI3Oxu8=" crossorigin="anonymous">
<title>Пример копирования текста с применением Twitter Bootstrap 5 Tooltips | onstartup.ru</title>
</head>
<body class="d-flex h-100 bg-light">
<div class="container m-auto">
<div class="row justify-content-center">
<div class="col-auto">
<div class="card shadow">
<div class="card-header text-center">
<h1 class="display-6">Пример копирования текста<br>Twitter Bootstrap 5 Tooltips</h1>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-borderless mb-0">
<tbody>
<tr>
<th scope="row">ПРИМЕР 1:</th>
<td>
<div class="copy-clipboard d-flex justify-content-between">
<span class="lead h5">Скопировать строку 11</span><i class="bi bi-clipboard-plus btn p-1 pt-0" data-bs-toggle="tooltip" title="Скопировать"></i>
</div>
</td>
</tr>
<tr>
<th scope="row">ПРИМЕР 2:</th>
<td>
<div class="copy-clipboard d-flex justify-content-between">
<span class="lead h5">Скопировать строку 22</span><i class="bi bi-clipboard-plus btn p-1 pt-0" data-bs-toggle="tooltip" title="Скопировать"></i>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha256-KuvCVS19rfTjoLgMyDDCdOkRRlhNrY4psEM4uezts2M=" crossorigin="anonymous"></script>
<script>
let copyList = document.querySelectorAll( '.copy-clipboard' );
let copyArray = Array.prototype.slice.call( copyList );
function tooltipUpdate( button, tooltip, title ) {
tooltip.dispose();
button.setAttribute( 'title', title );
tooltip = new bootstrap.Tooltip( button );
tooltip.show();
return tooltip;
}
copyArray.map( function ( copy ) {
let text = copy.querySelector( 'span' ).innerText;
let button = copy.querySelector( 'i' );
let tooltip = new bootstrap.Tooltip( button );
button.addEventListener( 'mouseover', function () {
tooltip = tooltipUpdate( button, tooltip, 'Скопировать' );
this.classList.remove( 'bi-clipboard-check' );
this.classList.add( 'bi-clipboard-plus' );
} );
button.addEventListener( 'click', function () {
// window.navigator.clipboard.writeText( text );
let area = document.createElement('textarea'); /* Создали */
area.value = text;
document.body.appendChild(area).select(); /* Добавили на страницу и выделили */
document.execCommand('copy'); /* Скопировали */
area.remove(); /* Удалили */
tooltip = tooltipUpdate( button, tooltip, 'Готово!' );
this.classList.remove( 'bi-clipboard-plus' );
this.classList.add( 'bi-clipboard-check' );
} );
} );
</script>
</body>
</html>
Решение взято отсюдава --> Как сделать копирование куска кода в буфер обмена на js?
Да падёт на меня гнев трукодеров, что "document.execCommand устарел"
ТУТ ВНИЗУ ТАКИ ЕСТЬ КАРТИНКА ))) ЕЁ ПОЧТИ НЕ ВИДНО И ПОХОЖА НА ПОЛОСКУ ШИРИНОЙ С ПИКСЕЛЬ, НО ОНА ТАМ ТОЧНО ЕСТЬ, КАК ТОТ САМЫЙ СУСЛИК )))?
и, вообще, возможно, это уже не безопасно, но иных вариантов я пока не нашёл...
посыпаю голову пеплом и прошу помощи у трукодеров, помочь мне заменить небезопасный код на более правильный со всех точек зрения )
ну, поможите, кто чем можете, сами мы не местные )