js_javascript ヒントを使用してコンテンツをクリップボード互換ブラウザにコピーする-jsチュートリアル-php.cn

js_javascript ヒントを使用してコンテンツをクリップボード互換ブラウザにコピーする

WBOY

リリース： 2016-05-16 16:55:06

オリジナル

1077 人が閲覧しました

js 経由でクリップボードにコピーする場合は、最初は難しくありませんが、ブラウザの互換性の問題を考慮すると、jquery-zclip を使用してコピーするのが良いでしょう。ブラウザの互換性。原理については詳しく説明しませんが、それを実装する方法について話しましょう。

たとえば、私の HTML コードは次のとおりです:

コードをコピーしますコードは次のとおりです:

コピーするコンテンツ 1
コピーするコンテンツ 2
コピーする内容 3

jquery は言うまでもなく、js ファイルが必要です。さらに jquery-zclip.js と ZeroClipboard.swf があります。これら 2 つのファイルは、次のアドレスの公式 Web サイトからダウンロードできます。 http://www.steamdev.com/zclip /

コピーボタンの生成 js は次のとおりです

コードをコピーコードは次のとおりです:

 
これをテストすると、難しいことではありませんでした。しかし、それをプロジェクトに挿入すると、問題が発生しました。コピーボタンが生成された場所にはフラッシュはなく、テキストがあった場所にはフラッシュが生成されていなかったことがわかりました。私のプロジェクトのバックグラウンドで使用されている iframe 構造に関係があると思います。これはこのプラグインのバグだと思います。多くの情報を確認したところ、コードを変更する必要があるとのことでしたので、変更しました。

変更する必要があるコードは次のとおりです

コードをコピーしますコードは次のとおりです。以下のように:

getDOMObjectPosition: function (obj, stopObj) {

// dom 要素の絶対座標を取得 
var info = { 
left: 0, 
top : 0, 
幅: obj.width ? obj.width : obj.offsetWidth, 
高さ: obj.height ? 
} ; && (obj != stopObj)) { 
//info.left = obj.offsetLeft; //変更前
//info.top = obj.offsetTop; //変更前
jpos = $( obj).position(); //変更後
info.left = jpos.left; //変更後
} 

return info; 
} 

 
実は、これはこのプラグインの原理に関係しており、この 2 つが重なっていない場合は、ボタンが透明なフラッシュで覆われます。上記の問題が発生します。