Advanced iframe pro demos

This demos show the features only available in the pro version of the advanced iframe. As you can see on the feature comparison chart depending on your setup not all features are always available. The following features are shown:

• "Show only a part of the iframe" if you are NOT on the same domain and you are NOT able to modify the external page
  • Example 1: Show a read only part of a remote page
  • Example 2: Show another read only part of the remote page of example 1
  • Example 3: Use a different viewport after a user interaction
  • Example 4: Jumping to a different url after an user interaction
  • Example 5: Using scrollbars for a view port
  • Example 39: Zoom a view port (new 7.0)
  • Example 40: Zoom a view port which also enlarges (new 7.0)
  • Example 41: Zoom a view port and “Hide a part of the iframe” (new 7.0)
  • Example 43: Zoom a view port with loading indicator, scrollbars and ios scrolling support (new 7.0.4)
  • Example 55: Show different view ports with media queries
• Using the external workaround on an external domain IF you are able to modify the external page. Than you are able to use the auto-height feature also available in the free version but also you are able to use the features of "Modify the content of the iframe if the iframe page is on the same domain"
  • Example 6: Auto height and hiding of elements
  • Example 42: Sub domain - Auto height and hiding of elements
  • Example 7: Auto height and show one element only
• External workaround: Post communication and include external content The newer way that the iframe communicates with the parent + new features that are possible now:
  • Example 51: Auto height and hiding of elements with postMessage
  • Example 52: Include content directly with post message communication
  • Example 53: Auto height and hiding of elements with postMessage AND a HTTPS page inside the iframe
• Set the height with media queries
• Sub domain: Auto height and css modifications. Use all features like you are on the same domain
• "Hide a part of the iframe" where you can place divs over an iframe to hide elements
  • Example 8: Hide some areas of the remote page
  • Example 9: Place your own logo on a remote page
  • Example 21: Make an iframe read only
  • Example 44: Include external html with shortcode and right/bottom alignment (New 7.1)
  • Example 45: Hide a footer (New 7.1)
  • Example 50: Using media queries to make the divs responsive (New 7.3)
• Change links/form targets on the parent and on the iframe page
  • Example 10: Change links targets at the parent and at the iframe page if the iframe is on the same domain
  • Example 11: Change links targets at the iframe page if the iframe is on a different domain + border + iframe redirect
• Show the iframe as layer/popup
  • Example 34: Change link targets and show the iframe as layer
  • Example 37: Change link targets and show the iframe as layer with additional header (new 7.0)
  • Example 38: Change link targets and show the iframe as 100% layer with additional footer (new 7.0)
  • Example 54: Change link targets and show the iframe in the original size with additional footer
  • Example 58: Auto open layer/popup
• Advanced height features with headers and "fullscreen" iframes
  • Example with a fixed header
  • Example with dynamic elements
    1. Using "top"
    2. Using the elements before the iframe
  • Fullscreen button on iframe
• Browser detection: Show browser specific iframes
  • Example 12: Special settings for IE 10 and IE 11
  • Example 13: Special settings for IE, Firefox and Chrome
  • Example 14: Show a different iframe on iframe on apple devices and mobile devices
• Zoom: Zoom the content of the iframe
  • Example 15:  Zoom example with 75%
  • Example 16:  Zoom example with 200%
• Auto zoom: Auto zoom the content of the iframe
  • Example 29: No zoom
  • Example 30: Auto zoom iframe on the same domain
  • Example 35: Auto zoom with a fixed ratio
  • Example 31: Auto zoom iframe on a remote domain
• Auto height of hidden iframes: Use iframes in hidden divs  - e.g. on tabs
  • Example 17: Simple hidden iframe auto height example
  • Example 18: Nested hidden iframe auto height example
  • Example 28: Hidden iframe auto height example with auto lazy loading
• Responsive iframes
  • Example 19: Responsive iframe on the same domain
  • Example 20: Responsive iframe on a different domain using the external workaround.
• Responsive videos
  • Example 22: Responsive video iframes
• Lazy loading
  • Example 23: Lazy load when the iframe is in the viewport and fadein
  • Example 24: Lazy load when the iframe is loaded after the parent page is loaded
  • Example 25: Lazy load with manual trigger and fadein
• Resize on element resize
  • Example 26: Resize on element resize same domain
  • Example 27: Resize on element resize on a different domain
• Add iframe url as param
  • Example 32: Add the url on the same domain
  • Example 33: Add the url on the remote domain
  • Example 56: Add iframe url as param: Same domain with hash
  • Example 57: Add iframe url as param remote domain with hash + url rewrite
  • New 2021: Example 59: Add iframe params to parent: Same domain
  • New 2021: Example 60: Add iframe params to parent: Remote domain
• Widgets: use iframes in the widget area
  • Widget example 1: Example 2 of the “Show only a part of the iframe”
  • Widget example 2: Example 4 of the “Show only a part of the iframe” demo
• Scrolling iframes on ipad and iphone (New 7.0)
  • Example 36: Default iframes
• URL features
  • Example 47: URL forward parameters (free + pro)
  • Example 48: Map parameter to url
  • Example 49: Using placeholders in the src parameter
  • Hide the url in html
• Wrapped auto height
• Iframe cookie support
• Share content from your domain
  • Share content from your domain: Content filter
  • Share content from your domain: Add ai_external.js local
• Integrate iframe sizer script
• iFrame anchor support

Have fun using Advanced iFrame Pro,

Michael