One of the most asked questions is how to resize the iframe to the content of the external page. It is sometimes confusing which of the features you have to use to achieve this. There is only a solution possible for the same domain and for an external domain using the external workaround wher eyou need to add one line of Javascript to the external domain. For the external workaround there are 2 ways of communication where the “postMessage” is now the recommended default. I have divided the page into 2 sections: The one where you are on the same domain or you are able to add one line of JS to the other domain (the so called external workaround) and the one if you don’t have access.
Important: The configuration on the same domain can be done in the administration or in the short code. For the external workaround you only can do this in the administration because this settings are also saved to ai_external.js. Or you can do the configuration of ai_external.js directly before you include the ai_external.js. Settings in the short code do not work for the external workaround. There are only some special settings where you need to do it on both b´places but if this is the case it is described and always shown in a example!
Same domain or you are able to use the external workaround
Responsive content in the iframe
If the page in the iframe is responsive the basic 3 things you have to configure are:
- Resize the iframe when the page is loaded.
- Resize the iframe when content in the iframe changes dynamically.
- Resize the iframe if the browser size changes/make a iframe fully responsive.
Depending on your page you don’t need all of them and therefore it is not possible for the plugin to use one simple settings.
1. Resize the iframe when the page is loaded
First you need to resize the iframe when the iframe is loaded:
Same domain: This can be enabled with onload_resize=”true”. See “Advanced Settings -> Resize the iframe to the content height/width” for additional settings. Most of the time only the “Resize delay” makes sense for normal users. The settings till “AJAX events are jQuery” are quite advanced and should only be used if “Resize on element resize” does not work (see 2.) or not available for you because this is a pro feature. See the free and the sub domain demo for a working example. Even if you are on the same domain some times it makes sense also to use the external workaround! The solution for the same domain is the same for the free and the pro version. But the external workaround of the pro version is much better and has more options!
External workaround: This can be enabled on the “External workaround” tab. Please follow the instructions on this tab. There are many options to optimize this but by default including the ai_external.js to the remote page is already enough. See the demos for postMessage and iframe communication.
Sometimes the pages in the iframe do load their content dynamically! In this case you can delay the auto height for both solutions. See onload_resize_delay or “Resize/ css modification delay”.
2. Resize the iframe when content in the iframe changes dynamically
This should be enabled if your content in the page can change because of a hidden area which is shown if e.g. a button is clicked or you have tabs. Also this helps if content is replaced dynamically by Ajax.
To enable this go to Advanced Settings -> Resize the iframe to the content height/width -> Resize on element resize” and configure it. As this setting is saved to ai_external.js the configuration can be done here for the same domain and also for the external workaround! See here for a working example.
3. Resize the iframe if the browser size changes/ make a iframe fully responsive.
I first start with my definition of responsive: The page adopts automatically to the size of the browser! Also see my post here about this topic.
1. and 2. are already a big step into this direction. If you load a page to a given browser size then 1 and 2 actually close to a responsive page if you have set a width of 100%. So what is missing?
- If you have defined a fixed width for the browser it does not work if the browser size is smaller than the width
- Changes to the browser size are not detected
- Rotation of a device are not detected.
- IOS does ignore width settings! Enabling this settings sets max-width: 100% which can solve this problem.
Advanced Settings -> Enable responsive iframe does solve this 4 points. by adding max-width:100% and re-triggering all resize functions for the same domain when needed. If you use the external workaround also enable 2 as the new height needs to be sent.
See here for working examples.
Summary: Depending on your webpage you need 1+2, 1+3 or 1+2+3. As I don’t know your website I cannot automatically set this for you and also only the needed additional Javascript code should be rendered. My recommendation is that if you have dynamic content try 1+2, otherwise 1+3
Not responsive content in the iframe
If the content in the iframe is not response everything is a little bit different. The height can be measured but also a zoom has to be applied.
Please look at https://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/auto-zoom-iframe-content for a couple of examples for this scenario.
Also you can try to modify the css dynamically with the plugin and then use 1-3 again… At 1 and 2 you see examples how css is modified.
If you don’t have access to the remote domain
If you are on a different domain and you are not able to use the external workaround then you are not able to do real auto height. But maybe one of my provided solutions is also working for you to make your content at least responsive and therefore usable also on mobile devices.
- Content with a fixed ratio in the iframe (e.g. videos, swf):
https://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/responsive-videos - Content that does scales with a fixed ratio
https://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/auto-zoom-iframe-content#e35 - Show different areas depending on the viewport
https://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/show-only-a-part-of-the-iframe#e55
I hope this overview helps you to find the best solution for your page.
Best,Michael