Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1303440

    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,
    Henk

    • This topic was modified 2 years, 12 months ago by HenkS5.
    #1303700

    Hey 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,
    Ismael

    #1303891

    Hey Ismael,

    Sorry, the site was down. the site is available again.

    Kind regards,
    Henk

    #1304315

    Hi,

    The site is not using Enfold or any of our themes. Are you sure that it is the correct link?

    Best regards,
    Ismael

    #1304364

    Hi 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,
    Henk

    #1304581

    Hi,

    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 the main site (the one using Enfold) using a script and apply that same height value to the iframe in the main 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,
    Ismael

    #1306806

    Hi 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

    #1307042

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘iFrame in full height’ is closed to new replies.