Need help with - Failed to execute 'postMessage' on 'DOMWindow'

Question

Using the Angular samples provided in the SDK kit I have been able to create a simple POC for my Mean stack app that runs locally on my localhost. I ended up using the PreviewFileUsingFilePromise method wherein I am providing my file as a blob (and not as the URL unlike the other method requires). This apporach works fine in some instances and not in others. Unfortunately the issue is sporadic and hard to understand. (fails 4 times out of 10).

Everytime the issue occurs, there is no pdf loaded in the iframe and my console keeps throwing this error - Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('<URL>') does not match the recipient window's origin ('<URL>').

Upon digging a little deeper, the error is caused in the following lines of the embedded javascript file (ViewSDKInterface.js):

e.isInstanceStillAlive() && e._iframeElement.contentWindow.postMessage(t, r)

A little research and googling has led me to the following:

https://stackoverflow.com/questions/27573017/failed-to-execute-postmessage-on-domwindow-https-www-youtube-com-http

Having said that, the questions that I have are

1. Could this be the very reason for my issues as well (http vs https)? If so, how can I get around it with localhost? Also, it does not explain why it works sometimes while not at other times.

2. If not, then what could be causing it?

3. Somewhat unrealted, but I guess valid in my case. Since I am using the PreviewFileUsingFilePromise method and providing the file blob to process for pdf. Does Adobe use this blob or any file related content and store them on the Adobe server's?

Thanks and any help would be much appreciated!

aknoerig · Answer

I just ran into this issue myself, using the VueJS framework. I think the problem runs deeper, and you might have "accidentally" solved it by refactoring your code.

In VueJS, the error appears if you declare the viewer variable in the component data:

export default defineComponent({
  ...
  data () {
    return {
      adobeViewer: undefined
    }
  },
  ...
  mounted () {
    this.adobeViewer = new AdobeDC.View(...)
  }
}

This can be an issue when the instantiated object is very complex, as VueJS attempts to make it reactive.

Instead, define it outside of the component (or locally):

const adobeViewer: undefined

export default defineComponent({
  ...
  data () {
    return {
    }
  },
  ...
  mounted () {
    adobeViewer = new AdobeDC.View(...)
  }
}

Not sure how this translates to Angular, though. 🙂

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded