Skip to main content

Advanced iFrame Pro 6.4.1 attribute help
This file is not updated anymore as the current administration can be printed nicely as well.


Quickstart guide, display options, vote for the plugin on codecanyon


Advanced iFrame Pro - Quickstart guide, widget, display options, vote for the plugin on codecanyon

Quick start guide

To include a web page to your page please check the following things first:

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: See the feature comparison chart. To resize the content to the height/width or modify css you need to modify the remote iframe page by adding one line of Javascript 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.
If you mix http and https read this blog. Parent https and iframe http does not work on all browsers!

Advanced iFrame Pro Widget

The pro version also does offer a widget where you can include the iframe. The usage is really simple. Go to Appearance -> Widgets and insert the shortcode you would normally put into a page into the text field of the "Advanced iFrame Pro Widget" .

Vote for the plugin

Thank you for getting Advanced iFrame Pro at Codecanyon.
Please feel free to leave an item rating from your items download page if you haven't already done so.

Please get in contact with me if you have problems because most of the issues are easy to solve. But at least tell me what you did not like so I can improve this. Also make sure that you took a look at the quick start guide to make sure the feature you like can be used!

Display options

Show this section at the bottom Yes     No

Please move this section to the bottom after you have read it.

Enable expert mode Yes     No

If you enable the expert mode the description is only shown if you click on the label of the setting. You see more settings at once but only one description at once. Also the padding between the table rows are reduced a lot. So you see a lot of more settings on one screen. Use this if you are common with the settings.

Use footer save button Yes     No

The new default is theat the save button is in a sticky footer. I was testing this for all major browsers but not for all worpress versions. So if this does not work for your version set this to false to get one save button for each section.

Use accordeon menu

The accordeon menu does not show the different sections in one big page but does only show the sections you open. You can define the default section which is open by default here also. Sections do not close if you open another one because sometimes is is usefull to open several sections at once. Also the quick jump links at the top are removed because they do not make sense than anymore. The menu is used after you saved this setting. Only important sections are offered in the dropdown.

Alternative shortcode

You can define an alternative shortcode the plugin should evaluate. This is e.g. useful if you chance/upgrade from iframe to advanced iframe (pro). Simply insert "iframe" in the text field. Most if the parameters do already match! Make sure to deactivate the other plugin that used the shortcode. With using iframe also the BBCode [iframe]url[/iframe] is supported. IMPORTANT: If you use this, security codes are NOT checked anymore. So anyone who can e.g. write a post can also insert an iframe!

Show plugin in main menu Yes     No

Show the "Advanced iFrame Pro" Menu link also in the main menu. If set to "False" it is only shown in the settings menu.

Default settings


Advanced iFrame Pro - Default settings

This plugin will include any content an advanced iframe. Please enter the url and the size you want to include your page. You have a couple of additional default options which help to integrate your site better into your template. You can overwrite all of these settings by specifying the parameter in the shortcode. Please read the documentation after each field about the parameter you have to use.

Please use the following shortcode to add an iframe to your page:
[advanced_iframe securitykey="eaa4ba356ec483b7b1d5356ba6bc84157c58292f"]

You can also generate a shortcode which does include all settings as shortcode attributes. This shortcode does not use any of the defaults.

Copy the following shortcode to your page:

[advanced_iframe securitykey="eaa4ba356ec483b7b1d5356ba6bc84157c58292f"]

Examples if you want to use several iframes with different settings. Also read the FAQ:

  • [advanced_iframe securitykey="eaa4ba356ec483b7b1d5356ba6bc84157c58292f" src="http://www.tinywebgallery.com"]
  • [advanced_iframe securitykey="eaa4ba356ec483b7b1d5356ba6bc84157c58292f" src="http://www.tinywebgallery.com" width="100%" height="600"]
  • [advanced_iframe securitykey="eaa4ba356ec483b7b1d5356ba6bc84157c58292f" src="http://www.tinywebgallery.com" id="iframe1" name="iframe1" width="100%" height="600" ]

Security key

This is the security key which has to be used in the shorttag. This is mandatory because otherwise anyone who can create an article can insert an iframe. The default security key was randomly generated during installation. Please change the key if you like. You should use this in combination with e.g. Page security to make sure that only the users you define can modify pages.

Url

Enter the full URL to your page. e.g. http://www.tinywebgallery.com. Please do not use a different protocol for the iframe: Do not mix http and https if possible! Please read this post for details. If you cannot save the full url because of mod_security don't specify the protocoll (e.g. //www.tinywebgallery.com) or leave this field empty and define the src in the shortcode. Also use the free url checker below to make sure that you can include the page. You can also add parameters to this url like http://www.tinywebgallery.com/test.php?iframe=true. Then you can check this variable and use it to e.g. hide some elements in the iframe.
The pro version also has some placeholders (the standalone version has only host and port available) which are replaced on the fly:
   - {site}: the url to the wordpress root
   - {host}: the current host from the request
   - {port}: the current port from the request
   - {userid}: the id of the current user
   - {username}: the username of the current user
   - {useremail}: the e-mail of the current user
   - {adminmail}: the e-mail of the wordpress admin
   - {userinfo-X}: extract attribute X from get_currentuserinfo. E.g. {userinfo-display_name}. See here for details.
   - {usermeta-X}: extract key X from get_user_meta. E.g. {usermeta-last_name}. See here for details.
   - {urlpathX}: the Xth path element from the front. The first path element would be {urlpath1}
   - {urlpath-X}: the Xth path element from behind. The last path element would be {urlpath-1}

An example would be src="http://demo.{host}/url?id={userid}". Especially for multidomain installations this is maybe helpful. If no user is logged in the values are empty or 0 for the id.
urlpath does extract path elements from the url in the address bar. So {urlpath-1} for the url www.xx.com/a/bb/cc would be cc.
Also shortcodes are supported. You have to replace the bracket [ with {{ and ] with }}. So if the shortcode is [link] you have to use {{link}} because shortcode attributes which include shortcodes are not supported directly by Wordpress. Also be aware of single and double quotations: src="http://demo.{{url domain='home'}}/url". So only use ' for attributes of the nested shortcode.
PDF support: If you include a pdf google doc is used to render the pdf. This solution looks the same on all browsers. If you want to use the native pdf renderer of the browser/your system add NATIVE: before the url. Like NATIVE:http://www.example.com/pdf.pdf.
Shortcode attribute: src=""

Free url checker Not all pages can be included in an iframe because they have a header flag this does not allow this. Please use the free iframe checker to find out if the page you want to include does work on all browsers: Free iframe checker.
Width

The width of the iframe. You can specify the value in px or in %. If you don't specify anything px is assumed. Shortcode attribute: width=""

Height

The height of the iframe. You can specify the value in px or in %. If you don't specify anything px is assumed. Please note that % does most of the time does NOT give the expected result (e.g. 100% is only 150px) because the % are not from the iframe page but from the parent element. If you like something like that the iframe is resized to the content please read the 'Javascript iframe onload options' section below! Shortcode attribute: height=""

Scrolling Yes     No     Not rendered

Defines if scrollbars are shown if the page is too big for your iframe. Please note: If you select 'Yes' IE does always show scrollbars on many pages! So only use this if needed. Scrolling "none" means that the attribute is not rendered at all and can be set by css to enable the scrollbars responsive. Shortcode attribute: scrolling="auto" or scrolling="no" or scrolling="none"

Margin width

The margin width of the iframe. You can specify the value in px. If you don't specify anything px is assumed. Shortcode attribute: marginwidth=""

Margin height

The margin height of the iframe. You can specify the value in px. If you don't specify anything px is assumed. Shortcode attribute: marginheight=""

Frame border

The frame border of the iframe. You can specify the value in px. If you don't specify anything px is assumed. Shortcode attribute: frameborder=""

Transparency Yes     No

If you like that the iframe is transparent and your background is shown you should set this to 'Yes'. If this value is not set then the iframe is transparent in IE but transparent in e.g. Firefox. So by default you should leave this to 'Yes'. Shortcode attribute: transparency="true" or transparency="false"

Class

You can define a class for the iframe if you like. Shortcode attribute: class=""

Style

You can define styles for the iframe if you like. The recommended way is to put the styles in a css file and use the class option. Shortcode attribute: style=""

Id

Enter the 'id' attribute of the iframe. Allowed values are only a-zA-Z0-9_. Do NOT use any other characters because the id is also used to generate unique javascript functions! Other characters will be removed when you save! If a src directly in a shortcode is set and no id than an id is generated automatically if several iframes are on one page to avoid configuration problems. Shortcode attribute: id=""

Name

Enter the 'name' attribute of the iframe. Shortcode attribute: name=""

Allow full screen Yes     No

allowfullscreen is an HTML attribute that enables videos to be displayed in fullscreen mode. Currently this is a new html attribute not supported by all browsers. So please check all of the browsers you want to support. Shortcode attribute: allowfullscreen="true" or allowfullscreen="false"

Allow shortcode attributes Yes     No

Allow to set attributes in the shortcode. All of the attributes can be overwritten in the shortcode if you set 'Yes'. Otherwise the settings you specify here are used.

Use shortcode attributes only Yes     No

All iframes you use in your pages use the settings below. With shortcode attributes you can overwrite these settings. When you use several iframes with different settings this can lead to strange behavior because you do not see the whole configuration in the shortcode. By setting this option to true only the parameters defined as attributes are used. So the minimum you need to define is: securitykey and src of the iframe. You can set this for a single iframe as well with the shortcode attribute use_shortcode_attributes_only="true". A minimal shortcode would then look like this: [advanced_iframe securitykey="eaa4ba356ec483b7b1d5356ba6bc84157c58292f" use_shortcode_attributes_only="true" src="http://www.tinywebgallery.com"]. Shortcode attribute: use_shortcode_attributes_only="true" or use_shortcode_attributes_only="false"

Include ai.js in the footer Yes     No

By default now the needed Javascripts are included at the footer. So you can include jQuery also at the footer if you like. If you like/need it in the header set this value to false. Before Wordpress 3.3 jQuery is needed in the header if you want to use lazy-loading! The ai.js has also to be in the footer if it should only be loaded when the shortcode is on the page. This setting cannot be set as shortcode!

Load jQuery as dependency Yes     No

By default jQuery is loaded as dependeny. If you have a theme or another plugin that does not stick to the Wordpress way to load the scripts you might have to disable the dependeny. This avoids that jQuery is loaded again and other plugins do maybe not work anymore.

Get support


Advanced iFrame Pro - Get support

The settings above are the settings a normal iframe solution does offer. They don't require any specific html, css or programming knowhow.

The advanced options below do modify the styles of the parent page, the iframe, do some Javascript magic when the iframe is loaded or include content directly to your page. Understanding this is not basic Wordpress knowhow and therefore you can get help here if you want. I do offer paid support for this plugin now.

What do you get?
  •      - Free check if you can include the content the way YOU like.
  •      - Fast and reliable setup of what you want.
  •      - You only pay if it works!

This offer is only available for Advanced iFrame Pro users.
If you are interested please visit http://www.tinywebgallery.com/blog/advanced-iframe-support/ for more information.

Advanced settings


Advanced iFrame Pro - Advanced settings

The following options are already features which are not html standard anymore. All the options do already require additional Javascript, css or dynamic processing.

URL forward parameters

Define the parameters that should be passed from the browser url to the iframe url. Please separate the parameters by ','. Using "ALL" does forward every parameter.
Pro users can also map incoming parameters to a different parameter. Wordpress has a couple of reserved words which canot be used in urls. So if you want to pass the parameter "name" (reserved word) to your iframe you can do a mapping with "ainame|name". Than the parameter "ainame=hallo" will be passed as "name=hallo" to the iframe. This can also be used if the parameters of the 2 pages do not match. Several mappings can be seperated with ',' like normal parameters. In e.g. TinyWebGallery this enables you to jump directly to an album or image although TinyWebGallery is included in an iframe. Shortcode attribute: url_forward_parameter=""

Map parameter to url

You can map an url parameter value pair to an url or pass the url directly which should be opened in the iframe. If you e.g. have a page with the iframe and you like to have different content in the iframe depending on an url parameter than this is the setting you have to use. You have to specify this setting in the following syntax "parameter|value|url" e.g. "show|1|http://www.tinywebgallery.com". If you than open the parent page with ?show=1 than http://www.tinywebgallery.com is opened inside the iframe. You can also specify several mappings by separating them by ','. You can also only specify 1 parameter here! The value of this paramter is than used as iframe url. e.g. show=http%3A%2F%2Fwww.tinywebgallery.com%3Fparam=value. You need to encode the url if you pass it in the url. Especially ? (%3F) and & (%26)! Please note that because of security reason only whitelisted chars [a-zA-Z0-9/:?&.] are allowed. Encoded parameters in the passed urls are not supported because all input is decoded and checked. If no parameter/value pair does match the normal src attribute of the configuration is used. Shortcode attribute: map_parameter_to_url=""

       Add iframe url
       as param
Same domain     Remote domain     False

With this setting the url of the iframe is added as parameter to the current url. The parameter is defined in the setting before. This feature is only enabled if you also enable auto height for remote domains because the url of the iframe is sent with the same request. This enables bookmarkable urls where you go directly to the last page in the iframe. The history api which enables the change of the url is only supported by modern browsers. For older browsers the url is simply not changed. See http://caniuse.com/#search=pushstate. Shortcode attribute: add_iframe_url_as_param="same", add_iframe_url_as_param="remote" or add_iframe_url_as_param="false"

             Prefix for
             iframe url

With this setting you can define a prefix which all (most) of your pages in the iframe have. This prefix is than not added to the url but added internally. This does reduce the length of the parameter value. The prefix has to be without http:// or https://. So a prefix could be www.tinywebgallery.com/examples/. If your pages are e.g. at www.tinywebgallery.com/examples/example1.htm and www.tinywebgallery.com/examples/example2.htm than the page parameter is only page=example2.htm and not page=www.tinywebgallery.com%2Fexamples%2Fexample2.htm. See the demo for a working example. Shortcode attribute: add_iframe_url_as_param_prefix=""

Scrolls the parent window to the top Yes     No

If you like that if you click on a link in the iframe the parent page should scroll to the top you should set this to 'Yes'. Please note that this is done by Javascript! So if a user has Javascript deactivated no scrolling is done. This setting generates the code onload="aiScrollToTop();" to the iframe. If you select the resize iframe as well then onload="aiResizeIframe(this);aiScrollToTop();" is generated. If you like a different order please enter the javascript functions directly in the onload parameter in the order you like. Shortcode attribute: onload_scroll_top="true" or onload_scroll_top="false"

Hide the iframe until it is loaded Yes     No

This setting hides the iframe until it is loaded. This prevents the iframe white flash issue while loading. When you use the external workaround please check the setting in this section below. The setting there overwrites this setting because otherwise the iframe is maybe shown too early! Shortcode attribute: hide_page_until_loaded="true" or hide_page_until_loaded="false"

Show loading icon Yes     No

You can show a loading icon until the page in the iframe is fully loaded. You can use your own image with the size of 66 x 66 px by replacing the file img/loader.gif. Shortcode attribute: show_iframe_loader="true" or show_iframe_loader="false"

Zoom iframe

You can zoom the content of the iframe with this setting. E.g. entering 0.5 does resize the iframe to 50%. At the iframe width and height you need to enter the FULL size of the iframe. So if you enter width = 1000, height = 500 and zoom = 0.5 than the result will be 500x250. The following browsers are supported: IE8-11, Firefox, Chrome, Safari, Opera. Older versions of IE are not supported. Please test all the browsers you want to support with your page because not all pages do look good in a zoomed mode! "Show only a part of an iframe" and "Resize iframe to content height" are supported. Shortcode attribute: iframe_zoom=""

Auto zoom iframe Same domain     Remote domain     False

This feature does automatically calculates the needed zoom factor to fit the iframe page into the parent page. Especially when you have a responsive website but the remote website is not responsive this is the only way that the page in the iframe does also zoom. Many smartphones and tablets to automatically zoom the parent page but not the iframe page. So there this feature can also be used. This feature works on the same domain and if you are able to use the external workaround and use auto height there (otherwise the width does not get transfered). Shortcode attribute: auto_zoom="same", auto_zoom="remote" or auto_zoom="false"

       Auto zoom by ratio

This setting can be used on the SAME domain if the height of the page cannot be mesured but the ratio of the page is known. And if the width also cannot be measured automatically but is known because the iframe page has a fixed width, you can specify this width by adding with a pipe like ratio|width. E.g. 0.80|800. If you know the the ratio and the width, this setting does also work on REMOTE domains. You don't even need access to the remote domain! For remote domains also select SAME in the setting before as remote means that the height/width information is sent from the remote domain which is not the case here. Shortcode attribute: auto_zoom_by_ratio=""

Enable responsive iframe Yes     No

You can enable that the width of iframe is responsive. This features adds a max-width:100% to the iframe. So the defined width is the maximum width of the iframe. But if the surrounding element gets smaller than this, the iframe is responsive and does shrink! But this is not the interesting part of this feature. When you enable this feature and also the resize the iframe to the content height (directt or by external workaround), the height does get responsive too! And this is the big difference to any other pure css solution which only work for iframes with a certain ratio e.g. for videos. Please read this post for details and take a look pro demo. Please note that this feature does NOT work together with "Show only a part of an iframe" and "Hidden tabs". Shortcode attribute: enable_responsive_iframe="true" or enable_responsive_iframe="false"

Set Iframe height by ratio

This setting enables you to set the height of an iframe depending on the width of an iframe. If you have a static site you know the width of an iframe and you can set the heigt to a fix value. But if you e.g. have an iframe width of 100% and responsive layout you do not know the height. Using auto heigt does solve this most of the time but sometimes the content inside the iframe is fully dynamic too (like a video which does scale). If this is the case you can define a ratio here. e.g. 0.5 means that if you have a width of 1000 you have a height of 500. If the width changes to 800 the height changes to 400. Please use a . as decimal char. This setting does also work together with "Enable responsive iframe". So scalling the browser does change the height also if you enable the setting above. If you enable this setting the local resize settings are disabled! Shortcode attribute: iframe_height_ratio=""

Enable lazy load Yes     No

You can enable that iframes are lazy loaded. If you enable this, the iframe is loaded either after the ready event of the parent or if the iframe gets visible. Please check the "Enable lazy load threshold" setting below how to configure this. Shortcode attribute: enable_lazy_load="true" or enable_lazy_load="false"

       Lazy load threshold

This setting sets the pixels to load earlier. Setting the value e.g. to 200 causes iframe to load 200 pixels before it appears in the viewport. It should be greater or equal zero. The default is set to 3000 which normally is a lazy load after the parent finished loading. If you set this value higher then the distance of the iframe to the top, the iframe is lazy loaded after the parent document ready event is fired. If you leave this field empty 0 is used. Shortcode attribute: enable_lazy_load_threshold=""

       Lazy load fadein time

This setting enables you to fade in the iframe after it is lazy loaded. Enter the time in milliseconds. Depending on the content of the iframe this looks good or not. Please test if you like the behaviour. If you leave this field empty 0 is used. Shortcode attribute: enable_lazy_load_fadetime=""

       How trigger lazy loading Default (Scroll)     Auto     Manually

Normally (Default (Scroll)) the iframes are loaded lazy after the settings you specify above. The option "Auto" does check every 50 ms if the iframe is visible in the viewport and should be loaded. This is especially useful for iframes that are hidden when the page is loaded. So this can be used for hidden tabs because when this is shown no internal Javascipt event like scrolling does exist! If you use auto all iframes on the same page do poll because this is a global setting of the plugin. But you also can trigger the loading manually. This can also be used to lazy load tabs or when you want to load the iframe by yourself. For each iframe a Javascript function to show the iframe is created: aiLoadIframe_"your id"(); e.g. aiLoadIframe_advanced_iframe(); Simply call it when you want. Also see the next option! If you want to avoid polling for tabs use the manual setting. See the lazy load demo for an example. Shortcode attribute: enable_lazy_load_manual="false" enable_lazy_load_manual="auto" or enable_lazy_load_manual="true"

          Element that triggers           the lazy load

If you enable "How trigger lazy loading -> manually" you have a Javascript function that triggers the lazy load. With this setting you can add an click event with this Javascript function to the element you define here. So if you e.g. have a tab with the id="tab1" you simply enter #tab1 here. Any jQuery selector does work here. So you can even attach this to several elements. Shortcode attribute: enable_lazy_load_manual_element=""

Reload interval

You can reload the iframe in a given interval. Enter the intervall im ms or leave the field blank for no reload. Shortcode attribute: reload_interval=""

Browser detection You can now specify browser specific iframes. This is imporant especially for the "Show only part of the iframe" feature where browser differences of a few pixels can matter. But you can use this for other things as well because mobile, iphone, ipad can also be detected. Please read the browser detection section for details. Shortcode: browser=""

Modify the parent page


Advanced iFrame Pro - Modify the parent page

With the following 3 options you can modify your template on the fly to give the iframe more space! At most templates you would have to create a page template with a special css and this is quite complicated. By using the options below your template is modified on the fly by jQuery. Please look at the screenshots to make these options more clear. The options are very useful for templates that have a top navigation because otherwise your menu is gone! If you still want to do this you should add a back link to the page. The examples below are for Twenty Ten, iNove and the default Wordpress theme.

Hide elements

This setting allows you to hide elements when the iframe is shown. This can be used to hide the sidebar or the heading. Usage: If you want to hide a div you have to enter a hash (#) followed by the id e.g. #sidebar. If you want to hide a heading which is a <h2> you have to enter h2. You can define several elements separated by , e.g. #sidebar,h2. This gives you a lot more space to show the content of the iframe. To get the id of the sidebar go to Appearance -> Editor -> Click on 'Sidebar' on the right side. Then look for the first 'div' you find. The id of this div is the one you need. For some common templates the id is e.g. #menu, #sidebar, or #primary. For Twenty Ten and iNove you can remove the sidebar directly: Page attributes -> Template -> no sidebar. Wordpress default: '#sidebar'. I recommend using firebug (see below) to find the elements and the ids. You can use any valid jQuery selector pattern here! Shortcode attribute: hide_elements=""

With the next 2 options you can modify the css of your parent page. The first option defines the id/class/element you want to modify and at the 2nd option you define the styles you want to change.

Content id

Some templates do not use the full width for their content and even most 'One column, no sidebar Page Template' templates only remove the sidebar but do not change the content width. Set the e.g. id of the div starting with a hash (#) that defines the content. You can use any valid jQuery selector pattern here! In the field below you then define the style you want to overwrite. For Twenty Ten and WordPress Default the id is #content, for iNove it is #main. You can also define more than one element. Please separate them with | and provide the styles below. Please read the note below how to find this id for other templates. #content|h2 means that you want to set a new style for the div content and the heading h2 below. Shortcode attribute: content_id=""

Content styles

Define the styles that have to be overwritten to enable the full width. Most of the time you have to modify some of the following attributes: width, margin-left, margin-right, padding-left. Please use ; as separator between styles. If you have defined more than one element above (Content id) please separate the different style sets with |. The default values are: Wordpress default: 'width:450px;padding-left:45px;'. Twenty Ten: 'margin-left:20px;margin-right:240px'. iNove: 'width:605px'. Read the note below how to find these styles for other templates. If you have defined #content|h2 at the Content id you can e.g. set 'width:650px;padding-left:25px;|padding-left:15px;'. Shortcode attribute: content_styles=""

Add css class to parent elements Yes     No

Sometimes it is not possible to modify existing css classes because they are also used somewhere else or there is no unique selector for this element. Setting this attribute to true causes that a new class is added at each parent of the iframe up to the body! If the element has an id the class is named "ai-class-(id)". Otherwise "ai-class-(number)" is added. Then it is easy to identify all parent elements of the iframe and modify them. If you have several iframes on one page the classes could not be unique anymore. You need to set "Include ai.js in the footer" to false if you want to use this! Shortcode attribute: add_css_class_parent="true" or add_css_class_parent="false"

Change parent links target

Change links of the parent page to open the url inside the iframe. This option does add the attribute target="your id" to the links you define. You can use any valid jQuery selector pattern here! So if your link e.g. has an id="link1" you have to use "a#link1". If you want to change all links e.g. in the div with the id="menu-div" you have to use "#menu-div a". You can also define more than one element. Please separate them with ,. Shortcode attribute: change_parent_links_target=""

      Show iframe as layer True     External     False

If you enable this, the iframe is initally hidden and if you click on a link defined at "Change parent links target" the iframe is shown as a simple lighbox as overlay on the page. So if you use this for external links the user does not leave your page! "External" does simply open all links that are not on the same domain in a layer. The setting at "Change parent links target" is ignored than. This setting does overwrite some iframe settings like height, width and border! Show part of iframe, lazy load, hide part of iframe and iframe loader are disabled as they do not work with this feature. Shortcode attribute: show_iframe_as_layer="true", show_iframe_as_layer="external", show_iframe_as_layer="false"

How to find the id and the attributes:
  1. Manually: Go to Appearance -> Editor and select the page template. Then you have to look which div elements are defined. e.g. container, content, main. Also classes can be defined here. Then you have to select the style sheet below and search for this ids and classes and look which one does define the width of you content.
  2. Firebug: For Firefox you can use the plugin firebug to select the content element directly in the page. On the right side the styles are always shown. Look for the styles that set the width or any bigger margins. These are the values you can then overwrite by the settings above.
  3. Small jquery help
    Above you have to use the jQuery syntax:

    • - tags - if you want to hide/modify a tag directly (e.g. h1, h2) simply use it directly e.g. h1,h2
    • - id - if you want to hide/modify an element where you have the id use #id
    • - class - if you want to hide/modify an element where you have the class use .class

    For more complex selectors please read the jQuery documentation.

Show only a part of the iframe


Show only a part of the iframe

Options if the iframe is on a different OR the same domain

You can only show a part of the iframe. This solution DOES WORK across domains without any hacks! This is a solution that works only with css by placing a window over the iframe which does a clipping. All areas of the iframe that are not inside the window cannot be seen. Please specify the upper left corner coordinates x and y and the height and width that should be shown. Specify a fixed height and width in the iframe options at the top for optimal results! Simply select the area you want to show with the graphical area selector! Please go to the pro demo for some working examples. Please also check the 5 options below. These are the advanced features to handle changes in the iframe

Show only part of the iframe Yes     No

Show only part of the iframe. You have to enable this to use all the options below. Please read the text above. Shortcode attribute: show_part_of_iframe="true" or show_part_of_iframe="false"

Upper left corner x

Specifies the x coordinate of the upper left corner of the view window. Enter the x-offset from the left border of your external iframe page you want to show. Shortcode attribute: show_part_of_iframe_x=""

Upper left corner y (top distance)

Specifies the y coordinate of the upper left corner. Enter the y-offset from the top border of your external iframe page you want to show. Shortcode attribute: show_part_of_iframe_y=""

Width of the visible content

Specifies the width of the content in pixel that should be shown. Shortcode attribute: show_part_of_iframe_width=""

Height of the visible content

Specifies the height of the content in pixel that should be shown. Shortcode attribute: show_part_of_iframe_height=""

Enable horizontal scrollbar Yes     No

By default you specify a fixed area you want to show from the external page. Settings this to "true" will show a horizontal scrollbar if needed. Shortcode attribute: show_part_of_iframe_allow_scrollbar_horizontal="true" or show_part_of_iframe_allow_scrollbar_horizontal="false"

Enable vertical scrollbar Yes     No

By default you specify a fixed area you want to show from the external page. Settings this to "true" will show a vertical scrollbar if needed. Shortcode attribute: show_part_of_iframe_allow_scrollbar_vertical="true" or show_part_of_iframe_allow_scrollbar_vertical="false"

Viewport style

Show part of an iframe does create an additional div which is the element you can style here. If you e.g. want to add a border you can use "border: 2px solid #ff0000;". Using the style, border or class in the default settings do not work as they are all related to the iframe directly! Shortcode attribute: show_part_of_iframe_style=""

With the following 5 options you can do something when the page in the iframe does change. The parent page does only know the url of the iframe that is loaded initially. This is a browser restriction when the pages are not on the same domain. The parent only can find out when the page inside does change. But it does not know to which url. So the options below rely on a counting of the onload event. But for certain solutions (e.g. show only the login part of a page and then open the result page as parent) this will work.

Change the viewport when iframe changes to the next step

You can define different viewports when the page inside the iframe does change and a onload event is fired. Each time this event is fired a different viewport is shown. A viewport is defined the following way: left,top,width,height e.g. 50,100,500,600. You can define several viewports (if you e.g. have a staright workflow) by seperating the viewports by ; e.g. 50,100,500,600;10,40,200,400. Shortcode attribute: show_part_of_iframe_next_viewports=""

Restart the viewports from the beginning after the last step. Yes     No

If you define different viewports it could make sense always to use them in a loop. E.g. if you have an image gallery where you have an overview with viewport 1 and a detail page with viewport 2. And you can only can come from the overview to the detail page and back. Shortcode attribute: show_part_of_iframe_next_viewports_loop="true" or show_part_of_iframe_next_viewports_loop="false"

Open iFrame in new window after the last step

You can define if the iframe is opened in a new tab/window or as full window. the options you can use are "_top" = as full window, "_blank" = new tab/window or you leave it blank to stay in the iframe. Because of the browser restriction not the current url of the iframe can be loaded. It is either the initial one or the one you specify in the next setting. Shortcode attribute: show_part_of_iframe_new_window="", show_part_of_iframe_new_window="_top" or show_part_of_iframe_new_window="_blank"

Url that is opened after the last step

You can define the url that is loaded after the last step. This enables you to jump to a certain page after your workflow. This is useful with the above. Shortcode attribute: show_part_of_iframe_new_url=""

Hide the iframe after the last step Yes     No

Hides the iframe after the last step completely. Shortcode attribute: show_part_of_iframe_next_viewports_hide="true" or show_part_of_iframe_next_viewports_hide="false"

Hide a part of the iframe

Please note: This is an advanced setting! You need to know basic html/css! You can define an area which will be hidden by a rectangle you define. This can e.g. be used to hide a logo. A rectangle is defined the following way: left,top,width,height,color,z-index e.g. 10,20,200,50,#ffffff,10. This defines a rectagle in white with the z-index of 10. z-index means the layer the rectangle is placed. If you don't see your rectangle please use a higher z-index. You can also define a background image here! use e.g. 10,20,200,50,#ffffff;background-image:url(your-logo.gif);background-repeat:no-repeat;,10 for a white rectange with the given background image. Use the area selector to get the coordinates very easy. You can specify several rectangles by seperating them by |. Please see the pro demo for a cool example where a logo is exchanged. You can also create read only iframes with this feature. Use hide_part_of_iframe="0,0,100%,100%,transparent,10". For a working example please see example 21 of the pro demo. Shortcode attribute: hide_part_of_iframe=""

Modify the content of the iframe if the iframe page is on the same domain

With the following options you can modify the content of the iframe. IMPORTANT: This is only possible if the iframe comes from the same domain because of the same origin policy of Javascript.

If you can use the workaround like described below you can also use this setting if you upgrade to the pro version.

Please read the section "How to find the id and the attributes" above how to find the right styles. If the content comes from a different domain you have to modify the iframe page by e.g. adding a Javascript function that is then called by the onload function you can set above or you add a parameter in the url that you can read in the iframe and display the page differently then. You should also use the external workaround to modify the iframe if your page loads quite slow and you see the modifications on subsequent pages. The reason is that the direct modification can only be done after the page is loaded and the "Hide until loaded" is only working for the 1st page. The external workaround is able to hide the iframe until it is modified always and also css can be added to the header directly.

Hide elements in iframe

This setting allows you to hide elements inside the iframe. This can be used to hide a border or a heading. Usage: If you want to hide a div you have to enter a hash (#) followed by the id e.g. #header. If you want to hide a heading which is a <h2> you have to enter h2. You can define several elements separated by , e.g. #header,h2. I recommend using firebug to find the elements and the ids. You can use any valid jQuery selector pattern here! Shortcode attribute: iframe_hide_elements=""

Show only one element

You can define which part of the page should be shown in the iframe. You can define the id (e.g. #id) or the class (.class) which should be shown. Be aware that all other elements below the body are removed! So if your css relies on a certain structure you have to add additional css by "Content id in iframe" below. Very often also a background is defined for the header which you should remove below. e.g. by setting background-image: none; in the body. This can be done at "Content id in iframe" and "Content styles in iframe" below. Shortcode attribute: onload_show_element_only=""

With the next 2 options you can modify the css of your iframe if it is on the same domain. The first option defines the id/class/element you want to modify and at the 2nd option you define the styles you want to change.

Content id in iframe

Set the id of the element starting with a hash (#) that defines element you want to modify the css. You can use any valid jQuery selector pattern here! In the field below you then define the style you want to overwrite. You can also define more than one element. Please separate them by | and provide the styles below. Please read the note below how to find this id for other templates. #content|h2 means that you want to set a new style for the div content and the heading h2 below. Shortcode attribute: iframe_content_id=""

Content styles in iframe

Define the styles that have to be overwritten to enable the full width. Most of the time you have to modify some of the following attributes: width, margin-left, margin-right, padding-left. Please use ; as separator between styles. If you have defined more than one element above (Content id in iframe) please separate the different style sets with |. The default values are: Wordpress default: 'width:450px;padding-left:45px;'. Twenty Ten: 'margin-left:20px;margin-right:240px'. iNove: 'width:605px'. Please read the note below how to find these styles for other templates. If you have defined #content|h2 at the Content id you can e.g. set 'width:650px;padding-left:25px;|padding-left:15px;'. Shortcode attribute: iframe_content_styles=""

With the next 2 options you can modify the target of links in your iframe if it is on the same domain.

Change iframe links

Change links of the iframe page to open the url at a different target. This option does add the attribute target="your target" to the links you define. The targets are defined in the next setting. You can use any valid jQuery selector pattern here! So if your link e.g. has an id="link1" you have to use "a#link1". If you want to change all links e.g. in the div with the id="menu-div" you have to use "#menu-div a". If you e.g. only want to change all links of pdfs you can use "a[href$=.pdf]"). You can also define more than one element. Please separate them with |. Shortcode attribute: change_iframe_links=""

Change iframe links target

Here you define the targets for the links you define in the setting before. If you have defined more than one element above (Change iframe links) please separate the different targets with |. E.g. "_blank|_top". Shortcode attribute: change_iframe_links_target=""

Resize the iframe to the content height/width


Resize the iframe to the content height/width

Options if the iframe is on the same domain

PLEASE READ THIS FIRST:

Only if the content from the iframe comes from the same domain it is possible that the onload attribute can execute Javascript directly which does e.g. resize the iframe to the height of the content or scroll the parent window to the top.
If this is the case you can use the settings below. If you want to include an iframe from a different domain please read the how-to "Enabling cross-site scripting XSS via an iframe" below where I explain how this can be done if you can modify the web site that should be included. So if you are on a different domain and cannot edit the external iframe page no interaction between parent and iframe is possible!

Onload

Enter the 'onload' script of the iframe you want to execute. You can enter Javascript that is executed when the iframe is loaded. Please check the following settings first! There you find a solution for iframe resize and one for scrolling the parent to the top. Please note that the output is escaped for security reasons with the Wordpress function esc_js. So please define your Javascript functions in your parent page, read all needed parameters inside the functions and call this function here. I recommend to use only the following characters: a-zA-Z_0-9();. Also note that the 2 settings below also use the onload event. So if you set them to true the code is appended to your onload function. If you like a different order of the predefined functions (aiShowElementOnly(id,element); aiResizeIframe(this); and aiScrollToTop();) please set the settings below to 'No' and enter them here directly. Shortcode attribute: onload=""

Resize iframe to content height Yes     No

If you like that the iframe is resized to the height of the content you should set this to 'Yes'. Please note that this is done by Javascript! So if a user has Javascript deactivated or a not supported browser the iframe does not get resized. Please set the height of the iframe to the minimum pixels the iframe should have! Some web pages use 100% of the height. Specifying a too big value as height does not gives you the expected result. This setting generates the code onload="aiResizeIframe(this);" to the iframe. Shortcode attribute: onload_resize="true" or onload_resize="false"

       Resize delay

Sometimes the external page does not have its full height after loading because e.g. parts of the page are build by Javascript. If this is the case you can define a timeout in millisecounds until the resize is called. Otherwise leave this field empty.. Shortcode attribute: onload_resize_delay=""

Store height in cookie Yes     No

If you enable the dynamic resize the value is calculated each time when the page is loaded. So each time it took a little time until the resize of the iframe is done. And this is visible sometimes if the content page loads very slow or is on a different domain or depends on the browser. By enabling this option the last calculated height is stored in a cookie and available right away. The iframe is then first resized to this height and later on when the new height comes it is updated. By default this is disabled because when you have dynamic content in the iframe it is possible that the iframe does not shrink. So please try this setting with your destination page. If you use several iframes on one page please don't use this because currently only one cookie per page is supported. Also you cannot use this feature if you include the ai.js file at the bottom. If you use iframe on different pages different id are needed because the id is part of the cookie.. Shortcode attribute: store_height_in_cookie="true" or store_height_in_cookie="false"

Additional height

If you like that the iframe is higher than the calculated value you can add some extra height here. This number is then added to the calculated one. This is e.g. needed if one of your tested browsers displays a scrollbar because of 1 or 2 pixel. Or you have an invisible area that is shown by the click on a button that can increase the size of the page. This option is NOT possible when "Store height in cookie" is enabled because this would cause that the height will increase at each reload of the parent page. If you use several iframes please use the same setting for all of them because there is only one global variable. Shortcode attribute: additional_height=""

Resize iframe to content width Yes     No

If you like that the iframe is resized to the width of the content you should set this to 'Yes'. Please note that this is done by Javascript and only in combination with resizing the content height! So if a user has Javascript deactivated or a not supported browser the iframe does not get resized. This setting generates the code onload="aiResizeIframe(this, 'true');" to the iframe. Shortcode attribute: onload_resize_width="true" or onload_resize_width="false"

Resize on click events

If you like that the iframe is resized after clicks in the iframe please enter the timeout here. Otherwise leave this field empty. The number is the timeout in milliseconds untill the resize is called. This setting intercepts the clicks on the element specified below. Catching happens BEFORE the actuall action on e.g. the link. Therefore you need to enter a number > 0 because the original action is done later. 100 is a good value to start with! If you have e.g. a slide down effect you should add the time here it takes to get the full height. This setting does only work on the SAME domain by default. If you like to get this working across different domains you have to extract the code from the plugin and add it to your remote page. Shortcode attribute: resize_on_click=""

       Elements where the
       clicks are intercepted

You can define the tags and ids where the clicks should be intercepted. By default all links "a" are intercepted. To define a specific id you have to add the id with a :. So intercepting all links with the id "testid" you have to enter "a:testid". The id you specify is compared with "contains". So if you use "a:test" all links with an id containing test are intercepted. You can add several tags separated by ",". So "a:test,button:submitid" would work fine. Always try to specify the elements as exactly as possible to avoid any problems with other Javascript on the site. If you leave this field empty resize on click events is NOT enabled at all! Shortcode attribute: resize_on_click_elements=""

Resize on AJAX events

If you like that the iframe is resized after each AJAX event in the iframe please enter a number here. Otherwise leave this field empty. The number is the timeout in milliseconds until the resize is called. This setting intercepts the AJAX call after the callback was executed. So for many pages 0 should work fine. But if you have e.g. a slide down effect you should add the time here to get the full height. Currently only jQuery and direct XMLHttpRequest are supported as AJAX calls on the included page! See the "AJAX events are jQuery" setting. This setting does only work on the SAME domain by default. If you like to get this working across different domains you have to extract the code from the plugin and add it to your remote page. Shortcode attribute: resize_on_ajax=""

       AJAX events are jQuery Yes     No

Currently only direct XMLHttpRequest and jQuery AJAX call can be intercepted. Please select true = jQuery, false = XMLHttpRequest. Shortcode attribute: resize_on_ajax_jquery="true" or resize_on_ajax_jquery="false"

Resize on element resize

With this setting you are able to detect if the size of an element changes. If this is the case than the iframe is resized. This can be on click, by an Ajax call, typing with the keyboard where a menu opens, a timer .... So actually any change of the size. The big advantage is that this feature is most of the time easier to configure than the options before and also more powerfull. But it has the disadvantage that the change of the size is not send by an event but the defined elements are checked in a fix intervall (see below). So e.g. every 100ms a certain div is checked and if the size has changed the iframe is resized.
If you only specify "body" then the iframe does enlage nicely but does not get smaller anymore. So the best way to configure this is to use the outermost element where the change can happen. Please see example 26 for a working example. You can use the jQuery syntax to specify the elements. Most likely the outermost div (e.g. #main, #page, #wrap) is the one you need. This feature is also available in the external workaround while "Resize on click events" and "Resize on AJAX events" not yet! Shortcode attribute: resize_on_element_resize=""

       Poll intervall for the
       resize detection

The invervall in ms the specified element is checked for a change of the size. The minimum polloing time is 50ms. If you a smaller value the default of 250 is used. Shortcode attribute: resize_on_element_resize_delay=""

Resize hidden iframes on tabs

Elements that are hidden with display:none return a size of 0 when the height is measured. This is very often the case when tabs are used and you place an iframe on a tab that is not shown by default. The next settings are needed for a workaround that moves the hidden element out of the viewport, shows and measures the iframe and moves everything back. To get this working you need to provide the id or class of the tab that is hidden and depending on the tabs plugin also the id or class of the tab that is visible by default to get the correct width. Please read the section "How to find the id and the attributes" above how to find the right id or class. E.g. Tabby Responsive Tabs and Post UI Tabs work fine with this solution. Even nested tabs do work! If you need a custom solution please contact me for an offer.

IMPORTANT: If you use this feature with the external workaround you NEED to set a resize delay because otherwise the height is measured while the element is still hidden. This can be done by setting "var onload_resize_delay = 200;" before the external workaround script. Depending on the size of your page you might have to increase this value. As the tab is hidden this should not be a problem. For details please see here.

Please note: Check the lazy load feature! It does also support hidden tabs and is maybe the better solution as you only load the iframe when it is really visible.

Please note: This feature is not supported for responsive iframes because the size of the hidden tabs are not calculated at each resize.

Hidden tab(s) with iframe

The id or class of the tab that is hidden. You need to define the element that has display:none set. E.g. For "Tabby Responsive Tabs" this would be #tablist1-panel2 if the iframe is on the 2nd tab. For "Post UI Tabs" it would be #tabs-1-2. If you have nested hidden elements all elements need to be defined here. You need to specify each hidden element starting from the outermost. e.g. #tablist1-panel2,#tabs-1-2 if you use "Tabby Responsive Tabs" and inside the tabs "Post UI Tabs. Shortcode attribute: tab_hidden=""

Visible tab

The id or class of the tab that is visible by default. This is needed to preserve the width of the first hidden tab. Depending on your css this is not needed but e.g. for "Tabby Responsive Tabs" you would need #tablist1-panel1 in the default setup. If you have defined several elements at "Hidden tab(s) with iframe" you need to specify the element that has the same width as the hidden element you have defined first above. Shortcode attribute: tab_visible=""

External workaround: Howto enable cross domain resize and modification


Howto enable cross domain resize and modification

Solution if the iframe is NOT on the same domain: Enabling cross-site scripting XSS via an iframe

You need to be able to modify the external web page you want to have in the iframe to use the workaround!

Show me more infos how this works.
If the parent site and the iframe site are NOT on the same domain it is only possible to do the above stuff by including an additional iframe to the remote page which than can call a script on the parent domain that can then access the functions there. A detailed documentation how this works is described here:

http://www.codecouch.com/2008/10/cross-site-scripting-xss-using-iframes - This plugin does wrap everything that is described there. Simple follow the steps below.

The following steps are needed:
  1. The parent page has a Javascript function that resizes the iframe
  2. The external iframe page has an additional hidden iframe, an onload attribute at the body and a javascript function
  3. A page on the parent domain does exist that is included by the hidden iframe that calls the function on the parent page

Everything is already prepared that you need on the parent domain. For the remote page the Javascript file ai_external.js is generated when you save the settings which you have to include into your external iframe page:

  1. Add the following Javascript to the external web page you want to have in the iframe (The optimal place is before the </body> if possible. Otherwise put it in the head section. NEVER place it just after the <body> as than the height of the script element would be measured!):

    <script src="http://yourdomain/path/ai_external.js"></script>

    Show me what the Javascript does

    The Javascript does the following:
    1. Adds "aiUpdateIframeHeight()" to the onload event of the page
    2. Modifies the remote iframe page (pro version only) - Please see below how to configure this.
    3. Adds the iframe dynamically
    4. Adds a wrapper div below the body if needed
    5. Removes any margin, padding from the body
    6. Adds a temporary overflow:hidden to the body to avoid scrollbars

  2. Enable the workarounds you want to use below.

Enable the height workaround Yes     No

Enable the height workaround in the generated Javascript file. If you want to use several iframes please use the description below for configuration. This settings only works if you have included the Javascript to the remote page.
IMPORTANT: If you set this setting to true the settings from "Options if the iframe is on the same domain" and "Modify the content of the iframe if the iframe page is on the same domain" are disabled. The settings of ""Modify the content of the iframe if the iframe page is on the same domain" are used in the pro version in the external workaround. These settings would generated Javascipt security errors if set for an external domain! Shortcode attribute: enable_external_height_workaround="false". The shortcode can only be used to enable the disabled functionality describe before!

Keep overflow:hidden after resize Yes     No

By default overflow:hidden (removes any scrollbars inside the iframe) is set during the resize to avoid scrollbars and is removed afterwards to allow scrollbars if e.g. the content changes because of dynamic elements. If you set this setting to true the overflow:hidden is not removed and any scrollbars are not shown. This is e.g. helpful if the page is still to wide! If you want to use several iframes please use the description below for configuration. These settings only works if you have included the Javascript to the remote page. This setting cannot be set by a shortcode. Please see below.

Hide the iframe until it is completely modified. Yes     No

This setting hides the iframe until the external workaround is completely done. This prevents that you see the original site before any modifications. The normal "Hide the iframe until it is loaded" shows the iframe after all modifications are done which are all done by a local script. This way cannot be used for the external workaround because the exact time when the external modifications are done is unknown. Therefore the external workaround does call iaShowIframe after all modifications are done. This setting cannot be set by a shortcode. Make sure that if you use different settings on different iframes the id of the shortcode matches the setting you make below because otherwise the iframe is not hidden.

Write css directly Yes     No

By default changes off the iframe are made by jQuery after the page is loaded. This is the only way this is possible if you do this directly. But with the external workaround it is now also possible that the style is written directly to the page. It is written where the ai_external.js is included. So if you use this option you need to include the ai_external.js as last element in the header. This setting has the advantage that the changes are not done after the page is loaded but when the browser renders the page initially. Also the page is not hidden until the page is fully modified. The settings "Hide elements in iframe" and "Modify content in iframe" are supported! This setting cannot be set by a shortcode. Please see below.

Iframe redirect url

If you like that the page you want to include can only be viewed in your iframe you can define the parent url here. If someone tries to open the url directly he will be redirected to this url. Existing parameters from the original url are added to the new url. You need to add the possible parameters to the "URL forward parameters" that they will be passed to the iframe again. This settting does use Javascript for the redirect. If Javascript is turned off the user can still access the site. If you also want to avoid this add "html {visibility:hidden;}" to the style sheet of your iframe page. Than the page is simply white. The Javascript does set the page visible after it is loaded!

Add the id to the url of the iframe

This feature adds the id of the iframe to the iframe url. The id is than extracted on the iframe and used as value for the callback to find the right iframe on the parent side. The static way is to set iframe_id (Please see below). The dynamic solution has to be used if you want to include the same page several times to the parent page (e.g. the page you include is called with different parameters and shows different content then). You specify the paramter that is added to the url. So e.g. ai_id can be used. Allowed values are only a-zA-Z0-9_. Do NOT use any other characters. You need to set the parameter here or by setting iframe_url_id before you include ai_external.js. Please note the if you specify it here ALL shortcodes with use_shortcode_parameters_only="true" need pass_id_by_url to be set. See example 27 for a working setup. Shortcode: pass_id_by_url=""

Please note: If you change the settings above make sure to do a full reload the page in the iframe!

Please test with all browsers! If the wrapper div is needed (It has a transparent border of 1px!) and it causes layout problems you have to remove the wrapper div in the Javascript file and you have to measure the body. The alternative solution is stored as comment in the Javascript file. The Javascript file is regenerated each time you save the settings on this page.
The workaround only supports one iframe on one page currently.

How to configure the "Modifies the remote iframe page" options

The configuration which is rendered by default to the Javascript is the one you enter in the settings above at "Modify the content of the iframe if the iframe page is on the same domain".

How to configure the workaround to work with different settings for different iframes

The file ai_external.js is created when you save the settings. If you want to have different settings for different pages you can define the parameters which are used in the script before you include the file ai_external.js.

The following parameters can be used:

Show me the parameters.

  • iframe_id - By default the id from the settings are used. If you want to use several iframes on the same page with the external workaround you need to specify the id from the shortcode.
  • updateIframeHeight - Enable/disable the resize height workaround. Valid values are "true", "false".
  • keepOverflowHidden - Enable/disable if the overflow:hidden is kept. Valid values are "true", "false".
  • hide_page_until_loaded_external - Enable/disable that the page is hidden until fully modified. Valid values are "true", "false".
  • iframe_hide_elements - See Hide elements in iframe.
  • onload_show_element_only - See Show only one element
  • iframe_content_id - See Content id in iframe
  • iframe_content_styles - See Content styles in iframe
  • change_iframe_links - See Change iframe links
  • change_iframe_links_target - See Change iframe links target
  • onload_resize_delay - See Resize delay. This setting is not stored in ai_external.js as default because if you enable the external workaround this setting is disabled above because of configuration inconsistencies! So this setting has to be done in the external page. e.g. var onload_resize_delay=100; means 100 ms resize delay. You also need this setting when you use the hidden tabs feature.
  • iframe_redirect_url - Defines an url which is loaded if the page is not included in an iframe. See "Iframe redirect url" above.
  • write_css_directly - See "Write css directly" above. Valid settings are write_css_directly="true" or write_css_directly="false".
  • additional_js_iframe - The ai_external.js can also write additional Javscript. This is loaded at the end of ai_external.js. The advantage using this is that the Javascript is only loaded if the page is inside the iframe and is not loaded when accessed directly.
  • additional_js_file_iframe - The ai_external.js can also load an additional Javascript file. This is loaded at the end of ai_external.js. The advantage using this is that the file is only loaded if the page is inside the iframe and is not loaded when accessed directly. Please note that the file is loaded asynchronously.
  • resize_on_element_resize - See "Resize on element resize"
  • resize_on_element_resize_delay - See "Poll intervall for the resize detection"
  • iframe_url_id - See "Add the id to the url of the iframe"
  • element_to_measure - You can define the element you want to measure + a offset for fix content. This is sometimes needed for some themes where e.g. chrome returns 0 as height.
  • element_to_measure_offset - The offset for a fix content

An example would look like this:

<script>
   var updateIframeHeight = "true";
   var keepOverflowHidden = "false";
   var hide_page_until_loaded_external = "true";
</script>
<script src="http://yourdomain/path/ai_external.js"></script>

Important: If you want to include one external page into more than one iframe only one configuration for the external page is possible. You need to include the script from every parent page that the resize callback is done properly. If you have different configurations they overwrite each other and you will get an unexpected result. If you need more complex configurations like this I recommend to get the professional support offered for this plugin because then an indivitual solution has to be designed and a custom version of the plugin would be needed.

New 6.3 - Config files for the external workaround

Defining the variables before the script has the disadvantage that you need to modify the html of the remote domain for every change and also the code there can get really big. Therefore it is now possible to use config files which are located on the parent server and loaded dynamically from the external_ai.js. Config files have to be placed in the root folder of the plugin (where advanced-iframe.php is located) and need to follow this naming convention: ai_external_config_<config_id>.js. This file does contain exactly the variables described before. Then you need to add the config_id as parameter to the external_ai.js like this: ..../ai_external.js?config_id=<config_id>. The config_id can only contain alphanumeric characters, - and _.

You can also include the config file directly before the ai_external.js script. This gives you the same flexibility but you have to include 2 scripts. The performance including this directly is a little bit better because no internal loading has to be done!

Show me the example above with a config file

In this example the config_id "example" is used.

  1. First create a file called "ai_external_config_example.js" in the main folder of the plugin where the advanced-iframe.php file is and save the following lines there:
       var updateIframeHeight = "true";
       var keepOverflowHidden = "false";
  2. a. Add the parameter ?config_id=example to the external_ai.js
        <script src="http://localhost/wordpress32/wp-content/plugins/advanced-iframe/js/ai_external.js?config_id=example"></script>
    or
    b. <script src="http://localhost/wordpress32/wp-content/plugins/advanced-iframe/ai_external_config_example.js"></script>
        <script src="http://localhost/wordpress32/wp-content/plugins/advanced-iframe/js/ai_external.js"></script>
  3. Done. Make sure that you refresh the browser cache if you make changes to your config file. Example 7 shows a working setup.

Existing config files

The following configuration files do currently exist. Please note that you can view/edit this files with the plugin editor of Wordpress by clicking on the "Edit/View" link. Hover over the script you want to include. Click 3 times fast to select it and add the line before your ai_external.js if you use the 2nd way to include the configuration.


  • No custom configuration files found.

Create a config file with the following id:

Add additional files


Add additional files

All settings above are designed for smaller changes of the parent or the iframe. If you want to make bigger changes and you are able to store this in a file including a whole file is the better solution. Below you can add additional Javascript or css files to the different pages.

Existing additional files

The following additional files in the folder "advanced-iframe-custom" do currently exist. Please note that you can view/edit this files with the plugin editor of Wordpress by clicking on the "Edit/View" link. Hover over the file you want to include and click 3 times fast to select it.


  • No custom additional files found.

Create a custom file. Only files with the extensions css or js are allowed. All files are prefiex with "custom_":

Parent

For some features in iframes additional css or js files are needed in the parent(!) page. E.g. for the newest version of lytebox this is needed. Each of the files do get a version number which is randomly changed each time you save the settings. So if you change the css or the js file you should save the settings to make sure your users to get the new version right away and not a chached one. If you need to add css or Javascipt to the iframe please check the settings of the external workaround.

Additional css

If you want to include an additional css into the parent page please specify the path to this file here. The css file will be added into the header of the page. You can specify a full or relative url. If you specify a relative one /style.css means that the style.css is located in the main directory of Wordpress. Start relative urls with /. Please note: Before Wordpress 3.3 the shortcode attribute cannot be used. You can only set it here. Shortcode attribute: additional_css=""

Additional js

If you want to include an additional Javascript into the parent page please specify the path to this file here. The Javascript will be added after the iframe or if you use Wordpress >= 3.3 in the footer section. You can specify a full or relative url. If you specify a relative one /javascript.js means that the javascript.js is located in the main directory of Wordpress. Start relative urls with /. Please note: Before Wordpress 3.3 the shortcode attribute cannot be used. You can only set it here. Shortcode attribute: additional_js=""

Iframe

You can also include a css file directly into the iframe page. This setting is also saved in the external workaround file. In the external workaround file the settings below are written at the place where the ai_external.js is included!

Additional css in iframe

You can also include a css file directly into the iframe page. The css file will be added at the bottom of the body to overwrite also all inline styles. The styles are added after the page is loaded. You can specify a full or relative url. If you specify a relative one /style.css means that the style.css is located in the main directory of the iframe page. Shortcode attribute: additional_css_file_iframe=""

Additional Javascript in iframe

For the same domain you can also include a css file directly into the iframe page. The css file will be added at the bottom of the body to overwrite also all inline styles. The styles are added after the page is loaded. You can specify a full or relative url. If you specify a relative one /javascript.js means that the javascript.js is located in the main directory of the iframe page. Shortcode attribute: additional_js_file_iframe=""

Include content directly


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. If you use the setting below no iframe is used anymore. So only include stuff that is for display only.
Please note: Loading the external content is done after the page is fully loaded and takes some time. Therefore some extra settings below are possible to make the integration as invisible as possible. The included div has the id ai_temp_>iframe_name<. So if you need to overwrite some css you can put it in an extra file and add this in the section "Additional files"

Include url

Enter the full URL to your page you want to include. e.g. http://www.tinywebgallery.com. If you specify this then the page is included directly, the iframe settings above are not used and no iframe is included. Shortcode attribute: include_url=""

Include content

You can specify an id or a class which specify the content area that should be included. For an id please use e.g. #id, for a class use .class. Shortcode attribute: include_content=""

Include height

You can specify the height of the content that should be included. If you do this the space for the content is already reserved and this prevents that you maybe see when the page gets updated. You should specify the value in px. Shortcode attribute: include_height=""

Include fade

You can specify a fade in time that is used when the content is done loading. If you leave this setting entry the content is shown right away. If you specify a time in milliseconds then this content is faded in in the given time. This does sometimes looks nicer than if the content suddenly appears. Shortcode attribute: include_fade=""

Hide page until include is loaded Yes     No

If you like to hide the whole page until the extra content is loaded you should set this to 'Yes'. You should test this setting and decide what looks best for you. Shortcode attribute: include_hide_page_until_loaded="true" or include_hide_page_until_loaded="false"

Small jQuery help


Small jQuery help

You can use jquery selector patterns directly to identify the elements you want to modify at some of the settings. This plugin does use this selectors than at the right place. This is already an advanced topic if you are not familiar with jQuery.

Show me a small jQuery selector help.

I have created a small jquery selector help which is optimized for the advanced iframes scenarios. It is an extract from http://refcardz.dzone.com/refcardz/jquery-selectors#refcard-download-social-buttons-display. So please go there if you need an extended version or give someone credit.

What are jQuery selectors?

jQuery selectors are one of the most important aspects of the jQuery library. These selectors use familiar CSS syntax to allow page authors to quickly and easily identify any set of page elements to operate upon with the jQuery library methods. Understanding jQuery selectors is the key to using the jQuery library most effectively. The selector is a string expression that identifies the set of DOM elements that will be collected into a matched set to be operated upon by the jQuery methods.

Types of jQuery selectors?

There are three categories of jQuery selectors: Basic CSS selectors, Positional selectors, and Custom jQuery selectors.

The Basic Selectors are known as "find selectors" as they are used to find elements within the DOM. The Positional and Custom Selectors are "filter selectors" as they filter a set of elements (which defaults to the entire set of elements in the DOM). This extract only shows the basic selectors as they are most important and will cover most of your needs.

Basic CSS Selectors

These selectors follow standard CSS3 syntax and semantics.

Syntax Description
* Matches any element.
E Matches all elements with tag name E.
E F Matches all elements with tag name F that are descendants of E.
E>F Matches all elements with tag name F that are direct children of E.
E+F Matches all elements with tag name F that are immediately preceded by a sibling of tag name E.
E~F Matches all elements with tag name F that are preceded by any sibling of tag name E.
E:has(F) Matches all elements with tag name E that have at least one descendant with tag name F.
E.c Matches all elements E that possess a class name of c. Omitting E is identical to *.c.
E#i Matches all elements E that possess an id value of i. Omitting E is identical to *#i.
E[a] Matches all elements E that posses an attribute a of any value.
E[a=v] Matches all elements E that posses an attribute a whose value is exactly v.
E[a^=v] Matches all elements E that posses an attribute a whose value starts with v.
E[a$=v] Matches all elements E that posses an attribute a whose value ends with v.
E[a*=v] Matches all elements E that posses an attribute a whose value contains v.

Examples

  • $("div") selects all <div> elements
  • $("fieldset a") selects all <a> elements within <fieldset> elements
  • $("li>p") selects all <p> elements that are direct children of <li> elements
  • $("div~p") selects all <div> elements that are preceded by a <p> element
  • $("p:has(b)") selects all <p> elements that contain a <b> element
  • $("div.someClass") selects all <div> elements with a class name of someClass
  • $(".someClass") selects all elements with class name someClass
  • $("#testButton") selects the element with the id value of testButton
  • $("img[alt]") selects all <img> elements that possess an alt attribute
  • $("a[href$=.pdf]") selects all <a> elements that possess an href attribute that ends in .pdf
  • $("button[id*=test]") selects all buttons whose id attributes contain test

You can create the union of multiple disparate selectors by listing them, separated by commas. For example, the following matches all <div> and <p> elements: div,p

Advanced iframe browser detection


Advanced iframe browser detection

Pro users can now specify browser specific iframes. This is imporant especially for the "Show only part of the iframe" feature where browser differences of a few pixels can matter. But you can use this for other things as well because mobile, iphone, ipad can also be detected.

Show me how to configure the browser detection in advanced iframe pro.

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.

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 separaring 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.

Example 1 - Special settings for IE 10 and IE 11

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

Example 2 - Special settings for IE, Firefox and Chrome

[advanced_iframe securitykey="xxx" id="example2" show_part_of_iframe_x="25" browser="ie"]
[advanced_iframe securitykey="xxx" id="example2" show_part_of_iframe_x="23" browser="firefox,chrome"]
[advanced_iframe securitykey="xxx" id="example2" show_part_of_iframe_x="20" browser="default"]

Example 3 - Show a different iframe on iframe on apple devices and mobile devices

[advanced_iframe securitykey="xxx" id="example3" src="apple iframe" browser="iphone,ipad,ipod"]
[advanced_iframe securitykey="xxx" id="example3" src="other mobile devices iframe" browser="mobile"]
[advanced_iframe securitykey="xxx" id="example3" src="normal iframe" browser="default"]

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.
  • tablets - Selects all tablet devices.
  • android - Selects all android devices.
  • androidtablet - Selects all android tablet devices.
  • default - Is used if no other advanced iframe pro with the same id was selected before.

Credit and update

Advanced iFrame Pro uses an integrated browser detection which is based on the wordpress plugin "php-browser-detection 2.2.3" and the browser detection file (5033, 23 Sep 2014) from browscap.org.

You can get an updated version of the browsercap.ini file here: http://tempdownloads.browserscap.com/
or the latest version 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 there!

Wordpress Flash Uploader, TinyWebGallery, Joomla Flash Uploader


Wordpress Flash Uploader, TinyWebGallery, Joomla Flash Uploader

This plugin is the extract for the iframe wrapper which was written for the TinyWebGallery. I needed an iframe wrapper that could do more than simply include a page. It needed to pass parameters to the iframe and modify the template on the fly to get more space for TWG. If you want to integrate TWG please use the "TinyWebGallery wrapper". It offers specific features only needed for the gallery. I hope this standalone wrapper is useful for other Wordpress users as well.

Please take a look at my other projects: Wordpress Flash Uploader, TinyWebGallery, Joomla Flash Uploader or TWG Flash Uploader. If you like TWG or one of my other projects like JFU, WFU or TFU you should consider registering, because you can use all products with one single license, get all features of the gallery and a complete upload solution as well.

Please go www.tinywebgallery.com for details.