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 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:
<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>