search

Shopify / shopify-app-bridge

https://shopify.dev/docs/api/app-bridge
82 stars 9 forks source link

Admin loads embedded app in three separate iframes #286

Closed wbelk closed 2 months ago

wbelk commented 4 months ago

The Shopify admin is loading my app into three separate iframes, causing three requests to my index route each page reload

iframe[name="app-iframe"]
iframe[name="modal://content/classic"]
iframe[name="modal://content/max"]

I reached out to support and they told me to file an issue here

To me this seems like a bug and inefficient, and makes my debugging much more difficult, what am I missing?

MitchLillie commented 4 months ago

Hi @wbelk - This is the expected behavior. The additional iframes are used to improve performance for modals in your app.

makes my debugging much more difficult

Can you share more about the issues you encountered while debugging?

darrynten commented 4 months ago

How do we know which one gets targeted when calling document, and how do we selectively target a document in one of these 3 specific contexts?

iwoodruff commented 2 months ago

hey @darrynten, each iframe will run scripts independently & you can select the iframe via the dropdown in a browser console here to access its runtime context

Image

apologies if that wasn't the question you were asking – as Mitch mentioned, we append multiple iframes so when your app opens a modal, it's already in the DOM & preloaded so the content renders more quickly