-
Posts
-
Hello,
I am trying to figure out how to apply an iFrame so that the entire height is displayed and there are no double scrollbars.An example of such a frame is added in the provate content.
I have tried to follow the instructions of the support page: https://kriesi.at/support/topic/embedding-external-site-in-enfold-iframe/#post-834728.The solution mentioned works. However, in the mentioned solution, a fixed page size is applied. But I do not want to use a fixed page size as it varies from case to case. If I try to set the iFrame to height=”100%” then I get double scrollbars. How to solve this problem.
Any help would be appreciated.
Kind regards,
HenkHey HenkS5,
Thank you for the inquiry.
We tried to access the site above but it is not loading properly. Did you move the site? Please post the new URL so that we could inspect the iframe. We may be able to remove the scrollbar with css.
Best regards,
IsmaelHi,
The site is not using Enfold or any of our themes. Are you sure that it is the correct link?
Best regards,
IsmaelHi Ismael,
Excuse me, that was the link to the page to put in the iFrame.
Here is the link to the correct page in the website with Enfold: https://oudlisse.nl/uncategorized/beeldbanktest/.Kind regards,
HenkHi,
Do you have access to the site contained inside the iframe? We might be able to send data, such as the height of the content container, from the
iframe site(site inside the iframe) to themain site(the one using Enfold) using a script and apply that same height value to the iframe in themain site. This is possible but will require modifications on both site.In the
iframe site, you can add this script in any .js or javascript file.window.addEventListener('DOMContentLoaded', (event) => { const main = document.querySelector(".beeldverhaal"); window.postMessage(main.offsetHeight, 'https://oudlisse.nl/'); });And in the site using the Enfold theme, add this code in the functions.php file.
// a custom script // apply iframe height function ava_custom_script_mod_iframe_height() { if ( wp_script_is( 'avia-default', 'registered' ) ) { wp_add_inline_script( 'avia-default', ' window.addEventListener("message", event => { console.log(event.origin.startsWith); if (event.origin.startsWith("https://data.oudlisse.nl/")) { const iframe = document.querySelector("iframe"); iframe.style.height = event.data; } }); '); } } add_action( 'wp_enqueue_scripts', 'ava_custom_script_mod_iframe_height', 9999);Best regards,
IsmaelHi Ismael,
Thank you for pointing me in the right direction. After some experiments we succeeded with the following code:
Script iFrame sender
<script> // iFrame send height window.addEventListener('DOMContentLoaded', (event) => { const main = document.querySelector(".beeldverhaal"); window.postMessage(main.offsetHeight, 'https://oudlisse.nl/'); }); </script>And in the site using the Enfold theme add this to functions.php
// apply received iframe height function ava_custom_script_mod_iframe_height() { if ( wp_script_is( 'avia-default', 'registered' ) ) { wp_add_inline_script( 'avia-default', ' window.addEventListener("message", (event) => { if (event.origin.startsWith("https://data.oudlisse.nl")) { const container = document.getElementById("iframe-container"); container.style.height = event.data + "px"; } }); ' ); } } add_action( 'wp_enqueue_scripts', 'ava_custom_script_mod_iframe_height', 9999);Thanks for your help.
Kind regards,
Henk
- The topic ‘iFrame in full height’ is closed to new replies.