External workaround: Auto height with post communication and include external content

This demo works for HTTP and HTTPS. You are on HTTPS right now Please click here to get to the HTTP version.

This demo shows the external workaround with post communication. The following examples with the used shortcodes can be found on this page:

You can use 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 with postMessage 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".

The big difference to example 6 and 7 is that a different way of communication is used. This can be enabled by "Use post message for communication". This way has the following advantages/disadvantage

  • +  XXS restrictions do not apply. So ai_external.js can be placed everywhere with the same protocol: The external workaround does also work when https pages are included to http pages!
  • + Multi domain sites can be configured much easier.
  • + Additional data can be transferred as no browser url restrictions do apply (See example 52)

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.

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. 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 = "example51";

The examples below use use_post_message="debug". This should not be used in production as it e.g. also print messages if post messages are received that do not belong to advanced iframe pro and can therefore not parsed or do not belong to this iframe instance! This is filtered later on but very useful to find out what kind of messages fly around ;)! Use "true" when you are done with the configuration!

You need to include YOUR version of the ai_external.js. The administration on the external workaround tab shows you the snippet you can copy 1:1. If you copy the ones from the demo below it will not work as my version is configured to work with www.tinywebgallery.com and not with your domain.

Example 51: Auto height and hiding of elements with postMessage

This example shows the auto height and the hiding of elements with postMessage enabled. It is the same as example 6 otherwise. The header, footer and images are removed and the color of the content was changed. Take a look at the unmodified version first: example page. Please open this page in a new browser because the "keep modification" feature is enabled.

Additional features:

  • The scroll to top for the external workaround is enabled. Please click on the "scroll to top" button to see this feature.
  • Anchor support: You can scroll directly to an anchor in the iframe. In this example the # is added dynamically with #{query-anchor}. Click here to jump to the anchor/id "iframe-content" already (new version 2019).

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 = "example51";
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";
var scroll_to_top = "#totop";
/* This is the difference to example 6 */
var usePostMessage = true;
</script>
<script src="https://www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe/js/ai_external.js"></script> <-- here YOUR version of the script needs to be included. The administration on the external workaround tab shows you the snippet you can copy 1:1.

If you use postMessage globally for all your iframes you only need to enable this in the administration! But it can also be enabled for a single example like shown here: The important part is that a setting is needed in the short code and before the ai_external.js. Also different settings are needed if you want to debug this. If you enable debug you see log statements in the Javascript console of your browser. For the shortcode use_post_message is needed with the setting "true" or "debug". In the iframe the 2 settings usePostMessage  and dataPostMessage with "true", "false" are needed.

And the shortcode which is used is:
[advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" src="//www.mdempfle.de/examples/example51/example.html#{query-anchor}" id="example51" height="300" width="800" scrolling="no" use_post_message="debug"]

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" or "External"!

Example 52: Include content directly with post message communication

When you enable post communication you can read elements from the iframe and transfer it to the parent and include it there. This is like the feature "Include content directly" from the "Add files/content" from the next tab but more powerful. You can define here as many elements you like and insert it to the parent page.  Currently the iframe is NOT hidden by default. After the setup you need to set style="display:none;" to do this.

Below 3 areas from the remote page are read:

  1. #iframe-header - the header div
  2. #some-images - the images div
  3. #iframe-right p:nth-child(2) - the 2nd p in the right div

This 3 areas are then inserted to the parent page at the given ids. e.g.  #c-id|#iframe-header means that the content in the iframe with id="#iframe-header" are inserted into the parent div with the id="c-id".

<script>
var iframe_id = "example52";
var updateIframeHeight = "true";
var hide_page_until_loaded_external = "true";
var usePostMessage = true;
var dataPostMessage="#c-id|#iframe-header,#s-id|#some-images,#p-id|#iframe-right p:nth-child(2)";
</script>
<script src="https://www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe/js/ai_external.js"></script> <-- here YOUR version of the script needs to be included. The administration on the external workaround tab shows you the snippet you can copy 1:1.

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" usePostMessage="debug"]

Below you see the elements that are extracted from the remote page:

div c-id:

id1

div s-id:

id2

div p-id:

id3

Please note: you need to style the elements you insert into your page as only the html is inserted.

Example 53: Auto height and hiding of elements with postMessage AND a HTTPS page inside the iframe

This example is exact as example 51 BUT with the big difference that hat page inside the iframe is HTTPS! And because of this the configuration is a little bit different. Javascript files cannot be loaded from the parent page because it is not allowed to load unsecure Javascript content (http) from a https page! Therefore the following changes has to be made:

  • Make all settings you like and copy the ai_external.js to your https site. usePostMessage  AND domainMultisite  have to be set to true in the administration!
  • Copy advanced-iframe/includes/scripts/jquery.min.js to your https site IF you don't have jQuery in the page in the iframe
  • Include ai_external.js not like described on the "external workaround" tab but directly from your https site
  • Set jquery_path if needed. For more complex pages I recommend to set the full url and not a relaive path like in the example below.

The header, footer and images are removed and the color of the content was changed. Take a look at the unmodified version first: example page

Because different configurations are used on this page the code changes in the external page are defined before the script is included. The important part is that jquery_path need to be set before the ai_external.js. The other settings can also be set in the administration, saved to the ai_external.js and the ai_external.js has to be copied again to the https page:

<script>
var iframe_id = "example53";
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";
/* This is the difference to example 6 */
var usePostMessage = true;
/* This is the difference to example 51 */
var domainMultisite = true;
var jquery_path = 'jquery.min.js';
var resize_path = 'jquery.ba-resize.min.js';
</script>
<script src="ai_external.js"></script>

And the shortcode which is used is:
[advanced_iframe securitykey="da39a3ee5e6b4b0d3255bfef95601890afd80709" use_shortcode_attributes_only="true" src="https://www.mdempfle.de/examples/example53/example.html" id="example53" height="300" width="100%" scrolling="no" use_post_message="debug" multi_domain_enabled="true"]

Because multi domain and postMessage is enabled you can try this short code with your security key on your site.  Than this example iframe should work the same as here!

Have fun using Advanced iFrame Pro,

Michael