RadicalRooster

May 12, 2020

Hello everyone,

I have an issue where an external iFrame I am loading using Javascript displays fine on iOS, Android and Windows, but doesn't display on Mac Chrome, Firefox or Edge.

Using Chrome Inspector, I can see the reason why it doesn't display is because height is set to 0px. If you resize the browser window, the iFrame then displays, as if Chrome is nudged into resizing the iFrame.

My thinking is to force the iFrame's height, that way it will be displayed no matter what.

I am fairly new to JS, so could someone recommend what that code might look like?

Below is my code (a Shopify Buy Button):

<div id='product-component-[product component]'></div>
<script type="text/javascript">
/*<![CDATA[*/
(function () {
  var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
  if (window.ShopifyBuy) {
    if (window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      loadScript();
    }
  } else {
    loadScript();
  }
  function loadScript() {
    var script = document.createElement('script');
    script.async = true;
    script.src = scriptURL;
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
    script.onload = ShopifyBuyInit;
  }
  function ShopifyBuyInit() {
    var client = ShopifyBuy.buildClient({
      domain: 'golden-moments-usa.myshopify.com',
      storefrontAccessToken: '7d944d2e69bddb24e7c33ba1395129bd',
    });
    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: '[product id]',
        node: document.getElementById('product-component-[product component]'),
        moneyFormat: '%24%7B%7Bamount%7D%7D',
        options: {
  "product": {
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "calc(25% - 20px)",
          "margin-left": "20px",
          "margin-bottom": "50px"
        },
        "text-align": "left"
      },
      "button": {
        "font-family": "Lato, sans-serif",
        "font-size": "14px",
        "width": "100%",
        "padding-top": "15px",
        "padding-bottom": "15px",
        "color": "#ffffff",
        ":hover": {
          "color": "#ffffff",
          "background-color": "#a81f33"
        },
        "background-color": "#ed2a47",
        ":focus": {
          "background-color": "#13308a"
        },
        "border-radius": "8px",
        "padding-left": "30px",
        "padding-right": "30px"
      },
      "quantityInput": {
        "font-size": "14px",
        "padding-top": "15px",
        "padding-bottom": "15px"
      },
      "price": {
         "font-family": "Lato, serif",
        "font-weight": "700",
        "font-size": "20px",
        "color": "#4d4d4d"
      },
      "compareAt": {
        "font-family": "Lato, serif",
        "font-weight": "bold",
        "color": "#0b1c51"
      }
    },
    "contents": {
      "img": false,
      "button": false,
      "buttonWithQuantity": false,
      "title": false,
      "options": false,
      "price": true
    },
    "googleFonts": [
      "Lato"
    ]
  },
  "productSet": {
    "styles": {
      "products": {
        "@media (min-width: 601px)": {
          "margin-left": "-20px"
        }
      }
    }
  },
  "modalProduct": {
    "contents": {
      "img": false,
      "imgWithCarousel": false,
      "button": true,
      "buttonWithQuantity": false
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0px",
          "margin-bottom": "0px"
        }
      },
      "button": {
        "font-family": "Lato, sans-serif",
        "font-size": "14px",
        "padding-top": "15px",
        "padding-bottom": "15px",
        "color": "#ffffff",
        ":hover": {
          "color": "#ffffff",
          "background-color": "#ed2a47"
        },
        "background-color": "#0b1c51",
        ":focus": {
          "background-color": "#13308a"
        },
        "border-radius": "8px",
        "padding-left": "30px",
        "padding-right": "30px"
      },
      "quantityInput": {
        "font-size": "14px",
        "padding-top": "15px",
        "padding-bottom": "15px"
      }
    },
    "text": {
      "button": "Add to cart"
    }
  },
  "cart": {
    "styles": {
      "button": {
        "font-family": "Lato, sans-serif",
        "font-size": "14px",
        "padding-top": "15px",
        "padding-bottom": "15px",
        "color": "#ffffff",
        ":hover": {
          "color": "#ffffff",
          "background-color": "#a81f33"
        },
        "background-color": "#ed2a47",
        ":focus": {
          "background-color": "#13308a"
        },
        "border-radius": "8px"
      }
    },
    "text": {
      "total": "Subtotal"
    },
    "contents": {
      "note": true
    }
  },
  "toggle": {
    "styles": {
      "toggle": {
        "font-family": "Lato, sans-serif",
        "background-color": "#ed2a47",
        ":hover": {
          "background-color": "#a81f33"
        },
        ":focus": {
          "background-color": "#13308a"
        }
      },
      "count": {
        "font-size": "14px",
        "color": "#ffffff",
        ":hover": {
          "color": "#c8ad76"
        }
      },
      "iconPath": {
        "fill": "#ffffff"
      }
    }
  }
},
      });
    });
  }
})();
/*]]>*/
</script>

Below is the resulting iFrame rendered in browser:

<iframe horizontalscrolling="no" verticalscrolling="no" allowtransparency="true" frameborder="0" scrolling="no" name="frame-product-4840729411716" style="width: 100%;overflow: hidden;border: none;height: 50px;"></iframe>

Below is the full code as it's rendered in browser:

<div class="collection-price-div"><div class="additionalprice w-embed w-script"><div id="product-component-1840729411716" class="shopify-buy-frame shopify-buy-frame--product shopify-buy__layout-vertical" style="max-width: 280px;"><iframe horizontalscrolling="no" verticalscrolling="no" allowtransparency="true" frameborder="0" scrolling="no" name="frame-product-4840729411716" style="width: 100%;overflow: hidden;border: none;height: 50px;"></iframe></div>
<script type="text/javascript">
/*<![CDATA[*/
(function () {
  var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
  if (window.ShopifyBuy) {
    if (window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      loadScript();
    }
  } else {
    loadScript();
  }
  function loadScript() {
    var script = document.createElement('script');
    script.async = true;
    script.src = scriptURL;
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
    script.onload = ShopifyBuyInit;
  }
  function ShopifyBuyInit() {
    var client = ShopifyBuy.buildClient({
      domain: 'golden-moments-usa.myshopify.com',
      storefrontAccessToken: '7d944d2e69bddb24e7c33ba1395129bd',
    });
    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: '4840729411716',
        node: document.getElementById('product-component-1840729411716'),
        moneyFormat: '%24%7B%7Bamount%7D%7D',
        options: {
  "product": {
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "calc(25% - 20px)",
          "margin-left": "20px",
          "margin-bottom": "50px"
        },
        "text-align": "left"
      },
      "button": {
        "font-family": "Lato, sans-serif",
        "font-size": "14px",
        "width": "100%",
        "padding-top": "15px",
        "padding-bottom": "15px",
        "color": "#ffffff",
        ":hover": {
          "color": "#ffffff",
          "background-color": "#a81f33"
        },
        "background-color": "#ed2a47",
        ":focus": {
          "background-color": "#13308a"
        },
        "border-radius": "8px",
        "padding-left": "30px",
        "padding-right": "30px"
      },
      "quantityInput": {
        "font-size": "14px",
        "padding-top": "15px",
        "padding-bottom": "15px"
      },
      "price": {
         "font-family": "Lato, serif",
        "font-weight": "700",
        "font-size": "20px",
        "color": "#4d4d4d"
      },
      "compareAt": {
        "font-family": "Lato, serif",
        "font-weight": "bold",
        "color": "#0b1c51"
      }
    },
    "contents": {
      "img": false,
      "button": false,
      "buttonWithQuantity": false,
      "title": false,
      "options": false,
      "price": true
    },
    "googleFonts": [
      "Lato"
    ]
  },
  "productSet": {
    "styles": {
      "products": {
        "@media (min-width: 601px)": {
          "margin-left": "-20px"
        }
      }
    }
  },
  "modalProduct": {
    "contents": {
      "img": false,
      "imgWithCarousel": false,
      "button": true,
      "buttonWithQuantity": false
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0px",
          "margin-bottom": "0px"
        }
      },
      "button": {
        "font-family": "Lato, sans-serif",
        "font-size": "14px",
        "padding-top": "15px",
        "padding-bottom": "15px",
        "color": "#ffffff",
        ":hover": {
          "color": "#ffffff",
          "background-color": "#ed2a47"
        },
        "background-color": "#0b1c51",
        ":focus": {
          "background-color": "#13308a"
        },
        "border-radius": "8px",
        "padding-left": "30px",
        "padding-right": "30px"
      },
      "quantityInput": {
        "font-size": "14px",
        "padding-top": "15px",
        "padding-bottom": "15px"
      }
    },
    "text": {
      "button": "Add to cart"
    }
  },
  "cart": {
    "styles": {
      "button": {
        "font-family": "Lato, sans-serif",
        "font-size": "14px",
        "padding-top": "15px",
        "padding-bottom": "15px",
        "color": "#ffffff",
        ":hover": {
          "color": "#ffffff",
          "background-color": "#a81f33"
        },
        "background-color": "#ed2a47",
        ":focus": {
          "background-color": "#13308a"
        },
        "border-radius": "8px"
      }
    },
    "text": {
      "total": "Subtotal"
    },
    "contents": {
      "note": true
    }
  },
  "toggle": {
    "styles": {
      "toggle": {
        "font-family": "Lato, sans-serif",
        "background-color": "#ed2a47",
        ":hover": {
          "background-color": "#a81f33"
        },
        ":focus": {
          "background-color": "#13308a"
        }
      },
      "count": {
        "font-size": "14px",
        "color": "#ffffff",
        ":hover": {
          "color": "#c8ad76"
        }
      },
      "iconPath": {
        "fill": "#ffffff"
      }
    }
  }
},
      });
    });
  }
})();
/*]]>*/
</script></div></div>

Many thanks

Sign In

RadicalRooster

Posts

Joined

Last visited

Content Type

Profiles

Forums

Events

Posts posted by RadicalRooster

Force Height of External iFrame

Browse

Activity