This feature is now part of 7.5.2 and does the opposite then the normal usage of advanced iframe. Normally you include a different page or parts of it in an optimal way to your page. Now you can also offer your page or parts of your page to be optimal included to other pages. You only give your users your url and they can use this in their iframes. By adding a little additional script you also get all auto height features!
Advanced iframe pro offers two ways to share content from your own domain: By a content filter or by adding the ai_external.js locally. This demo does show the way by adding the ai_external.js on your domain. Please note that this is the more complicated but also more powerful solution!
ai_external.js is the file you normally need to include into the remote iframe. As we turn around everything this file has now to be included simply to your page. The usage is actually the same as for the external workaround. So please read the “external workaround” tab how to configure e.g. auto height, removal of elements and so on…
So the only then after that you have to do is adding your page to an iframe. e.g. <iframe id=”iframe-advanced-iframe” src=”your url” width=”100%” height=”500″></iframe>
This way you can already e.g. hide the header and footer like i do in the example below.
But advanced iframe does offer more. Also the auto height feature is supported. You need to use postMessage communication (Use postMessage for communication) and enable “Support WP multisite”. Please enable this on the “external workaround” tab. After that you simply have to include the file “wp-content/plugins/advanced-iframe/js/ai_resize.js” to the page you want to show your page in. The important part is the id. The iframe has alsways the id “iframe-” + the id you have configured for ai_external.js e.g. iframe-advanced_iframe
So for this example this would be:
<iframe id=”iframe-advanced_iframe” src=”your url” width=”100%” height=”500″ style=”visibility:hidden”></iframe>
And now you are done! You offer parts of your page with auto height like shown in the example below. Please also set style=”visibility:hidden” to the iframe. The resize script will make the iframe visible again! And you will not see the css changes which are done after loading the page!
var advanced_iframe_debug = false;
In the example below I use the [ai_advanced_js_local] short code and hide the <header>, <footer> and the #navigation element and use an iframe with a red border. The original page can be found here. There I have added
var iframe_hide_elements = “header,footer,#navigation”;