Using the Clipboard API in the app iframe

Shopify Apps
9

As this is over a year old and I ran into the same problem I thought I’d share a working snippet I’m using to copy text from an input. If/when shopify make a change, this should gracefully switch to the clipboard api.

function copyToClipboard(id){
        
        var copyText = document.getElementById(id);
        copyText.select();       
        copyText.setSelectionRange(0, 99999); /* For mobile devices */
        
        //iframe blocks clipboard api so fallback
        //onto deprecated method until Shopify update this

        navigator.permissions.query({name:'clipboard-write'}).then(function(result) {
         if (result.state == 'granted') {
            navigator.clipboard.writeText(copyText.value);
         } else  {
            document.execCommand("copy");
         }
        });
    }