Sub domain: Auto height and css modifications

This demo shows how you can use all features of advanced iframe if you are on a sub domain.

If your iframe is on a sub domain an easier way than the external workaround is possible. You still have to include one line of Javascript but the whole configuration is than like you are on the same domain and all settings can be done by shortcode. To enable this you need to set the value "document.domain" to your main domain (e.g. parent: www.tinywebgallery.com, iframe: example.tinywebgaller.com -> main domain: tinywebgallery.com) with Javascript on both pages. Advanced iframe does already does this for the parent. So you only need to do this in the iframe.

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!

Example 42 is like example 6 with auto height and hiding of elements. But it is not configured with the external workaround but like it would be on the same domain. So all settings are set in the shortcode directly.

Example 42: Sub domain - Auto height and hiding of elements

This example shows the auto height and the hiding of elements on a subdomain where you are able to set the document.domain on the sub domain. 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

The difference to example 6 is that

onload_resize="true" hide_page_until_loaded="true" iframe_hide_elements="#iframe-header,#iframe-footer,#some-images" iframe_content_id="#iframe-content" iframe_content_styles ="color:#ff0000"

are set in the shortcode and do not have to be set before the ai_external.js script.

add_document_domain="true" document_domain="tinywebgallery.com"

are set here in the shortcode to enable that the document.domain is written to the parent page.

The only thing that is set in iframe somewhere is

<script>
document.domain='tinywebgallery.com';
</script>

And the shortcode which is used is:
[advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" src="http://examples.tinywebgallery.com/example42/example.html" id="example42" height="300" width="800" scrolling="no" scrolling="no" onload_resize="true" hide_page_until_loaded="true" iframe_hide_elements="#iframe-header,#iframe-footer,#some-images" iframe_content_id="#iframe-content" iframe_content_styles ="color:#ff0000" add_document_domain="true" and document_domain="tinywebgallery.com" ]

Have fun using Advanced iFrame Pro,

Michael