Heim > Web-Frontend > js-Tutorial > Detaillierte Erläuterung, wie JavaScript den Kopierfunktionscode in verschiedenen Browsern implementiert

Detaillierte Erläuterung, wie JavaScript den Kopierfunktionscode in verschiedenen Browsern implementiert

伊谢尔伦
Freigeben: 2017-07-22 15:03:53
Original
2135 Leute haben es durchsucht

Sehen Sie sich die Unterstützung der einzelnen Browser für die Kopierfunktion an:

1. Für den IE-Browser gibt es drei Lösungen:

function copy(txtid){ 
var txtObj = document.getElementById(txtid); 
if(window.clipboardData){ // 仅IE支持此对象,firefox、chrome不支持 
//1、通过clipboardData对象实现复制 
//window.clipboardData.clearData(); 
//window.clipboardData.setData("Text",txtObj.value); 
//2、通过document对象实现复制:先选择中文本,再执行复制命令 
//txtObj.select(); 
//document.execCommand("Copy"); // 仅IE支持,Firefox报语法错误,chrome执行结果返回false(不支持) 
//3、通过TextRange对象实现现复制:可以不用先选中内容 
txtObj.createTextRange().execCommand("Copy"); 
} 
}
Nach dem Login kopieren

2. Firefox wird über die Schnittstellenmethode implementiert. Aus Sicherheitsgründen schließt Firefox diese Schnittstelle in Versionen nach 17. Sie ist in Versionen 17 und früher verfügbar. Der Code lautet wie folgt:

var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interface.nsIClipboard);
Nach dem Login kopieren

3. Aus Sicherheitsgründen stellt Chrome Benutzern keine Zwischenablagefunktionen zur Verfügung. Es ist ersichtlich, dass die Unterstützung der Kopierfunktion nicht in allen Browsern einheitlich ist.
Zero Clipboard Library
Zero Clipboard js-Bibliothek, geschrieben von jhuckaby, die Flash verwendet, um Inhalte in die Zwischenablage zu kopieren. Solange der Browser mit dem Flash-Plugin ausgestattet ist, kann der Inhalt kopiert werden. ActionScript blockiert die Mängel von JavaScript und löst das Problem der Kopierkompatibilität zwischen Browsern.
Das Implementierungsprinzip von Zero Clipboard: Zero Clipboard generiert zunächst ein Flash-Objekt-Tag und lässt den transparenten Flash über der Schaltfläche „Kopieren“ schweben. Tatsächlich wird nicht auf die Schaltfläche geklickt, sondern auf den erforderlichen Inhalt wird an Flash übertragen und dann über die Flash-Kopie in die Systemzwischenablage weitergeleitet.
So verwenden Sie Zero Clipboard
Hinweis: Da es auf der Flash-Implementierung basiert, muss Flash aus Sicherheitsgründen nicht direkt geladen werden Die Schaltfläche ähnelt einer angehaltenen Animation. Das Internet sagte, dass das Klicken mit der rechten Maustaste auf Flash-Einstellungen und das Hinzufügen von ZeroClipboard.swf zu einem vertrauenswürdigen Speicherort funktioniert, aber es funktioniert möglicherweise auch nicht mein lokaler Browser.
1> Laden Sie das komprimierte Paket von Zero Clipboard herunter, entpacken Sie es und legen Sie die beiden Dateien im Ordner ZeroClipboard.js und ZeroClipboard.swf in Ihr Projekt ab.
2> Code: ;
Hinweis: ZeroClipboard.js und ZeroClipboard.swf müssen im selben Pfad platziert werden, falls vorhanden sich nicht im selben Pfad befinden, können mit ZeroClipboard.setMoviePath() festgelegt werden.
3> Kopieren Sie den Code einfach wie folgt:

var clip = new ZeroClipboard.Client(); // 新建一个clip对象 
clip.setHandCursor( true ); // 设置鼠标为手型 
clip.setText("hello,world"); // 设置要复制的文本,可以为文本框的值 
clip.glue("copy-botton"); // 为clip注册一个按钮,参数为按钮元素的id,点击按钮就可以实现复制
Nach dem Login kopieren

4> Häufig verwendete Methoden von Zero Clipboard, es wird empfohlen, den Quellcode direkt anzuzeigen:
reposition(): Flash verhindern Die Schaltfläche ändert sich nicht, wenn sich die Seitengröße ändert.
hide(): Blendet die Flash-Schaltfläche aus.
show(): Zeigt die Flash-Schaltfläche an.
setCSSEffects(): Löst das Problem des ungültigen Flash-Shield-Schaltflächenstils ( ändern Sie :hover in .hover).
5>Keine allgemeinen Ereignisse in der Zwischenablage, die Ereignisverarbeitungsfunktion ist addEventListener():
load: Ereignis zum Laden der Flash-Taste
mouseOver: Ereignis zum Bewegen der Maus nach oben
mouseOut: Ereignis zum Bewegen der Maus nach oben
mouseDown : Mouse-Down-Ereignis
mouseUp: Mouse-Release-Ereignis
Abgeschlossen: Erfolgsereignis kopieren

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung, wie JavaScript den Kopierfunktionscode in verschiedenen Browsern implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage