2

EDIT:
FOUND MY MISTAKE:
line 3 in this example, the $(this) selector isn't valid in this case. So the command is skipped, the download attribute isn't set and instead of downloading, the browser tries to navigate to the dataUrl, which is prohibited. Cue errors.

I have a PWA that stores images as base64 pngs. I want to give users the option to download them to their device.
Previously I used this really simple code where myAnchor is an anchor-tag in my HTML and pic contains the base64 png: 

function imgDownload(pic) {
$('#myAnchor').attr('href', pic);
$(this).attr('download', 'image.png');
$('#myAnchor')[0].click();}

So: simply set href to the image, set download attribute and filename, then trigger the download by clicking the link. But either Chrome 60 or 61 broke that - apparently for security reasons -, it now results in this error:

Not allowed to navigate top frame to data URL: [my b64 png]

Is there a (preferrably not too complex) client-side alternative to achieve the same functionality? It only has to work in Chrome, more browser compatibility is nice of course, but not neccessary.

StateOfTheArtJonas
  • 508
  • 5
  • 11
  • Take a look at: https://stackoverflow.com/questions/45493234/jspdf-not-allowed-to-navigate-top-frame-to-data-url. – Barbara Laird Sep 07 '17 at 18:09
  • I can run it fine in Canary v62 and v63. Could you confirm? ([fiddle](https://jsfiddle.net/9r47edkc/)) –  Sep 07 '17 at 19:26
  • Yup, fiddle runs fine both in Canary and Stable. Don't know why it's causing an error on my site then - perhaps jQM is doing some bad stuff in the background? But whatever, I found a solution: dynamically adding/removing the download link I need instead of adjusting a pre-existing hidden link in my HTML. (see my submitted answer) – StateOfTheArtJonas Sep 07 '17 at 19:53
  • Never mind, found the REAL mistake. Edited my question. – StateOfTheArtJonas Sep 07 '17 at 20:15

0 Answers0