Debug Javascript example

This demo works for HTTP and HTTPS. You are on HTTPS right now Please click here to get to the HTTP version.

Since 7.5.2 you can enable that the advanced iframe messages that are normally displayed in the Javascript console are displayed in a div and not in the browser console anymore. In the setting you can define where the div is shown. Please use this setting if you have problems on Android or IOS because there it is quite hard to get on the infos displayed in the Javascript log. The debug console is only shown once independent of the numbers of iframes you have on the page but always displayed below the first one if you choose to display the debug console below the iframe. Important: You need to use the external workaround with postMessage (see the external workaround tab) if you also want to get the messages from the page in the iframe! Click/tab on the debug area to enlarge/shrink it.

You can also enable the Javascript debug console dynamically by adding ?aiEnableDebugConsole=true to your page! This is saved in a session cookie with the name aiEnableDebugConsole. It can be disabled again with ?aiEnableDebugConsole=false or closing the browser.

The example below shows a wrong configuration of resize on element resize on the same domain.

Advanced iframe debug console - l: local messages, r: remote messages
User agent: Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)

Headers of https://www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe/example/example_dynamic_26.html:
HTTP/2 200
vary: User-Agent
last-modified: Sun, 14 Feb 2021 23:18:44 GMT
etag: "f27-5bb54173a363b"
accept-ranges: bytes
content-length: 3879
origin-agent-cluster: ?0
content-type: text/html; charset=UTF-8
date: Wed, 18 Dec 2024 09:06:03 GMT
server: Apache/2.4.62 (Unix)

The page does exist and no X-Frame-Options header was found. But there can still be a iframe blocker script on this page. Go here for a full check.

[advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" src="{site}/wp-content/plugins/advanced-iframe/example/example_dynamic_26.html" onload_resize="true" width="800" height="100" resize_on_element_resize="#wrong-element" resize_on_element_resize_delay="100" id="example26" debug_js="bottom" ]

You should only use this to find errors on mobile devices. For a PC it is easier to look into the Javascript console. You can open it on most browsers with F12. Messages of advanced iframe do only appear in the debug div or in the browser console!