Documentation Advanced iFrame Pro

Version 2022.x

Include content the way YOU like in an iframe that can hide and modify elements and forward
parameters. You can also embed content directly or show a part of an iframe.

1 Table of content
1 Features of Advanced iFrame Pro ................................................................................................... 3
2 Installation ....................................................................................................................................... 5
3.1 Wordpress ............................................................................................................................... 5
3.2 FTP ........................................................................................................................................... 5
3 Upgrade ........................................................................................................................................... 5
3.3 Wordpress ............................................................................................................................... 5
3.4 FTP ........................................................................................................................................... 5
4 Quick start guide ............................................................................................................................. 5
5 Administration ................................................................................................................................. 7
5.1 Default settings ....................................................................................................................... 7
5.2 Advanced settings ................................................................................................................... 7
5.3 Modify the parent page........................................................................................................... 7
5.4 Show only a part of the iframe ................................................................................................ 7
5.5 Resize the iframe to the content height/width ....................................................................... 7
5.6 Add additional files .................................................................................................................. 7
5.7 Include content directly .......................................................................................................... 7
6 Advanced iFrame Pro attributes...................................................................................................... 8
7 Frequently Asked Questions.......................................................................................................... 10
7.1 Shortcodes ............................................................................................................................. 10
7.2 If a shortcode does not work ................................................................................................ 10
7.3 How to use the iframe several times on the same installation ............................................. 10
7.4 If you use several iframes on the same page ........................................................................ 10
8 Advanced iFrame standalone ........................................................................................................ 11
9 Demo ............................................................................................................................................. 11
10 Browser detection ......................................................................................................................... 11
10.1 Setup...................................................................................................................................... 11
10.1.1 Example 1 - Special settings for IE 10 and IE 11 ............................................................ 11

1 / 12
 10.1.2 Example 2 - Special settings for IE, Firefox and Chrome ............................................... 11
10.1.3 Example 3 - Show a different iframe on iframe on apple devices and mobile devices 12
10.2 Configuration options............................................................................................................ 12
10.3 Credit and update.................................................................................................................. 12
11 Changelog ...................................................................................................................................... 12

2 / 12
1 Features of Advanced iFrame Pro
By entering the shortcode '[advanced_iframe]' you can include any webpage to any page or article.

The following cool features compared to a normal iframe are implemented:

 Security code: You can only insert the shortcode with a valid security code from the
administration if it is set in the administration. Since 7.5.4 this is optional!
 Hide areas of the parent layout to give the iframe more space
 Show only specific areas of the iframe even when the iframe is on a different domain or
include parts directly by jQuery
 Modify css styles in the parent and the iframe (iframe only if on the same domain or when
you can use the workaround) to e.g. change the width of the content area (see screenshot)
 Forward parameters to the iframe
 Resize the iframe to the content height or width on loading, AJAX or click
 Scroll the parent to the top when the iframe is loaded
 Hide the content until it is fully loaded
 Add a css and js file to the parent page
 New 5.3: Browser detection: browser dependent iframes are possible
 New 5.3: Modify link targets on the parent and in the iframe (external workaround)
 New 5.3: Url forward parameter mapping
 New 5.3: Redirect direct access of the iframe page to the parent page.
 New 5.4: Zoom iframe content
 New 5.4: Iframe loading icon
 New 5.4: Accordion admin menu
 New 5.4: Map parameter/value pairs to urls
 New 5.5: Support for auto resize of hidden iframes.
 New 5.6: Responsive iframes – Important: See this blog entry
 New 5.6: Read-only iframes
 New 5.7: html attribute allowfullscreen is now supported.
 New 5.8: Shortcode generator
 New 5.8: Set Iframe height by ratio
 New 5.9: Lazy load of iframes with threshold, fadein and manual trigger
 New 5.10: Resize iframe on element resize.
 New 5.10: Write css as style directly to the header.
 New 5.10: Add a css style to each parent element of the iframe
 New 5.10: Support of shortcodes in the src attribute.
 New 5.10: Dynamic src parameters
 New 5.10: Include additional js to the iframe
 New 6.0: Auto zoom
 New 6.0: Lazy load with hidden elements
 New 6.0: Support for the BBCode [iframe]url[/iframe]
 New 6.0: Browser detection now supports tablets, android, androidtablet
 New 6.3: Standalone version
3 / 12
  New 6.3: Support of config files
 New 6.3: Internal version check
 New 6.4: Links to external pages can be opened in a simple fullscreen lightbox
 New 6.4: The iframe url can be returned back to parent and added to the url
 New 6.4: hide_part_of_iframe does now support links
 New 6.4: Extract parts from the parent url and adds it to the iframe url.
 New 6.4: Auto zoom by ratio
 New 6.4: Add css directly to an iframe on the same domain
 New 6.4: Improved documentation with filter search and help icons.
 New 6.5: Full screen iframes
 New 6.5: css calc() support for width and height
 New 6.5: Tab navigation in the administration.
 New 6.5: The browser detection is now supporting "browser" and "desktop".
 New 6.6: "Change link targets and show the iframe as layer" can now have additional
headers
 New 6.6: Scrolling support on ipad and iphone
 New 6.6: Auto height for wrapped iframes
 New 7.0 The „show iframe as layer feature“ has now a fullscreen mode with custom
header and footer!
 New 7.0: Scrolling on ipad and iphone is supported!
 New 7.0: Show only a port of an iframe support now zoom
 New 7.x – show the readme.txt
Since 7.5.4 – Security key is optional
 New 2019.x / 2020.x / 2021.x
See: http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-history

See the readme.txt for all changes.

Please note: Modification inside the iframe are only possible if you are on the same domain or use a
workaround like described in the settings.

So please check first if the iframe page and the parent page are one the same domain.
www.example.com and text.example.com are different domains! Please check in the documentation
if you can use the feature you like

A free iframe checker is available at

http://www.tinywebgallery.com/blog/advanced-iframe/free-iframe-checker.
This tool does check if a page is allowed to be included!

All settings can be set with shortcode attributes as well. If you only use one iframe please use the
settings in the administration because there each parameter is explained in detail and also the
defaults are set there.

4 / 12
2 Installation

3.1 Wordpress
1. Login to Wordpress administration and go to “Plugins” -> “Add new”. Select the “Upload”
tab. Select the zip file you got from codecanyon and click “Install now”.
2. Activate the plugin through the 'Plugins' menu in WordPress
3. Place '[advanced_iframe]' in your pages or posts.

3.2 FTP
1. Upload the folder 'advanced-iframe' from the zip file to the '/wp-content/plugins ' directory.
Make sure the file advanced-iframe.php is in the directory /wp-content/plugins/advanced-
iframe
2. Activate the plugin through the 'Plugins' menu in WordPress
3. Place '[advanced_iframe]' in your pages or posts.

3 Upgrade
Don’t use the automatic update offered by Wordpress. If you see a new version there don’t use this
update because it does remove your existing pro version and installs the free version again. There is
always an updated version on codecanyon available too!

3.3 Wordpress
Uninstall the plugin. Install the plugin like describe above.

3.4 FTP
Simply overwrite all files from your previous installation. This is also the case if you have used the
personal version you can get on wordpress.org. All your settings are stored in the database and don’t
get removed!

If you have some radio elements empty after the update simply select the one you like and save
again.

4 Quick start guide

To include a webpage to your page please check the following things first.

 Check if your page page is allowed to be included

http://www.tinywebgallery.com/blog/advanced-iframe/free-iframe-checker!
 Check if the iframe page and the parent page are one the same domain. www.example.com
and text.example.com are different domains!
 Can you modify the page that should be included?

Most likely you have one of the following setups

1. Iframe cannot be included:

You cannot include the content because the owner does not allow this.
2. iframe can be included and you are on a different domain:
You are not allowed to modify the content of the iframe but you can show it or a part of it.
5 / 12
 To resize the content to the height/width you need to modify the iframe page to enable the
provided workaround.
3. Iframe can be included and you are on the same domain:
All features of the plugin can be used.

Please read the next chapter to get an overview what you can specify at the different sections.

6 / 12
5 Administration
Advanced iFrame Pro can be configured in the Wordpress Administration at

Settings -> Advanced iFrame Pro

There you can specify all the default settings and you only have to include the shortcode. You have
the option to overwrite each setting directly in the shortcode by specifying shortcode attributes like
described in the next chapter.

Below is an overview of the different features. Please always read the documentation in the
administration that is provided for each section.

5.1 Default settings

In this this section you enter the settings of an iframe which are than rendered as html attributes at
the iframe. These are settings you find on most iframe plugins.

5.2 Advanced settings

In this this section you enter advanced settings like url forwarding, loading icon, zoom, responsive
iframes or lazy load.

5.3 Modify the parent page

In this section you can modify your template of the parent on the fly. This can be used to remove e.g.
the right column or the header of a Wordpress template. You should have some basic knowledge of
html and css to use this feature.

5.4 Show only a part of the iframe

In this section you can specify the part of an iframe that should be shown. This solution does work
across different domains! Additional options are available to change the shown part when the iframe
page changes. You can also allow scrollbars at the area windows you want to show.
If you are on the same domain you can access the content directly and modify the styles there as
well.

5.5 Resize the iframe to the content height/width

If you include a page on the SAME Domain you can resize the iframe to the content height/width and
even detect any size changes on the page.
If the iframe page is on a DIFFERENT domain you need access to the remote page and modify this
page. A workaround if provided where you only need if include one line of Javascript which does
handle than everything.

5.6 Add additional files

For some features in iframes additional css or js files are needed in the parent page. This can be
added without the need to modify your Wordpress template.

5.7 Include content directly

You can also include content directly with jQuery. The page is loaded and the part you specify below
is included by Javascript into the page. The cool thing is that you can specify an id or a class which
specify the content area that should be included. This feature does only work if the page is loaded
from the SAME domain.
7 / 12
6 Advanced iFrame Pro attributes
Below you find all possible shortcode attributes. If you only use only one iframe please use the
settings in the administration because there each parameter is explained there in detail and also
the defaults are set there.

The security key has to be the one defined in the administration. If it is not there then it is not
needed in the short code. All other attributes are optional and do overwrite the settings you have
defined in the administration.

In the settings of Wordpress (Settings -> Advanced iFrame Pro) you find a
detailed description of each attribute.
You can also read “Advanced iFrame Pro attribute help.htm” in this folder for details of each
attribute. This does contain the same text as the administration but no interactive help.

[advanced_iframe securitykey="" src=""

width="" height=""
marginwidth="" marginheight="" id=""
name="" frameborder=""
scrolling="" url_forward_parameter=""
content_id="" content_styles=""
class="" style=""
onload="" onload_resize=""
onload_scroll_top="" onload_show_element_only=""
additional_js="" additional_css=""
store_height_in_cookie="" additional_height=""
iframe_content_id="" iframe_content_styles=""
iframe_hide_elements="" hide_page_until_loaded=""
include_url="" include_content=""
include_height="" include_fade=""
include_hide_page_until_loaded="" onload_resize_width=""
resize_on_ajax="" resize_on_ajax_jquery=""
resize_on_click="" resize_on_click_elements=""
show_part_of_iframe="" show_part_of_iframe_x=""
show_part_of_iframe_y="" show_part_of_iframe_width=""
show_part_of_iframe_height="" show_part_of_iframe_new_window=""
show_part_of_iframe_new_url="" show_part_of_iframe_next_viewports_hide=""
show_part_of_iframe_next_viewports="" show_part_of_iframe_next_viewports_loop=""
show_part_of_iframe_style="" enable_external_height_workaround=""
keep_overflow_hidden="" hide_page_until_loaded_external=""
show_part_of_iframe_allow_scrollbar_vertical=""
show_part_of_iframe_allow_scrollbar_horizontal=""
use_shortcode_attributes_only="" onload_resize_delay=""
hide_part_of_iframe="" change_parent_links_target=""
change_iframe_links="" change_iframe_links_target =""
browser="" show_part_of_iframe_style=""

8 / 12
map_parameter_to_url="" iframe_zoom=""
show_iframe_loader="" enable_responsive_iframe=""
tab_visible="" tab_hidden=""
allowfullscreen="" iframe_height_ratio=""
enable_lazy_load="" enable_lazy_load_threshold=""
enable_lazy_load_fadetime="" pass_id_by_url=""
enable_lazy_load_manual="" write_css_directly=""
resize_on_element_resize="" resize_on_element_resize_delay=""
add_css_class_parent="" auto_zoom=""
enable_lazy_load_manual_element=""
show_iframe_as_layer=="" auto_zoom_by_ratio=""
add_iframe_url_as_param="" add_iframe_url_as_param_prefix=""
reload_interval="" 'iframe_content_css=""
additional_js_file_iframe="" additional_css_file_iframe=""
add_css_class_iframe="" iframe_zoom_ie8= ""
enable_lazy_load_reserve_space="" hide_content_until_iframe_color=""]

Examples:
[advanced_iframe src="http://www.tinywebgallery.com"]
[advanced_iframe src="http://www.tinywebgallery.com" width="100%" height="500"]
[advanced_iframe src="http://www.tinywebgallery.com" width="100%" height="500"
url_forward_parameter="id" onload_resize="true"]

For more working examples please look at the pro demo:

http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo

Since version 5.8 also a shortcode generator is included which does generate a default independent
shortcode with all current attributes.

9 / 12
7 Frequently Asked Questions
Find the latest FAQ here:

http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-faq/

7.1 Shortcodes

Please read the instructions in the administration careful. The documentation there should
explain all of your questions!

7.2 If a shortcode does not work

If a shortcode does not work please view the shortcode in the editor in text mode. If you
copy a shortcode directly from the settings maybe additional html is copied as well. And this
causes the shortcode to fail.

If you try a shortcode from the demos you have to remove the REMOVE_ME from the
shortcode and use your own security key.

7.3 How to use the iframe several times on the same installation

By default the settings from the settings are used. So you only have to use

[advanced_iframe]

If you want to use the advanced iframe several times you can overwrite all settings from the
settings directly in the shortcode. So for a different url you have to use:

[advanced_iframe src="http://www.tinywebgallery.com"]

For a different url and width use:

[advanced_iframe src="http://www.tinywebgallery.com" width="500"]

7.4 If you use several iframes on the same page

If you use multiple iframes on the same page make sure that you give each shortcode a
different id! Otherwise an automatic id is generated to avoid conflicts on the page. If you use
the external workaround you need to specify this id on the remote page.
Cookies and additional_height are not supported yet when you use more than one iframe on
one page because they are used as global variables in the external js file. They work fine if
you use them on different pages.

10 / 12
8 Advanced iFrame standalone
Since version 6.3 the plugin can also be used standalone without a Wordpress installation and can
therefore be used e.g. in Joomla, Drupal or without a CMS.

Please read the readme.html in the “standalone” folder of the zip file.

Examples can be found at standalone/standalone-example.php.

9 Demo
See the demos here:

Pro:
Over 30 demos are available!

http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo

Free:

http://www.tinywebgallery.com/blog/advanced-iframe/demo-advanced-iframe-2-0

10 Browser detection

Modern website designs are not pixel based anymore and depending on the features of the browser
they also look slightly different. So if you use the "Show only part of the iframe" feature it is possible
that the area you want to cut out of the website is at a slightly different place. You can also use the
browser detection to show different iframes for different browsers or even mobile devices.

10.1 Setup

If you want to have different iframe configurations depending on the browser you have to use the
shortcode attribute browser="" and define the browsers there which should be used for this
shortcode. See the different configuration options below. You can define several browsers by
separating them by, and even define browser versions by adding the versions with (version). Each of
the shortcodes which are browser dependent need to have the same id! The last shortcode should
have the attribute browser="default". This is then used if no browser does match before. If you don't
do this you can show iframes only for a specific browser.

10.1.1 Example 1 - Special settings for IE 10 and IE 11

[advanced_iframe id="example1" show_part_of_iframe_x="25" browser="ie(10),ie(11)"]

[advanced_iframe id="example1" show_part_of_iframe_x="20" browser="default"]

10.1.2 Example 2 - Special settings for IE, Firefox and Chrome

[advanced_iframe id="example2" show_part_of_iframe_x="25" browser="ie"]

[advanced_iframe id="example2" show_part_of_iframe_x="23" browser="firefox,chrome"]
[advanced_iframe id="example2" show_part_of_iframe_x="20" browser="default"]

11 / 12
10.1.3 Example 3 - Show a different iframe on iframe on apple devices and mobile devices

[advanced_iframe id="example3" src="apple iframe" browser="iphone,ipad,ipod"]

[advanced_iframe id="example3" src="other mobile devices iframe" browser="mobile"]
[advanced_iframe id="example3" src="normal iframe" browser="default"]

10.2 Configuration options

The following options for most common browsers can be used:

 ie - Selects all versions of Internet Explorer. Also a version is supported. ie(10) selects IE10,
ie(11) selects IE11
 safari - Selects all versions of Safari. Also a version is supported. Add the version in (). e.g.
safari(5)
 firefox - Selects all versions of Firefox. Also a version is supported. Add the version in (). e.g.
firefox(20)
 chrome - Selects all versions of Chrome. Also a version is supported. Add the version in ().
e.g. chrome(25)
 opera - Selects all versions of Opera. Also a version is supported. Add the version in (). e.g.
opera(20)
 ipad - Selects all versions of ipad.
 ipod - Selects all versions of ipod.
 iphone - Selects all versions of iphone.
 mobile - Selects all mobile devices.
 tablet – Selects all tablets
 android – Selects all android devives
 androidtablet – Selects all android tablets. So you should use this before android if you want
to show different iframes for android tables and smartphones.
 browser – Selects all browser
 desktop – Selects all desktop browsers
 default - Is used if no other advanced iframe pro with the same id was selected before.

10.3 Credit and update

Advanced iFrame Pro uses an integrated browser detection which is based on the Wordpress plugin
"php-browser-detection" and the browser detection file (version 5033) from browscap.org.

You can get an updated version of the browsercap.ini file here: http://browscap.org/

If you want to update the browser detection file get the php_browscap.ini from there and rename it
to php-browser-detection-browscap.ini.
Or always get the latest version of the advanced iframe pro plugin. This file is also updated here!

11 Changelog
See readme.txt

12 / 12