Dynamic Iframe Height and Link Tracking for New Tab

Ask the community
, ,
1

Question:

I am facing issues with dynamic iframe height on my website, specifically when links inside the iframe are clicked. The height of the section containing the iframe does not adjust to the new content.
Product:

Wix Editor
What are you trying to achieve:

I want the section that contains the iframe to dynamically adjust its height based on the content loaded within the iframe. Additionally, I would like to track link clicks within the iframe so that when a user tries to open a link in a new tab, it loads both the link’s content and the main page that hosts the iframe, making the iframe appear seamless.
What have you already tried:

Adding JavaScript to the iframe page:

javascript

window.addEventListener(‘load’, function() {
let observer = new MutationObserver(() => {
let height = document.body.scrollHeight;
window.parent.postMessage({ height: height }, “*”);
});

observer.observe(document.body, { childList: true, subtree: true });

// Detect changes in URL (when navigating within the iframe)
window.addEventListener('popstate', function() {
    let height = document.body.scrollHeight;
    window.parent.postMessage({ height: height }, "*");
});

});

Modifying code on the main page:

javascript

$w.onReady(function () {
let iframe = $w(“#myIframe”);
iframe.onMessage((event) => {
if (event.data.height) {
iframe.height = event.data.height + “px”;
}
});
});

Edit Custom Code (dashboard settings):

html

Additional information:

My website is iordanisjewelry.gr, and the iframe is from iordanis-frame-categoryembed.jewelershowcase.com, an external source. I am looking for any advice or solutions that the community may have on this topic, as I believe it may help not only me but others facing similar issues.

If anyone has a working solution and is available for freelance assistance, please let me know—I’d be happy to discuss compensation.

2

iFrames on Wix/Wix Studio are usually static in width and height - meaning no matter what changes happen within the iFramer, whether navigating to a new page or something else, it will remain the same height.

You might want to explore using a Custom Element that allows you more flexibility and can adjust it’s sizing accordingly. I haven’t tried this use case before so don’t have any examples to hand though

3

Thank you for your suggestion, I appreciate your insight.

The idea of using a Custom Element sounds promising. Could you provide more information or guidance on how I might go about implementing this? Even if you haven’t tried this specific use case before, any tips or resources you can share would be incredibly helpful.

Additionally, if this is something you’d be willing to assist with, please let me know your availability and any associated costs.

Thanks

4

Here’s some more details about Custom Elements - About Custom Elements

This is probably something best suited to someone with experience in using Custom Elements