Future Proof Replacement for Hardcoded `name="app-iframe"` Getter

replace_iframe_name.ts

const API_KEY = '' // your app's apiKey, provided to your app during config, also accessible via window.shopify.config.apiKey


interface FrameList extends Window {
   [index: number]: Window;
}


function findAppFrameSafely(frameName: string) {
   if (window.parent) {
       const frames = window.parent.frames as FrameList;
       for (let i = 0; i < frames.length; i++) {
           const frame = frames[i];
           try {
               // referencing the name prop of a cross-origin frame will throw when there are multiple frames with the same name
               if (frame.name === frameName) {
                   return frame;
               }
           } catch (_) {
               // noOp
           }
       }
   }
}


const legacyFrameName_doNotUse = 'app-iframe';
const futureProofFrameName = `frame:${API_KEY}/main`;


const appFrame = findAppFrameSafely(legacyFrameName_doNotUse) || findAppFrameSafely(futureProofFrameName);


// continue doing whatever you were doing with the app's main frame
appFrame?.postMessage({}, window.location.origin);