The reason why this feature exist is that elements which are hidden with the css style "display:none" do return 0 as height when measured with Javascript on almost any browser. So if you want to resize an iframe to his content height and the content is measured the default way it would not work if the iframe is now shown. Chrome does measure hidden elements but completely wrong as well. They are much too large then.
The best example for this is when you use a tab plugin. Most of the existing implementations do show the first tab and hide all the others. When the other tab is clicked the currently shown is hidden and the clicked one is shown. The plugins I use are "Tabby Responsive Tabs" and for the nested tabs "Post UI Tabs"
To enable the solution you need to specify the hidden elements and depending on the template also a visible element with the same size as the hidden one. Please see the examples below and also read the documentation in the settings of advanced iframe pro.
Example 17: Simple hidden iframe auto height example
This example shows 3 tabs where tab 2 and 3 have iframes from the same domain which are hidden by default. The tab 2 does use the height workaround while tab 3 does not.
The id of tab 1 is "tablist1-panel1", of tab2 is "tablist1-panel2" and of tab3 is "tablist1-panel3".
Tab 1 without iframe
This is a simple tab without an iframe
Tab 2 with iframe working
This is a tab with an iframe from the same domain and the height workaround. The important settings on tab 2 are tab_hidden="#tablist1-panel2" and tab_visible="#tablist1-panel1". You need to specify the hidden tab and also a visible element which has the same width as the hidden element. So for tabs always the first tab can be used.
This is the shortcode for the iframe on tab2:
[advanced_iframe securitykey="your key" id="example17a" frameborder="0" src="//www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe/example/example17.html" width="100%" height="20" use_shortcode_attributes_only="true" onload_resize="true" tab_hidden="#tablist1-panel2" tab_visible="#tablist1-panel1"]
Tab 3 with iframe not working
This is a tab with the same iframe as in tab 2 from the same domain without the height workaround. Here you don't see the iframe because it has a height of 0. You only see the border of 1 px!
This is the shortcode for the iframe on tab3:
[advanced_iframe securitykey="your key" id="example17b" style="border: 1px solid #f00;" src="//www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe/example/example17.html" width="100%" height="20" use_shortcode_attributes_only="true" onload_resize="true"]
Example 18: Nested hidden iframe auto height example
This example has 2 tabs where on the 2nd tab is another tab plugin with 3 more tabs. There also the new auto height solutions is shown. The big difference to the solution above is that the iframe is on a different domain and also that is is on a nested tab! For a working solution all hidden elements to the iframe have to be specified and also a timeout for the remote resize is needed because the onload event on the parent does trigger to show the hidden elements. But at this time the Javascript in the iframe does already run. Therefore a delay of the resize in the iframe is needed. Please see the settings below for a working example.
Please note: Nested hidden Tabs do not work together with responsive
The id of tab 1 is "tablist2-panel1", of tab2 is "tablist2-panel2".
The id of the nested tab 1 is "tabs-1-1", of tab2 is "tabs-1-2" and of tab 3 is "tabs-1-3"
Tab without iframe
This is a simple tab without an iframe
Tab with nested iframe
This is the tab with 3 other nested tabs. The iframes on tab 2 and 3 are on a DIFFERENT domain (examples.tinywebgallery.com). The tab 2 does use the height workaround while tab 3 does not. The important settings on tab 2 are tab_hidden="#tablist2-panel2,#tabs-1-2" and tab_visible="#tablist2-panel1". You need to specify all hidden parent elements of iframe and also a visible element which has the same width as the first hidden parent element. Here this would be the visible tab of the outer tab.
This is a nested tab without an iframe
This is a tab with an iframe from a different domain and the height workaround.
The tab 2 does use the height workaround while tab 3 does not. The important settings on tab 2 are tab_hidden="#tablist2-panel2,#tabs-1-2" and tab_visible="#tablist2-panel1". You need to specify all hidden parent elements of iframe and also a visible element which has the same width as the first hidden parent element. Here this would be the visible tab of the outer tab.
Because this is on a remote domain you also need to specify a timeout before the Javascript is included:
var iframe_id="example18a";
var updateIframeHeight = "true";
var onload_resize_delay = 1000;
This is the shortcode for the iframe on the sub tab2:
[advanced_iframe securitykey="your key " id="example18a" frameborder="0" src="//www.mdempfle.de/examples/example18a/example.html" width="100%" height="20" use_shortcode_attributes_only="true" tab_hidden="#tablist2-panel2,#tabs-1-2" tab_visible="#tablist2-panel1"]
This is a tab with the same iframe as in tab 2 from a different domain without the height workaround. Here you only see 4 pixel of the iframe because it has a height of 0 with a default offset of 4 with a border of 1 px!
If you use Chrome you see a very large iframe because Chrome does measure hidden elements but completely wrong as well.
Because this is on a remote domain you also need to specify a timeout before the Javascript is included:
var iframe_id="example18b";
var updateIframeHeight = "true";
var onload_resize_delay = 1000;
This is the shortcode for the iframe on the sub tab3:
[advanced_iframe securitykey="da39a3ee5e6b4b0d3255bfef95601890afd80709" id="example18b" frameborder="2" src="//www.mdempfle.de/examples/example18b/example.html" width="100%" height="20" use_shortcode_attributes_only="true" ]
Example 28: Hidden iframe auto height example with auto lazy loading
This example shows how to use lazy loading with the setting "auto" to make hidden tabs to resize properly. This is much easier to configure as you don't need to specify and visible and hidden tabs. The iframe is NOT loaded in the background here. So you have to decide which solution your prefer.
Tab 1 without iframe
This is a simple tab without an iframe
Tab 2 with iframe working
This is a tab with an iframe from the same domain and the height workaround.
This is the shortcode for the iframe on tab2:
[advanced_iframe securitykey="your key" id="example28" frameborder="0" src="//www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe/example/example28.html" width="100%" height="800" use_shortcode_attributes_only="true" onload_resize="true" enable_lazy_load="true" enable_lazy_load_manual="auto" show_iframe_loader="true"]