Sub domain: Auto height and css modifications

This demo works for HTTP only! Please click here to get to the HTTP version. The reason is that I don't have a SSL certificate for the sub domain examples.tinywebgallery.com. If you have a wildcard SSL certificate this feature of course also works with HTTPS.

IMPORTANT: Chrome restricted the setting of document.domain in version 109!
See https://developer.chrome.com/blog/immutable-document-domain/ and my blog entry
. Please use the normal external workaround!

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.tinywebgallery.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

Http iframes are not shown in https pages in many major browsers. Please read this post for details.

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>

Important: Some websites and also some other plugins (e.g. some versions of elementor) have problems if you set document.domain='...'. They completely crash or features like iframe editors do not work anymore! Check the browser console (F12) before and after activating this. So if this is the case for your website please use the normal external workaround with ai_external.js. There no issues like this are known so far!

Of course you have to replace tinywebgallery.com with your domain ;).

And the shortcode which is used is:
[advanced_iframe securitykey="your key if you use one" 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" document_domain="tinywebgallery.com" ]

Have fun using Advanced iFrame Pro,

Michael