';
echo '';
_e('Please note: ', 'advanced-iframe');
echo '';
_e('The free version of Advanced iFrame uses a hidden iframe to communicate between the iframe and the parent. The recommended method nowadays is to use postMessage, which is used in the Pro version. It is unclear how long major browsers will support this solution. If you want to use the auto-height feature on a professional website, it is recommended that you upgrade to the Pro version, which uses postMessage. The hidden iframe solution will not be maintained anymore and will be removed in one of the next versions!', 'advanced-iframe');
echo '';
echo '';
}
?>
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') ?>
Resize to content summary first if you want to use auto height.', 'advanced-iframe') ?>
';
_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('
Info: Currently selected communication channel: ', 'advanced-iframe');
echo $channel;
_e('. See here what this means.
', 'advanced-iframe');
if ($channel === 'iframe' && $evanto) {
echo '
';
_e('You are still using iframe communication from the free version. Please switch to postMessage communication to get all possible features.', 'advanced-iframe');
echo '
';
}
_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') ?>
Important: In the free and codecanyon version the plugin folder is "advanced-iframe". In the new pro version it is "advanced-iframe-pro". If you update from free to pro please change the path. For more details see
here.
<script src="js/ai_external.js"></script>
- 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) and clean the browser cache
- Open ai_external.js directly in the browser by clicking here and also force a full reload. Sometimes the file is cached by a proxy. Check the time stamp (Created:) on the top of the file.
- 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.
- Make sure the ids do match! Often the demos are copied! so the shortcode has a id from the example but the ai_external.js has the default from the basic tab. Make sure to use the same id for both!
- 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 fewer 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. You can also append ?aiEnableDebugConsole=true/false to the url to enable/disable the debug console.
- Go to the Help/ FAQ tab. There you find additional infos and links to the FAQ and the forum
', 'advanced-iframe');
?>
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
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".
', 'advanced-iframe');
}
aiPostboxClose();
if ($evanto || $isDemo) {
aiPostboxOpen("id-external-ai-config-post", "Use postMessage for communication", $closedArray);
?>
How to configure the workaround file ai_external.js directly to work with different settings.', 'advanced-iframe');
aiPostboxOpen("id-external-ai-overview", "Parameter overview of ai_external.js", $closedArray);
_e('
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:
', '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('
- 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
- change_iframe_links_href - See Change iframe links href
- 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 = "https://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 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"
- add_iframe_url_as_param_direct - See "Add iframe params directly to parent"
- use_iframe_title_for_parent - See "Use iframe title for the parent"
- 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 elements that should be transfered to the client. Needs to be also set as shortcode because of security reasons OR fully in the administration. See above.
- scroll_to_top - Defines the elements where a scroll to top event is sent back to the parent. See above.
', 'advanced-iframe');
}
_e('
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 custom folder plugin completely manually if you don\'t want to keep these settings!', '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 documentation 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 individual solution has to be designed and a custom version of the plugin would be needed.', 'advanced-iframe') ?>