Skip to content

Instantly share code, notes, and snippets.

@iwoodruff

iwoodruff/replace_iframe_name.ts

Last active April 18, 2024 20:26
Show Gist options
  • Save iwoodruff/7744574bd96a26526bfb30327d3934ad to your computer and use it in GitHub Desktop.
Save iwoodruff/7744574bd96a26526bfb30327d3934ad to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. iwoodruff revised this gist Apr 18, 2024. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions replace_iframe_name.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    const APP_API_CLIENT_ID = '' // your app's api_client_id
    const API_KEY = '' // your app's apiKey, provided to your app during config, also accessible via window.shopify.config.apiKey


    interface FrameList extends Window {
    @@ -25,7 +25,7 @@ function findAppFrameSafely(frameName: string) {


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


    const appFrame = findAppFrameSafely(legacyFrameName_doNotUse) || findAppFrameSafely(futureProofFrameName);
  2. iwoodruff revised this gist Apr 18, 2024. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions replace_iframe_name.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -24,8 +24,8 @@ function findAppFrameSafely(frameName: string) {
    }


    const legacyFrameName_doNotUse = 'app-iframe'; // this will break & should be removed once we switch to the new pattern
    const futureProofFrameName = `frame:${APP_API_CLIENT_ID}/main`; // once all 1p apps stop relying on name="app-iframe", we will change the app iframe name to this pattern
    const legacyFrameName_doNotUse = 'app-iframe';
    const futureProofFrameName = `frame:${APP_API_CLIENT_ID}/main`;


    const appFrame = findAppFrameSafely(legacyFrameName_doNotUse) || findAppFrameSafely(futureProofFrameName);
  3. iwoodruff created this gist Apr 16, 2024.
    35 changes: 35 additions & 0 deletions replace_iframe_name.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,35 @@
    const APP_API_CLIENT_ID = '' // your app's api_client_id


    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'; // this will break & should be removed once we switch to the new pattern
    const futureProofFrameName = `frame:${APP_API_CLIENT_ID}/main`; // once all 1p apps stop relying on name="app-iframe", we will change the app iframe name to this pattern


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


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