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...
You can include ai_external.js to your page by selecting 'Yes' at "Options -> Add ai_external.js local" This does then include ai_external.js to ALL of your pages! As soon as your page is then included to an iframe the Javascript is active and your global configurations do work. But you can also include it to a single page by adding [ai_advanced_js_local]. If you use the short code then the ai_external is always included into the footer! If you include the Javascripts of advanced iframe to the footer you can even configure it by a script tag in the content section like described on the external workaround tab.
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 always the id "iframe-" + the id you have configured for ai_external.js e.g. iframe-advanced_iframe
So for this example this would be:
<script src="//www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe/js/ai_resize.js"></script>
<iframe id="iframe-advanced_iframe" src="your url" width="100%" height="500" style="visibility:hidden"></iframe>
ai_resize.js also supports scroll to top like the external workaround. You can define the html elements in the jQuery syntax at scroll_to_top where a scrolling to the top should happen. See the "external workaround" tab -> "Scroll to top" in the administration for details.
ai_resize.js also supports the safari cookie fix. Please read the documentation in ai_resize.js. Please note that after an update this file will be overwritten in its default locations. So I recommend to put it into the advanced iframe custom folder if you use this feature.
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!
ai_resize.js has a debug option which does print the data sent to the parent in the Javascript log. So the defaults are:
<script>
var advanced_iframe_debug = false;
</script>
<script src="//www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe/js/ai_resize.js"></script>
<iframe id="iframe-advanced_iframe" src="your url" width="100%" height="500" style="visibility:hidden"></iframe>
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. Also the scroll to top feature is activated here. The original page can be found here. There I have added
<script>
var iframe_hide_elements = "header,footer,#navigation";
var scroll_to_top = "#topLink";
var debugPostMessage = true;
</script>