This demo shows how you can use all features of advanced iframe if you are on a sub 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
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.
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
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,