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 with the content filter. Please note that this is the easier solution but not so powerful. Also it has the advantage that also filtering in the server side is possible.
You can enable this by setting “Options -> Enable content filter”.
So you can offer parts of your page that then can be included into any iframe. You only need to specify the id of the element you want to show with the parameter ?ai-show-id-only=id. If you only specify this parameter the whole page is loaded and then with Javascript all other elements are hidden. If you add &ai-server-side=1 to the url the content is filtered on the server side but this only works for elements which are in the content area because everything else depends on the template. So if you e.g. want to show different comments from you page the server side solution does not work.
So the only then after that you have to do is adding your page to an iframe. e.g. <iframe id=”advanced-iframe” src=”your url?ai-show-id-only=id” width=”400″ height=”300″></iframe>
But advanced iframe does offer more. Also the auto height feature is supported.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.
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-linkcat-127″ src=”//www.tinywebgallery.com/blog/iframe-do-not-mix-http-and-https?ai-show-id-only=linkcat-127″ width=”400″ height=”1″ style=”visibility:hidden” scrolling=”no”></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! I recommend to use scrolling=”no” as the height sometimes differ depending on the browser for a few pixels!
Below you see a comment with the id=”linkcat-127″ from the page //www.tinywebgallery.com/blog/iframe-do-not-mix-http-and-https. You can also open the url directly: //www.tinywebgallery.com/blog/iframe-do-not-mix-http-and-https?ai-show-id-only=linkcat-127
The 2nd example shows one element from the FAQ page //www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-faq where one div has the id=faq-2. As this is part of the content it is possible to filter the content on the server already with &ai-server-side=1. So the url you need to include is //www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-faq?ai-show-id-only=faq-2&ai-server-side=1. &ai-show-overflow=1 was not added here as auto height is used here and I do’t like scroll bars here at all.
<iframe id=”iframe-faq-2″ style=”border: 1px solid red; visibility: hidden;” src=”//www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-faq?ai-show-id-only=faq-2&ai-server-side=1″ width=”100%” height=”1″></iframe>