An anchors is a link inside a page which is e.g. defined like href=”#section1″. If you click then the browser scrolls to the element with the id=”section1″.
This works fine if your iframe has scrollbars! When you use auto height then it it different! There is no scrollbar anymore and therefor anchors seems not to work anymore.
Since 2023.8 advanced iframe has a solution for it! It adds a listener to all links that are an anchor only. Means links start with a #. When a user clicks now on an anchor link the position of the target of the anchor is measured, returned to the parent and the parent page is scrolled to the correct position. This feature is available for the same domain and also for the external workaround. It is automatically enabled when you use auto height. Below you find the examples to the different scenarios:
- Iframe without auto height
- Iframe solution for the same domain (free + pro version)
- Iframe solution for an external domain (pro version)
Iframe without auto height
This is the default behavior of the browser! The browser jumps to the top of the iframe (Chrome) and inside the iframe it scrolls to the anchor. This is very confusing to the user as there are 2 jumps. One of the page and one inside the iframe.
Shortcode: [advanced_iframe src=”//www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe/example/page_anchor.html” width=”100%” height=”300″]
Iframe solution for the same domain
If you enable onload_resize=”true” at advanced iframe all anchors of the iframe are now checked and if they are clicked the position of the target is evaluated and the parent window is scrolled to the correct place.
Shortcode: [advanced_iframe use_shortcode_attributes_only=”true” id=”auto_height” src=”//www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe/example/page_anchor.html” width=”100%” height=”2000″ onload_resize=”true”]
Iframe solution for an external domain
If you use the external workaround and enable auto height there then automatically this feature is enabled as well. All clicks on an anchor send the position of the target by a postMessage to the parent and the parent does calculate the correct position is needs to scroll to. In this example the www.mdempfle.de is used as the external page where the ai_external.js is added.
Shortcode: [advanced_iframe use_shortcode_attributes_only="true" id="advanced_iframe" src="//www.mdempfle.de/examples/page_anchor_ext.html" width="100%" height="300" use_post_message="debug"]
The postMessage debug mode is enabled so you can check the browser console and see that on each click the position of a target of an anchor is send.
Please note that you might see additional events where you get an info + the event listed by advanced iframe. This can come from different plugins you use. This is perfectly fine! This postMessages are most likely handled by a different script. The debug mode should not be used for production use.
In the page_anchor_ext.html the external workaround is added and the following is set:
<script>
var updateIframeHeight = “true”;
var usePostMessage = true;
var debugPostMessage = true;
</script>
<script src=”//www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe/js/ai_external.js”></script>
You can configure the settings before the ai_external.js also directly in the administration! By default this settings are actually enabled! I only need to set this for my demos here as I support many scenarios in parallel.