0

I have an app that takes a URL as an input, replaces the domain, and returns a new URL in the same input box.

I added a copyText function to copy the new URL to the clipboard. The code works locally, on JSFiddle, and on my S3 account. When I embed the app onto other pages as an iframe, all my functions work except the copyText function. I'm also noticing that function doesn't work here either. What am I doing wrong?

function copyText() {
  var copyText = document.getElementById("input");
  copyText.select();
  copyText.setSelectionRange(0, 99999); 
  navigator.clipboard.writeText(copyText.value);
  alert("Link copied.");
}
<input id="input" type="text" placeholder="Enter text..." autocomplete="off"/>
<button id="copy" onclick="copyText()">Copy</button>

https://jsfiddle.net/ianjmonk/07dwg6sr/21/#&togetherjs=VPAalw11ob

IanM
  • 3
  • 1
  • 3

1 Answers1

0

The common denominator here is the input.

If the framed site is on a different domain, you cannot directly read the value from the remote iframe.

There are ways to get around this, see this answer:

https://stackoverflow.com/a/17262334/14673218

Keep in mind that with this method you wouldn't be able to read the input value still if that page requires authentication.

Vincent Gauthier
  • 53
  • 5