Jump to content

Force Height of External iFrame


RadicalRooster
 Share

Recommended Posts

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

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...