René's URL Explorer Experiment

{"@context":"https://schema.org","@graph":[{"@type":"Article","@id":"https://www.webcodegeeks.com/javascript/javascript-copy-to-clipboard-example/#article","isPartOf":{"@id":"https://www.webcodegeeks.com/javascript/javascript-copy-to-clipboard-example/"},"author":{"name":"Era Balliu","@id":"https://www.webcodegeeks.com/#/schema/person/c27ecf40c810e6396ba93ffb829c7b0e"},"headline":"Javascript copy to clipboard example","datePublished":"2014-11-10T11:38:52+00:00","dateModified":"2018-06-20T13:51:51+00:00","mainEntityOfPage":{"@id":"https://www.webcodegeeks.com/javascript/javascript-copy-to-clipboard-example/"},"wordCount":710,"commentCount":2,"publisher":{"@id":"https://www.webcodegeeks.com/#organization"},"image":{"@id":"https://www.webcodegeeks.com/javascript/javascript-copy-to-clipboard-example/#primaryimage"},"thumbnailUrl":"https://www.webcodegeeks.com/wp-content/uploads/2014/10/js-logo.jpg","keywords":["Flash","Zero Clipboard"],"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https://www.webcodegeeks.com/javascript/javascript-copy-to-clipboard-example/#respond"]}]},{"@type":"WebPage","@id":"https://www.webcodegeeks.com/javascript/javascript-copy-to-clipboard-example/","url":"https://www.webcodegeeks.com/javascript/javascript-copy-to-clipboard-example/","name":"Javascript copy to clipboard example - Web Code Geeks - 2026","isPartOf":{"@id":"https://www.webcodegeeks.com/#website"},"primaryImageOfPage":{"@id":"https://www.webcodegeeks.com/javascript/javascript-copy-to-clipboard-example/#primaryimage"},"image":{"@id":"https://www.webcodegeeks.com/javascript/javascript-copy-to-clipboard-example/#primaryimage"},"thumbnailUrl":"https://www.webcodegeeks.com/wp-content/uploads/2014/10/js-logo.jpg","datePublished":"2014-11-10T11:38:52+00:00","dateModified":"2018-06-20T13:51:51+00:00","description":"Interested to learn about copy to clipboard in Javascript? Check out our Example on how to use it for all the browsers.You can download the source code too!","breadcrumb":{"@id":"https://www.webcodegeeks.com/javascript/javascript-copy-to-clipboard-example/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https://www.webcodegeeks.com/javascript/javascript-copy-to-clipboard-example/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https://www.webcodegeeks.com/javascript/javascript-copy-to-clipboard-example/#primaryimage","url":"https://www.webcodegeeks.com/wp-content/uploads/2014/10/js-logo.jpg","contentUrl":"https://www.webcodegeeks.com/wp-content/uploads/2014/10/js-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https://www.webcodegeeks.com/javascript/javascript-copy-to-clipboard-example/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://www.webcodegeeks.com/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https://www.webcodegeeks.com/category/javascript/"},{"@type":"ListItem","position":3,"name":"Javascript copy to clipboard example"}]},{"@type":"WebSite","@id":"https://www.webcodegeeks.com/#website","url":"https://www.webcodegeeks.com/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https://www.webcodegeeks.com/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://www.webcodegeeks.com/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https://www.webcodegeeks.com/#organization","name":"Exelixis Media P.C.","url":"https://www.webcodegeeks.com/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https://www.webcodegeeks.com/#/schema/logo/image/","url":"https://www.webcodegeeks.com/wp-content/uploads/2022/06/exelixis-logo.png","contentUrl":"https://www.webcodegeeks.com/wp-content/uploads/2022/06/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https://www.webcodegeeks.com/#/schema/logo/image/"},"sameAs":["https://www.facebook.com/webcodegeeks","https://x.com/webcodegeeks"]},{"@type":"Person","@id":"https://www.webcodegeeks.com/#/schema/person/c27ecf40c810e6396ba93ffb829c7b0e","name":"Era Balliu","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https://www.webcodegeeks.com/#/schema/person/image/","url":"https://secure.gravatar.com/avatar/f6adddf7eada210f682608fea9d8159441369ec622998a5851a447e0a2bfa3f3?s=96&d=mm&r=g","contentUrl":"https://secure.gravatar.com/avatar/f6adddf7eada210f682608fea9d8159441369ec622998a5851a447e0a2bfa3f3?s=96&d=mm&r=g","caption":"Era Balliu"},"description":"Era is a Telecommunications Engineering student, with a great passion for new technologies. Up until now she has been coding with HTML/CSS, Bootstrap and other front-end coding languages and frameworks, and her recent love is Angular JS.","sameAs":["http://www.webcodegeeks.com/","https://www.facebook.com/era.balliu.7","https://www.instagram.com/eraballiu/","https://www.linkedin.com/in/eraballiu","https://www.pinterest.com/001r2gw0jt0ln6d/","https://x.com/BalliuEra","https://www.youtube.com/c/eraballiu"],"url":"https://www.webcodegeeks.com/author/era-balliu/"}]}

{"@context":"http:\/\/schema.org","@type":"BreadcrumbList","@id":"#Breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"item":{"name":"Home","@id":"https:\/\/www.webcodegeeks.com\/"}},{"@type":"ListItem","position":2,"item":{"name":"JavaScript","@id":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"}}]}

{"@context":"http:\/\/schema.org","@type":"Article","dateCreated":"2014-11-10T13:38:52+02:00","datePublished":"2014-11-10T13:38:52+02:00","dateModified":"2018-06-20T16:51:51+03:00","headline":"Javascript copy to clipboard example","name":"Javascript copy to clipboard example","keywords":"Flash,Zero Clipboard","url":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-copy-to-clipboard-example\/","description":"If you use any scripts for syntax highlighting, then you have seen that most of them have \"copy to clipboard\" as an option. And now you want to use that in your next project. But how? You don't even n","copyrightYear":"2014","articleSection":"JavaScript","articleBody":"If you use any scripts for syntax highlighting, then you have seen that most of them have \"copy to clipboard\" as an option. And now you want to use that in your next project. But how? You don't even need to worry, we've got you covered. Just follow along.\r\n\r\nWe will use:\r\n\r\n \tJavascript\r\n \tFlash\r\n \tZero Clipboard\r\n\r\n\r\nCopy to Clipboard in Internet Explorer\r\nThe easiest and most efficient way to build the Copy to Clipboard feature is in Internet Explorer.\r\n\r\nFirst you put this code in the body section of your index.html file:\r\n\r\n[xml]\r\n<a href="#" id="copy" onclick="copyToClipboard(document.getElementById('pre').innerHTML)">Copy to clipboard<\/a>\r\n<pre id="pre">\r\nWeb Code Geeks Example on JavaScript Copy to Clipboard Feature\r\n<\/pre>\r\n[\/xml]\r\n\r\nNext, you put the following code in your app.js file:\r\n\r\n[js]\r\nfunction copyToClipboard(s) {\r\n    if (window.clipboardData && clipboardData.setData) {\r\n        clipboardData.setData('text', s);\r\n    }\r\n}\r\n[\/js]\r\n\r\nDon't forget to script the app.js file in your index.html like this:\r\n\r\n[xml]\r\n<script src="app.js"><\/script>\r\n[\/xml]\r\n\r\nAnd with that, you're set. As soon as you click on the \"copy to clipboard\" link, the text in <pre> tags will be copied. But what happens if Internet Explorer is not the browser of your choice (mine either)?\r\n\r\nWe'll show you the solution below.\r\nFor other browsers: Flash\r\nFor browsers other than IE, there's no pure JavaScript solution for the \"copy to clipboard\" feature. That's where Flash appears in our view.\r\n\r\nThe browsers use a small Flash file to do the job: copy a string to a clipboard. This Flash file is actually embedded into the page but it's invisible if you set the width: 0; and height: 0;. The code will go like this:\r\n\r\n[js]\r\nfunction copyToClipboard(s) {\r\n    \/\/ for IE\r\n    if (window.clipboardData && clipboardData.setData) {\r\n        clipboardData.setData('text', s);\r\n    }\r\n    \/\/ for other browsers\r\n    else {\r\n        var flashcopier = 'flashcopier';\r\n        if(!document.getElementById(flashcopier)) {\r\n            var divholder = document.createElement('div');\r\n            divholder.id = flashcopier;\r\n            document.body.appendChild(divholder);\r\n        }\r\n        document.getElementById(flashcopier).innerHTML = '';\r\n        var divinfo = '<embed src="_clipboard.swf" FlashVars="clipboard='+encodeURIComponent(s)+'" width="0" height="0" type="application\/x-shockwave-flash"><\/embed>';\r\n        document.getElementById(flashcopier).innerHTML = divinfo;\r\n    }\r\n}\r\n[\/js]\r\n\r\nThis idea is good, and works for most cases, but problems arise with Flash 10. For security reasons every action regarding clipboards requires user interaction (read more here, in the Clipboard section). This problem occurs because the flash file is written with an old version of it, when security was not reinforced.\r\n\r\nThe simplest solution to solve this is to modify the flash file's source code to work with Flash 10 and all is well.\r\nZero Clipboard: A JavaScript library\r\nIf you don't have access to the flash file's source code, then you would have to find another way, which in our case is using the well-developed JavaScript library Zero Clipboard. Zero Clipboard in itself uses a flash file that works well with Flash 10. So let's make it work.\r\n\r\nPut this code in the body section of index.html:\r\n\r\n[xml]\r\n<button id='#copy_button' data-clipboard-target='to_copy'><b>Copy To Clipboard<\/b><\/button>\r\n\r\n<p id='to_copy'>Web Code Geeks Copy to Clipboard example<\/p>\r\n[\/xml]\r\n\r\nNow download Zero Clipboard and extract it in your project's directory. Then find the ZeroClipboard.js file and script it in your index.html. It should look similar to this:\r\n\r\n[xml]\r\n  <script type="text\/javascript" src="zeroclipboard-2.1.6\/dist\/ZeroClipboard.js"><\/script>\r\n[\/xml]\r\n\r\nThen it's time to place this code in your app.js file:\r\n\r\n[js]\r\n$(document).ready(function() {\r\n\r\n    var clip = new ZeroClipboard($("#copy_button"), {\r\n        moviePath: "zeroclipboard-2.1.6\/dist\/ZeroClipboard.swf"\r\n    });\r\n});\r\n[\/js]\r\n\r\nAnd with this, you're ready to go. Just remember, no testing locally, as the flash file in Zero Clipboard imposes security restrictions. You should test it online.\r\nDownload the source code for Javascript Copy to Clipboard Example\r\nThis was an example of Copy to Clipboard feature, using Javascript.\r\nDownload\r\nYou can download the source code for this example here:  CopyToClipboard","publisher":{"@id":"#Publisher","@type":"Organization","name":"Web Code Geeks","logo":{"@type":"ImageObject","url":"\/wp-content\/uploads\/2015\/12\/WebCodeGeeks-logo.png"},"sameAs":["http:\/\/feeds.feedburner.com\/WebCodeGeeks","https:\/\/www.facebook.com\/webcodegeeks","https:\/\/twitter.com\/webcodegeeks","https:\/\/www.youtube.com\/channel\/UCcJkBzpdp8TWzzu0bSjzikw","https:\/\/github.com\/webcodegeeks"]},"sourceOrganization":{"@id":"#Publisher"},"copyrightHolder":{"@id":"#Publisher"},"mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-copy-to-clipboard-example\/","breadcrumb":{"@id":"#Breadcrumb"}},"author":{"@type":"Person","name":"Era Balliu","url":"https:\/\/www.webcodegeeks.com\/author\/era-balliu\/"},"image":{"@type":"ImageObject","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","width":1200,"height":150}}