Section:

Loading WebViewer from another domain

It may be necessary to share the WebViewer library files amongst various apps and domains (ex. update convenience or security policy). You can load WebViewer's lib folder from another domain by setting the path constructor option to an absolute URL (e.g. https://otherdomain.com/lib).

JavaScript

1// https://myserver.com
2WebViewer({
3  path: 'https://otherdomain.com/lib',
4}, document.getElementById('viewer'))
5  .then(instance => {});

When you call an API on the WebViewer object, behind the scenes it reaches into the iframe and calls functions in that context. This is fine in a normal scenario where WebViewer and your app are on the same domain. However, the WebViewer library is now hosted on a different domain and the iframe will be pointing to that host domain as its source. When the iframe is on a different domain, then cross origin script access applies and WebViewer will no longer be able to call functions inside the iframe due to security limitations.

For example, the following will occur:

JavaScript

1WebViewer(...)
2  .then(instance => {
3    // instance is undefined!
4  });

In this case you have two options to interact with and customize WebViewer.

  1. Run your custom code in a config file. Config files are loaded and executed inside the iframe so they run in the iframe's context and have no problem accessing the APIs. Make sure to follow this step so that the config file is able to be loaded.
  2. Use the window postMessage API to communicate between your page and the iframe. For example, you could send a message to the iframe with the value being the URL to the document you want to load. The iframe would handle this message in a config file and call instance.UI.loadDocument to load the document from the new URL.

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales