External workaround: Post communication and include external content

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)
  • - Not supported by IE <= 8

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!

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.

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

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";
/* This is the difference to example 6 */
var usePostMessage = true;
var dataPostMessage  = true;
</script>
<script src="http://www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe/js/ai_external.js"></script>

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="http://examples.tinywebgallery.com/example51/example.html" id="example51" height="300" width="800" scrolling="no" usePostMessage="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

This feature is part of Advanced iframe pro 7.3 and not available yet!

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  = true;
var dataPostMessage="#c-id|#iframe-header,#s-id|#some-images,#p-id|#iframe-right p:nth-child(2)";
</script>
<script src="http://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="http://examples.tinywebgallery.com/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
  • Copy advanced-iframe/includes/scripts/jquery.min.js to your https site IF you don't have jQuery in the page in the iframe
  • Copy advanced-iframe/includes/scripts/jquery.ba-resize.min.js to your https site IF you use "resize on element resize"
  • Include ai_external.js not like described on the "external workaround" tab but directly from your https site
  • Set jquery_path and resize_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 and resize_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;
var dataPostMessage  = 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://ssl-account.com/sergiolerena.com/twg/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