Jump to content
Sign in to follow this  
RadicalRooster

Force Height of External iFrame

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

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...