Share content from your domain: Add ai_external.js local

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 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:
<script src=”http://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>

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 2 options. By default the id is “iframe-advanced_iframe”.A debug option is available which does print the data sent to the parent in the Javascript log. So the defaults is:

<script>
var advanced_iframe_debug = false;
</script>
<script src=”http://www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe/js/ai_resize.js”></script>

In the example below I use the [ai_advanced_js_local] short code and hide the <header> and <footer> element and use an iframe with a red border. The original page can be found here.