ページを開いたときにクリップボードにコピーしたい
当サイトのリニューアル作業に時間をあてるため、掲示板の投稿は当分停止させていただきます。
urlのパラメータを受け取り、それをクリップボードに貼り付けるhtml/JavaScriptを作成したく思っております。
ブラウザで開いたときにJavaScriptを実行したいのですが、
下記のようにhtml/JavaScriptを書いても上手くクリップボードにコピーされず、
解決方法をご教示いただいてもよろしいでしょうか？
なお、functionをボタン等に割り当てて、手動実行すると、上手くコピーされます。
(ページを開いたときに自動で実行させようとすると上手くいきません。)
以下、作成したhtml/JavaScriptです。
ブラウザで開いたときにJavaScriptを実行したいのですが、
下記のようにhtml/JavaScriptを書いても上手くクリップボードにコピーされず、
解決方法をご教示いただいてもよろしいでしょうか？
なお、functionをボタン等に割り当てて、手動実行すると、上手くコピーされます。
(ページを開いたときに自動で実行させようとすると上手くいきません。)
以下、作成したhtml/JavaScriptです。
<body onload="copyToClipboard">
<script>
function copyToClipboard() {
var copyStr = new String('');
//urlからパラメータを受け取り、copyStrを成型
//ダミーのtextarea作ってそこにcopyStr入れてコピーさせる
var txtarea = document.createElement("textarea");
txtarea.value = copyStr;
document.body.appendChild(txtarea);
txtarea.select();
document.execCommand("copy");
txtarea.parentElement.removeChild(txtarea);
}
</script>
</body>
<script>
function copyToClipboard() {
var copyStr = new String('');
//urlからパラメータを受け取り、copyStrを成型
//ダミーのtextarea作ってそこにcopyStr入れてコピーさせる
var txtarea = document.createElement("textarea");
txtarea.value = copyStr;
document.body.appendChild(txtarea);
txtarea.select();
document.execCommand("copy");
txtarea.parentElement.removeChild(txtarea);
}
</script>
</body>
初学者 さん
08月22日 00時12分
初学者さん、こんにちは。
ソースをいただいたので試してみました。Windows版のChromeで確認しています。
そのままだとonloadが実行されていなかったようなので、onload="copyToClipboard()"とカッコをつけ、関数がロード時に実行されたことを確認しました。
次にStringに適当な文字を入れてテストしましたがコピーNG（後述するソースの※1部分）。
おっしゃるようにボタンから実行させてみると実行されました。
次に、console.log()で実行前の文字がテキストエリアに間違い無く存在するかを調査したところ、ここまでは代入されていることが確認（後述の※2部分）。
※console.log()の出力はブラウザ付属の開発者ツールで見られますが、見方が分らない場合はお知らせください。
また、私は使ったことが無かったのですが、document.execCommand("copy");に戻り値があるかなとconsole.log()したところ、実行結果がtrue|falseが返ってくるようです（後述の※3部分）。
onloaddでの実行ではfalse、ボタンから実行するとtrueが返ってきます。
ここまで段階を踏んで調べた結果から考えると、セキュリティ上の理由により、ユーザーが自発的に行ったイベントでないと実行されない可能性を考えます。load時に勝手にクリップボードをコピーして送信するようなコードを書けば、時に個人情報が得られてしまうこともありますからね。
ちなみに、IE11ではload時にコピーできてしまいました。ブラウザによってセキュリティポリシーが違うのかもしれません。
参考までに、私が検証で使ったコードをおいておきます。
ソースをいただいたので試してみました。Windows版のChromeで確認しています。
そのままだとonloadが実行されていなかったようなので、onload="copyToClipboard()"とカッコをつけ、関数がロード時に実行されたことを確認しました。
次にStringに適当な文字を入れてテストしましたがコピーNG（後述するソースの※1部分）。
おっしゃるようにボタンから実行させてみると実行されました。
次に、console.log()で実行前の文字がテキストエリアに間違い無く存在するかを調査したところ、ここまでは代入されていることが確認（後述の※2部分）。
※console.log()の出力はブラウザ付属の開発者ツールで見られますが、見方が分らない場合はお知らせください。
また、私は使ったことが無かったのですが、document.execCommand("copy");に戻り値があるかなとconsole.log()したところ、実行結果がtrue|falseが返ってくるようです（後述の※3部分）。
onloaddでの実行ではfalse、ボタンから実行するとtrueが返ってきます。
ここまで段階を踏んで調べた結果から考えると、セキュリティ上の理由により、ユーザーが自発的に行ったイベントでないと実行されない可能性を考えます。load時に勝手にクリップボードをコピーして送信するようなコードを書けば、時に個人情報が得られてしまうこともありますからね。
ちなみに、IE11ではload時にコピーできてしまいました。ブラウザによってセキュリティポリシーが違うのかもしれません。
参考までに、私が検証で使ったコードをおいておきます。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body onload="copyToClipboard()">
<script>
function copyToClipboard() {
var copyStr = new String('test');// ※1.適当な文字を入れました。
//urlからパラメータを受け取り、copyStrを成型
//ダミーのtextarea作ってそこにcopyStr入れてコピーさせる
var txtarea = document.createElement("textarea");
txtarea.value = copyStr;
console.log(txtarea.value);// ※2.testとコンソールに表示
document.body.appendChild(txtarea);
txtarea.select();
console.log(document.execCommand("copy"));// ※3.実行結果
txtarea.parentElement.removeChild(txtarea);
}
</script>
<input type="button" onclick="copyToClipboard()" value="ボタンから実行">
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body onload="copyToClipboard()">
<script>
function copyToClipboard() {
var copyStr = new String('test');// ※1.適当な文字を入れました。
//urlからパラメータを受け取り、copyStrを成型
//ダミーのtextarea作ってそこにcopyStr入れてコピーさせる
var txtarea = document.createElement("textarea");
txtarea.value = copyStr;
console.log(txtarea.value);// ※2.testとコンソールに表示
document.body.appendChild(txtarea);
txtarea.select();
console.log(document.execCommand("copy"));// ※3.実行結果
txtarea.parentElement.removeChild(txtarea);
}
</script>
<input type="button" onclick="copyToClipboard()" value="ボタンから実行">
</body>
</html>
馬場誠 さん
08月22日 09時30分
追記です。
Firefoxで試したところ、下記のようなエラーメッセージがコンソールに出ていました。
やはりセキュリティ的な要因でブロックされているようですね。
Firefoxで試したところ、下記のようなエラーメッセージがコンソールに出ていました。
document.execCommand(‘cut’/‘copy’) はユーザー生成の短期的なイベントハンドラーの内部からの呼び出しでないため拒否されました。
やはりセキュリティ的な要因でブロックされているようですね。
馬場誠 さん
08月22日 09時34分
