How to fix or troubleshoot iframe content not displaying unless refreshing page?

Ask us anything
1

I have a page with an HTML element and iframe that displays a PDF that is stored in Google Cloud Storage using the Google Drive PDF viewer. Half the time the iframe is blank and I need to refresh the page for it to show up. The url of the pdf comes from a collection fetched on the page load.

How do I go about figuring out why the contents aren’t loading? Is there something I can add to a workflow on page load that would help?

Here is an example of the code:

<iframe src="https://docs.google.com/viewer?url=https://storage.googleapis.com/cdn.irrigationcheckups.com/63efc9e4-05a2-4fbb-b95f-6fa1e319eb73/reports/1780-1722555154187.pdf&embedded=true" style="width:100%; height:100%;"></iframe>
2

With the html element an easy thing you can try is to disable “Refresh on resize” in the settings panel.

3

Unfortunately that didn’t make a difference.

After spending more time looking into potential causes, I’m led to believe its CORS related trying to use Google Cloud Storage files with the Drive pdf viewer. So I abandoned that route and gave the Adobe PDF Embed api a try. After much trial and error, finally got it working after implementing a delay on the script to ensure the SDK finished loading.