Filestack Filepicker在Filemaker Webviewer中无法加载问题排查

Hey there, let's dig into why your Filestack code works in plain HTML but goes blank in FileMaker's WebViewer. I've dealt with similar WebViewer quirks before, so here are the most likely fixes:

1. Fix Script Loading Timing & CORS Restrictions #

FileMaker's WebViewer (built on WebKit) has stricter rules when loading external scripts via the data:text/html protocol. Your inline code might be running before the Filestack JS finishes downloading, causing a filestack is undefined error (you can enable WebViewer dev tools to confirm this).

Solution: Dynamically Load the Script #

Instead of hardcoding the script tag, load it dynamically and run your init code only after it's fully loaded. Here's your updated FileMaker code:

Let( [
  html = " <html> <head></head> <body> <script type='text/javascript'> 
    function loadFilestack() {
      const script = document.createElement('script');
      script.src = \"https://static.filestackapi.com/filestack-js/3.x.x/filestack.min.js\";
      script.crossOrigin = 'anonymous';
      script.onload = function() {
        const client = filestack.init('APIKEYWASHERE');
        client.picker().open();
      };
      document.head.appendChild(script);
    }
    loadFilestack();
  </script> </body> </html>"
];
"data:text/html," & html)

2. Try Using a Local HTML File Instead of data:text/html #

FileMaker often treats local files more leniently than inline data: URLs. Save your working HTML code as a file (e.g., filestack-picker.html) in FileMaker's container field or a local directory, then point the WebViewer directly to that file path. This bypasses many of the inline protocol restrictions.

3. Check for JS Compatibility in Older FileMaker Versions #

If you're on an older FileMaker version (pre-19), its WebViewer uses an older WebKit engine that might not support ES6 features like const. Swap const with var to test:

var client = filestack.init('APIKEYWASHERE');
client.picker().open();

4. Verify WebViewer Security Settings #

Double-check your WebViewer's settings:

• Ensure Allow JavaScript is enabled (it's off by default in some configurations)
• Enable Allow cross-domain access to let the WebViewer pull resources from Filestack's servers

5. Validate Your Filestack API Key #

While it works in plain HTML, FileMaker's WebViewer has a different user agent and network context. Log into your Filestack dashboard to:

• Make sure your API key has no IP/domain restrictions that block FileMaker
• Check the event logs for failed API calls from FileViewer's environment

内容的提问来源于stack exchange，提问作者Dan