This demo shows the external workaround features which only available in the pro version of the advanced iframe. The height feature is part of the free version as well!
Using the external workaround on an external domain IF you are able to modify the external page. Than you are able to use the auto-height feature also available in the free version but also you are able to use the features of "Modify the content of the iframe if the iframe page is on the same domain".
To make it easier to copy/paste the examples most examples are fully configured in the shortcode directly. I use use_shortcode_attributes_only="true" that none of the settings from the administration are used.
The external workaround can be used if you want to use the automatic height feature and to modify the content of the iframe but you are on a different domain.
You need to be able to modify the external web page you want to have in the iframe to use the workaround!
Please read this overview about resize if you want to use it.
The 2 examples below do NOT change the height if you resize the browser. Only if you reload the page. This can also be enabled! Please see the responsive iframes demo. You only have to add enable_responsive_iframe="true".
The whole workaround is done by a lot of Javascript and the only thing you have to do is to add one line into the external page. Below you see some examples where the automatic height feature is shown and also the page is modified. Both examples hide the content until it is modified and also do change some colors. All demos here have the "Keep iframe modifications outside iframe" feature enabled.
Important:
It is important that the ids do match! The id in the ai_external.js has to be the same as the id in the shortcode! Otherwise the message to the parent is not processed! The default in the ai_external.js is advanced_iframe. You can set the id in ai_external.js in 2 ways
- On the basic tab in the field "Id"
- Before the ai_external.js: e.g. var iframe_id = "example6";
Example 6: Auto height and hiding of elements
This example shows the auto height and the hiding of elements. The header, footer and images are removed and the color of the content was changed. Take a look at the unmodified version: example page. Please delete all cookies to see the original if you go there as "Keep iframe modifications outside iframe" is enabled.
Because different configurations are used on this page the code changes in the external page are defined before the script is included:
<script>
var iframe_id = "example6";
var updateIframeHeight = "true";
var hide_page_until_loaded_external = "true";
var iframe_hide_elements = "#iframe-header,#iframe-footer,#some-images";
var iframe_content_id = "#iframe-content";
var iframe_content_styles = "color:#ff0000";
</script>
<script src="//www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe/js/ai_external.js"></script>
And the shortcode which is used is:
[advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" src="//www.mdempfle.de/examples/example6/example.html" id="example6" height="300" width="800" scrolling="no" hide_page_until_loaded_external="true"]
If you use only one iframe in your site you can use the settings in the administration and simply save them. This does save your settings to ai_external.js. Than you only have to include the script.
Important: If you configure the external script with the administration where the settings are save to ai_external.js don't forget to set "Enable the height workaround" to yes!
Example 7: Auto height and show one element only
This example does also use the auto height features but does only show one element of the external page. As example only the right div is shown. Also the styles of this div are changed because otherwise it would float right! Take a look at the unmodified version first: example page. This feature also used lazy loading.
New 6.3: Because different configurations are used on this page the code changes in the external page loaded through an external config files which ist stored on the parent server and can be handled (created, viewed, edited and removed) from the administration
ai_external_config_example7.js (located in the main plugin folder)
var iframe_id = "example7";
var updateIframeHeight = "true";
var hide_page_until_loaded_external = "true";
var onload_show_element_only = "#iframe-right";
var iframe_content_id = "#iframe-content|#iframe-right";
var iframe_content_styles = "color:#ff0000|float:none;height:300px";
On the external page only the config_id parameter is needed now:
<script src="//www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe/js/ai_external.js?config_id=example7"></script>
And the shortcode which is used is:
[advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" src="//www.mdempfle.de/examples/example6/example.html" id="example7" height="200" width="400" scolling="no" enable_lazy_load="true" hide_page_until_loaded_external="true" enable_lazy_load_threshold="200" enable_lazy_load_fadetime="0"]
Important: If you configure the external script with the administration where the settings are save to ai_external.js don't forget to set "Enable the height workaround" to yes!
Have fun using Advanced iFrame Pro,
Michael