Auto-Resizing Juicer iframes to Fit Content

By default, iframes require you to set a fixed height, which can lead to scrollbars or awkward spacing as your Juicer feed loads and grows. This guide shows you how to resize your Juicer iframe automatically to perfectly fit its content.

How It Works

Juicer feeds automatically send size information to the parent page as they load using the browser's postMessage API. This script listens for those messages and adjusts your iframe height accordingly.

Note: The iframe may resize multiple times as your feed loads - this is normal behavior as images load, animations complete, and users click "Load More" to view additional posts.

The Auto-Resize Script

Add this JavaScript code to your page after your Juicer iframe:

window.addEventListener('message', function(event) {
    // Verify this is a Juicer feed size message
    if (event.data && event.data.type === 'juicer:feedSize') {
      var dimensions = event.data.dimensions;

      // Find the Juicer iframe (adjust selector if needed)
      var iframe = document.querySelector('iframe[src*="juicer.io"]');

      if (iframe) {
        // Only update height - width is handled by responsive design
        iframe.style.height = dimensions.height + 'px';

        // Optional: Log for debugging
        console.log('Juicer feed resized to height:', dimensions.height + 'px');
      }
    }
  });

Complete Implementation Example

Here's a full example showing the iframe and resize script together:

 <!-- Your Juicer iframe -->
  <iframe src="https://www.juicer.io/api/feeds/YOUR-JUICER-FEED-NAME/iframe" 
          frameborder="0" 
          width="100%" 
          height="800" 
          style="display:block;margin:0 auto;">
  </iframe>

  <!-- Auto-resize script -->
  <script>
  window.addEventListener('message', function(event) {
    if (event.data && event.data.type === 'juicer:feedSize') {
      var dimensions = event.data.dimensions;
      var iframe = document.querySelector('iframe[src*="juicer.io"]');

      if (iframe) {
        iframe.style.height = dimensions.height + 'px';
      }
    }
  });
  </script>

Customizing the Script

Multiple Juicer iframes on one page

If you have multiple Juicer iframes, you'll need to make the selector more specific:

Add an ID to your iframe:
```
<iframe id="my-juicer-feed" src="<https://www.juicer.io/api/feeds/YOUR-FEED-NAME/iframe>"></iframe>
```
- YOUR-FEED-NAME (in the src URL) = Your actual Juicer feed slug
  - Example: https://www.juicer.io/api/feeds/mycompany/iframe
Then target it specifically:
```
var iframe = document.getElementById('my-juicer-feed');
```
- my-juicer-feed (in the id attribute) = An arbitrary HTML ID you choose
  - Example: <iframe id="my-juicer-feed" ...>
  - This is just a label to target that specific iframe element with JavaScript
  - You can name it anything: "main-feed", "social-feed", "juicer-1", etc.

Debugging

If the resize isn't working, uncomment the console.log line in the script and check your browser's console (F12) to see if messages are being received.

Important Notes

⚠️ This script only works with iframe embeds. If you're using the standard JavaScript embed method, the feed already handles its own sizing automatically.

✅ Same-origin policy: This script uses postMessage, which is designed to work across domains, so it will work even though your page and the Juicer iframe are on different domains.

✅ Width handling: The script only adjusts height. Set your iframe width to 100% or a fixed pixel value as needed - the feed inside is responsive.