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 ', 'advanced-iframe');
echo renderExternalWorkaroundIcon(true);
_e('. This means that this setting is saved to the ai_exernal.js', 'advanced-iframe') ?>
second level domain. e.g. www.example.com, subdomain.example.com -> second level domain: 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!
', 'advanced-iframe') ?>
<script>document.domain='';</script>
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.
', 'advanced-iframe'); ?>
If you are on a different domain (not sub domain):
';
_e('The file ai_external.js is not generated yet. Please save the configuration once to create this file.', 'advanced-iframe');
echo '';
}
$channel = $devOptions['use_post_message'] == 'false' ? 'iframe' : 'window.postMessage';
_e('
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!):', 'advanced-iframe') ?>
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)
', 'advanced-iframe');
if ($evanto || $isDemo) {
_e(' - Please see below how to configure this.', 'advanced-iframe');
}
_e('
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
', 'advanced-iframe');
?>
Please note: All settings here and also in the other sections which are marked with a ', 'advanced-iframe');
echo renderExternalWorkaroundIcon(true);
_e(' are saved to the external ai_external.js workaround file! ', 'advanced-iframe');
?>
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 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.
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
', 'advanced-iframe');
?>
Important: "Yes" does disable all settings with a ' . renderExternalWorkaroundIcon(true) . ' in the administration for the same domain and enables auto height in the ai_externals.js! This is needed as otherwise the plugin would try to use this settings directly which causes Javascript security errors! Only set this if ALL of your iframes are remote! "External" does enable the setting only in the ai_externals.js. This is the default now as auto height is than working right away. You need to set enable_external_height_workaround="true" or use_shortcode_attributes_only="true" in the shortcode for iframes with external pages that the settings from the administration are not used directly. So if you use several iframes with the external workaround and the same domain you should set this setting to "External" and set enable_external_height_workaround="true" in the short code for full flexibility. Please see below how to configure ai_external.js directly.', 'advanced-iframe'), "external",'http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/external-workaround-auto-height-and-css-modifications',true);
if ($evanto || $isDemo) {
printTextInput(true,$devOptions, __('Element to measure', 'advanced-iframe'), 'element_to_measure', __('This parameter defines the element that is measured on the remote page. "default" tries to measure the first element of the body or the wrapper div. But sometimes this does not work if e.g. the element does return a wrong height because of css styles or dynamically added elements. You can use the id directly here or you can also a valid jQuery selector pattern here that start with # or .! Sometimes also adding the style overflow:hidden to the element you want to measure is needed. You can do this direcly in your html or with the plugin dynamically. Please read the section "How to find the id and the attributes" to find the right id or class. This setting cannot be set by a shortcode. Please see below how to configure ai_external.js directly.', 'advanced-iframe'), 'text', '',true);
printHeightNumberInput(true,$devOptions, __('Additional height', 'advanced-iframe'), 'element_to_measure_offset', __('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 if there is an additional margin around the body. This setting cannot be set by a shortcode. Please see below how to configure ai_external.js directly.', 'advanced-iframe'),'text', '', true);
printNumberInput(true,$devOptions, __('Resize/ css modification delay', 'advanced-iframe'), 'external_height_workaround_delay', __('Sometimes the external page does not have its full height and all elements 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 and the modification of elements are called. Otherwise set a 0 to disable the delay. This setting cannot be set by a shortcode. Please see below how to configure ai_external.js directly.', 'advanced-iframe'),'text', '', '', true);
}
printTrueFalse(false,$devOptions, __('Keep overflow:hidden after resize', 'advanced-iframe'), 'keep_overflow_hidden', __('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 how to configure ai_external.js directly.', 'advanced-iframe'), "false",'http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/external-workaround-auto-height-and-css-modifications',true);
printTrueFalse(false,$devOptions, __('Hide the iframe until it is completely modified.', 'advanced-iframe'), 'hide_page_until_loaded_external', __('This setting hides the iframe until the external workaround is completely done. This prevents that you see the original site before any modifications. You need to enable this AND in the shortcode. 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 setting in the shortcode does hide in iframe until the external workaround does call iaShowIframe after all modifications are done. Shortcode attribute: hide_page_until_loaded_external="true" or hide_page_until_loaded_external="false"', 'advanced-iframe'), "false",'http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/external-workaround-auto-height-and-css-modifications',true);
if ($evanto || $isDemo) {
printTrueFalse(true,$devOptions, __('Write css directly', 'advanced-iframe'), 'write_css_directly', __('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 how to configure ai_external.js directly.', 'advanced-iframe'), "false", 'http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/resize-on-element-resize#e27',true);
printTextInput(true,$devOptions, __('Iframe redirect url', 'advanced-iframe'), '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 IF no ? is found in the iframe_redirect_url. You need to add the possible parameters to the "URL forward parameters" that they will be passed to the iframe again. This setting 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! iframe_redirect_url does now also check if the page is included by the domain specified. Otherwise it is redirected to the iframe_redirect_url. This way you can make sure that the iframe page can only be included by a page on your domain. Please see the additional option below you have if you define this parameter before the ai_external.js. This setting cannot be set by a shortcode. Please see below how to configure ai_external.js directly.', 'advanced-iframe'), 'text', 'http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/change-links-targets#e11',true);
printTextInput(true,$devOptions, __('Add the id to the url of the iframe', 'advanced-iframe'), 'pass_id_by_url', __('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). You specify the parameter 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=""', 'advanced-iframe'), 'text', 'http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/resize-on-element-resize#e27',true);
printTrueFalse(true,$devOptions, __('Keep iframe modifications outside iframe', 'advanced-iframe'), 'modify_iframe_if_cookie', __('Please note: This is a really advanced feature! Please ask in the forum if you plan to use this! Normally the page in the iframe is only modified if it is in the iframe. But sometimes the page in the iframe does not work properly in the iframe in a workflow. So you need to jump out out of the iframe. But you maybe still want to hide/modify the content of this page even outside the iframe. This feature does enable this by setting a session cookie. If you enable this feature a cookie is set if you do modifications in the iframe and even if you jump out of the iframe the modifications are still done. This setting cannot be set by a shortcode. Please see below how to configure ai_external.js directly.', 'advanced-iframe'), "false", 'http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/external-workaround-auto-height-and-css-modifications',true);
printTrueFalse(true,$devOptions, __('Support WP multisite', 'advanced-iframe'), 'multi_domain_enabled', __('By default the callback url is rendered to the ai_external.js. For WP multi sites the default setting does than only work for one of the domains. "Yes" does enable that the Javascript compares the default url with the one from the referrer. Than the default domain will be exchanged with the one from the referrer. This only works if the domain is the only difference between the multi sites. Please see below how to configure ai_external.js directly. If you only enable this in ai_external.js directly you need to use multi_domain_enabled="true" in the shortcode! If you use postMessage for communication please read the documenation there how to use this setting!', 'advanced-iframe'), "false", 'http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/external-workaround-with-post-message',true);
}
?>
here for the two different communication ways and what is the best one for you. If you have any problems with windows.postMessage select "Debug" and additional log information about the transfered data is printed to the browser console. Use F12 at your browser to open the developer tools. The administration does save the current url as targetOrigin into the ai_external.js. If have a multi site or you include your page into differnt parents than you need the pro version and select "Support WP multisite" to "Yes" as than * is used as targetOrigin. Also use post communication if you have a https page in the iframe and your page is http. Please see example 53 for this advanced setup! Please see below how to configure ai_external.js directly. If you only enable this in ai_external.js directly you need to use use_post_message="true"/"debug" in the shortcode!', 'advanced-iframe'), 'http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/external-workaround-with-post-message#e51',true);
if ($evanto || $isDemo) {
printTextInput(true,$devOptions, __('i-20-Include content directly from the iframe', 'advanced-iframe'), 'data_post_message', __('When you enable post communication you can read elements from the iframe and transfer it to the parent and include it there. This is like the feature "Include content directly" from the "Add files/content" from the next tab but more powerful. You can define here as many elements you like and insert it to the parent page. To enable this setting you need to specify ther element of the parent and the element of the iframe seperated by a |. Several settings are seperatd by , e.g. #c-id|#content,#s-id|#some-images,#p-id|#iframe-right p:nth-child(2). You can use any valid jQuery selector pattern here! Currently the iframe is NOT hidden by default. After the setup you need to set display:none; on the basic tab at "Style". Currently there are no additional settings like for the same domain. So make sure that e.g. the divs you want to add the content have e.g. the correct height for optimal display! This setting cannot be set by a shortcode. Please see below how to configure ai_external.js directly.', 'advanced-iframe'), 'text', 'http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/external-workaround-with-post-message#e52',true);
printTextInput(true,$devOptions, __('Scroll to top', 'advanced-iframe'), 'external_scroll_top', __('This solution is only needed if your page inside the iframe is NOT reloading the page when going from one page to the next. If you have an Ajax form no onload event is fired! This solution does send the scroll to top event to the parent if you click on any of the specified elements here! You can use any valid jQuery selector pattern here! E.g. "button" would send the on load event if you click on any html button element. You need to use postMessage communication for this feature. This setting cannot be set by a shortcode. Please see below how to configure ai_external.js directly.', 'advanced-iframe'), 'text', 'http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/external-workaround-with-post-message#e51',true);
}
?>
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!', 'advanced-iframe') ?>
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.', 'advanced-iframe') ?>
How to configure the "Modifies the remote iframe page" options
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.
Please note: All parameters can be set in the administration. This are the settings where a ', 'advanced-iframe');
echo renderExternalWorkaroundIcon(true);
_e(' is shown! You only need to define variables before the script or a configuration file if you need to include the SAME ai_external.js with DIFFERENT configurations. See the FAQ for more details.
The following parameters can be used:
', 'advanced-iframe');
?>
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".
', 'advanced-iframe');
if ($evanto || $isDemo) {
_e('
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 - 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.
external_scroll_top - Defines the elements where a scroll to top event is sent back to the parent. See above.
', 'advanced-iframe');
}
_e('
An example would look like this:
<script>
var updateIframeHeight = "true";
var keepOverflowHidden = "false";
</script>
', 'advanced-iframe') ?>
<script src="/advanced-iframe/js/ai_external.js"></script>
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!', 'advanced-iframe') ?>
var updateIframeHeight = "true";
var keepOverflowHidden = "false";', 'advanced-iframe') ?>
<script src="/advanced-iframe/js/ai_external.js?config_id=example"></script>
or
b. <script src="/advanced-iframe-custom/ai_external_config_example.js"></script>
<script src="/advanced-iframe/js/ai_external.js"></script>
Example 7 shows a working setup.', 'advanced-iframe') ?>
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.', 'advanced-iframe') ?>