一部のWebサイトでは、コピーされたコンテンツにテキストを追加する Tynt のJavaScriptサービスを使用しています。
これを使用してサイトからテキストをコピーして貼り付けると、テキストの下部に元のコンテンツへのリンクが表示されます。
また、Tyntはこれを追跡します。それはきちんとしたトリックです。
これを行うためのスクリプトは印象的です-クリップボードを操作しようとするのではなく(IEの古いバージョンのみがデフォルトで可能にし、常にオフにする必要があります)実際の選択を操作します)。
したがって、テキストブロックを選択すると、追加のコンテンツが非表示の<div>
は選択に含まれます。貼り付けると、余分なスタイルは無視され、余分なリンクが表示されます。
これは、実際には単純なテキストブロックを使用して実行するのはかなり簡単ですが、異なるブラウザで複雑なHTML全体で可能なすべての選択を考慮すると悪夢です。
私はウェブアプリケーションを開発しています-コピーされたコンテンツを誰にも追跡させたくないので、追加の情報には単なるリンクではなく、何かコンテキストが含まれるようにします。この場合、Tyntのサービスは適切ではありません。
同様の機能を提供するが、内部アプリケーションデータを公開しないオープンソースJavaScriptライブラリ(jQueryプラグインなど)を知っている人はいますか?
コピーしたWebテキストに追加情報を追加するには、主に2つの方法があります。
アイデアは、copy event
、追加情報を含む隠しコンテナをdom
に追加し、選択範囲を拡張します。
このメソッドは、 この記事 byc.bavotaから採用されています。より複雑なケースについては、 jitbitのバージョン も確認してください。
function addLink() {
//Get the selected text and append the extra info
var selection = window.getSelection(),
pagelink = '<br /><br /> Read more at: ' + document.location.href,
copytext = selection + pagelink,
newdiv = document.createElement('div');
//hide the newly created container
newdiv.style.position = 'absolute';
newdiv.style.left = '-99999px';
//insert the container, fill it with the extended text, and define the new selection
document.body.appendChild(newdiv);
newdiv.innerHTML = copytext;
selection.selectAllChildren(newdiv);
window.setTimeout(function () {
document.body.removeChild(newdiv);
}, 100);
}
document.addEventListener('copy', addLink);
アイデアは、copy event
およびクリップボードのデータを直接変更します。これは、clipboardData
プロパティを使用して可能です。このプロパティは、read-only
; setData
メソッドはIEでのみ使用可能です。
function addLink(event) {
event.preventDefault();
var pagelink = '\n\n Read more at: ' + document.location.href,
copytext = window.getSelection() + pagelink;
if (window.clipboardData) {
window.clipboardData.setData('Text', copytext);
}
}
document.addEventListener('copy', addLink);
これは、上記の修正されたソリューションからのバニラjavascriptソリューションですが、より多くのブラウザーをサポートしています(クロスブラウザーメソッド)
function addLink(e) {
e.preventDefault();
var pagelink = '\nRead more: ' + document.location.href,
copytext = window.getSelection() + pagelink;
clipdata = e.clipboardData || window.clipboardData;
if (clipdata) {
clipdata.setData('Text', copytext);
}
}
document.addEventListener('copy', addLink);
これを行うためのjqueryのプラグインは次のとおりです https://github.com/niklasvh/jquery.plugin.clipboard プロジェクトのreadmeから呼び出され、コピーされた選択がユーザーが選択したものとは異なる結果になります。
これにより、著作権情報やその他のコンテンツなどのコンテンツを選択に追加/追加できます。
MIT License "でリリース
テストして動作しているjQueryの最短バージョンは次のとおりです。
jQuery(document).on('copy', function(e)
{
var sel = window.getSelection();
var copyFooter =
"<br /><br /> Source: <a href='" + document.location.href + "'>" + document.location.href + "</a><br />© YourSite";
var copyHolder = $('<div>', {html: sel+copyFooter, style: {position: 'absolute', left: '-99999px'}});
$('body').append(copyHolder);
sel.selectAllChildren( copyHolder[0] );
window.setTimeout(function() {
copyHolder.remove();
},0);
});
答えを改善し、変更後の選択を復元して、コピー後のランダムな選択を防ぎます。
function addLink() {
//Get the selected text and append the extra info
var selection = window.getSelection(),
pagelink = '<br /><br /> Read more at: ' + document.location.href,
copytext = selection + pagelink,
newdiv = document.createElement('div');
var range = selection.getRangeAt(0); // edited according to @Vokiel's comment
//hide the newly created container
newdiv.style.position = 'absolute';
newdiv.style.left = '-99999px';
//insert the container, fill it with the extended text, and define the new selection
document.body.appendChild(newdiv);
newdiv.innerHTML = copytext;
selection.selectAllChildren(newdiv);
window.setTimeout(function () {
document.body.removeChild(newdiv);
selection.removeAllRanges();
selection.addRange(range);
}, 100);
}
document.addEventListener('copy', addLink);
2018年の改善
document.addEventListener('copy', function (e) {
var selection = window.getSelection();
e.clipboardData.setData('text/plain', $('<div/>').html(selection + "").text() + "\n\n" + 'Source: ' + document.location.href);
e.clipboardData.setData('text/html', selection + '<br /><br />Source: <a href="' + document.location.href + '">' + document.title + '</a>');
e.preventDefault();
});
上記2つの回答+ Microsoft Edgeとの互換性のコンパイルです
どのブラウザでもデフォルトで想定されているように、元の選択の復元も最後に追加しました。
function addCopyrightInfo() {
//Get the selected text and append the extra info
var selection, selectedNode, html;
if (window.getSelection) {
var selection = window.getSelection();
if (selection.rangeCount) {
selectedNode = selection.getRangeAt(0).startContainer.parentNode;
var container = document.createElement("div");
container.appendChild(selection.getRangeAt(0).cloneContents());
html = container.innerHTML;
}
}
else {
console.debug("The text [selection] not found.")
return;
}
// Save current selection to resore it back later.
var range = selection.getRangeAt(0);
if (!html)
html = '' + selection;
html += "<br/><br/><small><span>Source: </span><a target='_blank' title='" + document.title + "' href='" + document.location.href + "'>" + document.title + "</a></small><br/>";
var newdiv = document.createElement('div');
//hide the newly created container
newdiv.style.position = 'absolute';
newdiv.style.left = '-99999px';
// Insert the container, fill it with the extended text, and define the new selection.
selectedNode.appendChild(newdiv); // *For the Microsoft Edge browser so that the page wouldn't scroll to the bottom.
newdiv.innerHTML = html;
selection.selectAllChildren(newdiv);
window.setTimeout(function () {
selectedNode.removeChild(newdiv);
selection.removeAllRanges();
selection.addRange(range); // Restore original selection.
}, 5); // Timeout is reduced to 10 msc for Microsoft Edge's sake so that it does not blink very noticeably.
}
document.addEventListener('copy', addCopyrightInfo);
また、少し短いソリューション:
jQuery( document ).ready( function( $ )
{
function addLink()
{
var sel = window.getSelection();
var pagelink = "<br /><br /> Source: <a href='" + document.location.href + "'>" + document.location.href + "</a><br />© text is here";
var div = $( '<div>', {style: {position: 'absolute', left: '-99999px'}, html: sel + pagelink} );
$( 'body' ).append( div );
sel.selectAllChildren( div[0] );
div.remove();
}
document.oncopy = addLink;
} );