Advanced iframe free demo

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

The demo has the same features like the "Demo TWG wrapper" (remove of elements, css modification, parameter passing) but here additional the features available in the advanced iframe free are also shown. Most features do only work if you are on the SAME domain (SD)!

  • Resize the iframe to the content height (with reload optimization). Please read this overview about resize if you want to use it. - onload_resize="true" resize_on_click="100"
  • Scroll the parent to the top of the iframe when you click inside the iframe (scrolling to top of parent is also a possible configuration) - onload_scroll_top
  • Add a css  file to the parent page (for the lytebox - the TWG wrapper has this hardcoded and this is now dynamic for the advanced iframe)
  • Hide elements in the iframe: The text below the title is removed (See the original page here). - SD - iframe_hide_elements
  • Change css in the iframe: The background color was changed (See the original page here). - SD - additional_css, iframe_content_id + iframe_content_styles
  • For the features of the pro version please see "advance iframe pro demo"
  • url parameters twg_album and twg_image are forwarded to the iframe. This link opens the iframe in an album already. ?twg_album=01_Administration~01_admin is added there. - url_forward_parameter
  • Anchor support: You can scroll directly to an anchor in the iframe. In the free version your can directly add a # to the url. In this example the # is added dynamically with #{query-anchor} which is a feature of the pro version. Click here to jump to the anchor "content_table" already.
  • Lazy loading: loading="lazy" is rendered. Currently the threshold seems to me 3000px. So this page does not really lazy load but it shows that the element is rendered. See here for the current support.
  • Adding a custom attribute: e.g. custom="data-custom='data-custom'". See the rendered source code and search for data-custom.
  • Adding a referrerpolicy: referrerpolicy="no-referrer"

The shortcode is only
[advanced_iframe securitykey="your security code" ]
because all settings are stored in the administration.

If you would define all settings as shortcode attributes the shortcode would look like this:
[advanced_iframe securitykey="your security code" use_shortcode_attributes_only="true" src="//" width="100%" height="100" scrolling="no" id="advanced_iframe" name="advanced_iframe" onload_scroll_top="iframe" hide_page_until_loaded="true" hide_elements=".info,#sidebar,h2" content_id="#main" content_styles="margin-top:0px;width:900px" iframe_hide_elements=".twg_folderdescription,.topnavleft" iframe_content_id="#twg_content_div" iframe_content_styles="background-color: #fff;" onload_resize="true" resize_on_click="100" additional_css="//" url_forward_parameter="twg_album,twg_image" loading="lazy" custom="data-custom='data-custom'" referrerpolicy="no-referrer"]