External workaround: Howto enable cross domain resize and modification
Use this solution if the iframe is NOT on the same domain and you want features like auto height and css modifications.
The external workaround does enable many features which are not possible directly because of cross domain security restrictions. You need to include a Javascript file (ai_exernal.js) to the page in the iframe which is generated dynamically with your settings. If you mix http and https pages you NEED to enable "Use postMessage for communication" and follow example 53 for this advanced setup (pro version needed)! In the advanced tab are many settings marked with . This means that this setting is saved to the ai_exernal.js
Important: You need to be able to modify the external web page in the iframe to use the workaround!
Step 1: Check if the page in the iframe has the same second level domain. e.g. www.example.com, subdomain.example.com -> second level domain: example.com:
Special case sub domain:If your iframe has the same second level domain an easier way is possible. You still have to include one line of Javascript but the whole configuration is than like you are on the same domain and all settings can be done by shortcode. To enable this you need to set the value "document.domain" to your second level domain (e.g. parent: www.example.com, iframe: subdomain.example.com -> second level domain: example.com) with Javascript on both pages. The plugin does set this value to the domain below if you enable this feature. See this blog entry or example 42 for further details.
Please note: The resize implementation for the same domain is the same for the pro and the free version. But the external workaround of the PRO version has additional options like you can define the element to measure and it has some additional tricks that the measurements do work. So if you have problems with the auto height don't use this sub domain workaround but the solution with ai_external.js below!
If the domain above is correct please add
<script>document.domain='tinywebgallery.com';</script>
anywhere to the source code of your page of the iframe (!).
After you have done this you can configure Advanced iFrame like you are on the same domain. Don't use the external workaround like describe below as now the configuration is much easier directly on the advanced tab.
If you are on a different domain (not sub domain):
Info: Currently selected communication channel: iframe. See here what this means.
Everything is already prepared what you need on the parent domain. For the remote page the Javascript file ai_external.js is generated when you save the settings. This file hat to be included into your external iframe page:
- Add the following Javascript to the external web page you want to show 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://www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe/js/ai_external.js"></script>
Show me what the Javascript does
The Javascript does the following:
- Adds "aiUpdateIframeHeight()" to the onload event of the page
- Sends the height, width and optional data to the parent to enable auto height
- Modifies the remote iframe page (pro version only)
- Please see below how to configure this.
- Adds the communication iframe dynamically if iframe communication is used
- Adds an optional wrapper div below the body that the height can be measured properly
- Removes any margin, padding from the body
- Adds a temporary overflow:hidden to the body to avoid scrollbars
-
Add enable_external_height_workaround="true" to your shortcode! This is needed to disable the settings with the for the same domain.
-
Enable the features you want to use. Please note: All settings here and also in the other sections which are marked with a are saved to the external ai_external.js workaround file!
-
Done. Click here if it does not work.
If it does not work please check the following things:
- Use Chrome for debugging
- Force a full reload (win: ctrl + F5)
- Clean the browser cache
- I recommend to start with auto height only. Open the Javascript console (press F12 to open the developer tools of the browser), check for errors and fix them. Advanced iframe does also show configuration errors there!
- Check if ai_external.js is loaded in the network tab (F12). If you do not see it check if the file is included properly.
- If you have enabled "Use postMessage for communication" set it to "Debug" and check the output in the Javascript console.
- If you use iframe communication check the network tab (F12), filter for doc/html and look for height.html. There you should see the measured height as parameter. If this does not show switch to postMessage communication as this way has less restrictions.
- If you mix http and https you need to enable "Use postMessage for communication" and "Support WP multisite"
- Enable the internal debug console (Options -> Debug Javascript) if you have only problems on mobile devices.
- Go to the Help/ FAQ tab. There you find additional infos and links to the FAQ and the forum
Please note: If you change the settings above I recommend to reload the iframe page in a different tab because otherwise the page is cached by many browsers!
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.
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 of "Modify the content of the iframe if the iframe page is on the same domain".
How to configure the workaround file ai_external.js directly to work with different settings.
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". Needs only to be set on the remote site if you do not use auto height because otherwise no request is sent back!, "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 above. 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. As an additional option you can use Javascript to add e.g. the current domain to the redirect url! So e.g. var iframe_redirect_url = "http://parent-domain?page=" + escape(window.location.href); would add the iframe url as parameter to the parent. If a ? is found in the iframe_redirect_url then the parameters of the iframe page are NOT added to the redirect url!
- write_css_directly - See "Write css directly" above. Valid settings are write_css_directly="true" or write_css_directly="false".
- additional_css_file_iframe - The ai_external.js can also load an additional css 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.
- 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 interval 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. You need to specify a id. So no # is allowed here.
- element_to_measure - The element you want to measure. See "element to measure" above
- element_to_measure_offset - The additional height for a the measured content. See "Additional height"
- modify_iframe_if_cookie - Enable/disable that the modifications of an iframe is done even outside an iframe. See "Keep iframe modifications outside iframe". Valid values are "true", "false".
- add_iframe_url_as_param - See "Add iframe url as param"
- additional_styles_wrapper_div - Adds additional styles to the wrapper div. Depending on the html/css this is sometimes needed that the element can be measured correctly. overflow:auto; is sometimes needed!
- domainMultisite - Enable/disable multi site settings. See above. Valid values are "true", "false".
- usePostMessage - Enable/disable the usage of postMessage for communication. See above. Valid values are true, false.
- debugPostMessage - Enable/disable the debug of postMessage for communication. See above. Valid values are true, false.
- dataPostMessage - Defines the elementes that should be transfered to the client. See above.
An example would look like this:
<script>
var updateIframeHeight = "true";
var keepOverflowHidden = "false";
</script>
<script src="http://www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe/js/ai_external.js"></script>
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 folder "advanced-iframe-custom" in the plugin directory (This directory does not exist by default and is created if you use the create input filed below) 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!
Please note: The folder "advanced-iframe-custom" is used because Wordpress does delete the whole plugin folder at an update and all your settings would be lost! If you delete the plugin completely you need to remove the folder "advanced-iframe-custom" manually if you don't want to keep this settings!
Show me the example above with a config file
In this example the config_id "example" is used.
- First create a file called "ai_external_config_example.js" in the folder "advanced-iframe-custom" of the plugin directoy (or create the file below) and save the following lines there:
var updateIframeHeight = "true";
var keepOverflowHidden = "false";
-
a. Add the parameter ?config_id=example to the external_ai.js
<script src="http://www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe/js/ai_external.js?config_id=example"></script>
or
b. <script src="http://www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe-custom/ai_external_config_example.js"></script>
<script src="http://www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe/js/ai_external.js"></script>
-
Done. Make sure that you refresh the browser cache if you make changes to your config file. Example 7 shows a working setup.
Important: If you want to include one external page into more than one iframe only one configuration for the external page is possible by default. An advanced topic is to switch configurations depending on an url parameter. This requires to create a custom version of the config switcher template that is included in the js folder of the plugin and called ai_config_switcher_template.js.
Please make a copy of this file and copy it to the folder advanced-iframe-custom. If you want to have this config file listed above please use the following naming ai_external_config_<config_id>.js. Please follow the documenation inside the config switcher file. 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.