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:

', 'advanced-iframe') ?>

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('

Info: Currently selected communication channel: ', 'advanced-iframe'); echo $channel; _e('. See here what this means.

', 'advanced-iframe'); _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:

  1. 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') ?>

    <script src="/advanced-iframe/js/ai_external.js"></script>

  2. Adds "aiUpdateIframeHeight()" to the onload event of the page
  3. Sends the height, width and optional data to the parent to enable auto height
  4. Modifies the remote iframe page (pro version only) ', 'advanced-iframe'); if ($evanto || $isDemo) { _e(' - Please see below how to configure this.', 'advanced-iframe'); } _e('
  5. Adds the communication iframe dynamically if iframe communication is used
  6. Adds an optional wrapper div below the body that the height can be measured properly
  7. Removes any margin, padding from the body
  8. Adds a temporary overflow:hidden to the body to avoid scrollbars
    9. ', '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:

    1. Use Chrome for debugging
    2. Force a full reload (win: ctrl + F5)
    3. Clean the browser cache
    4. 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!
    5. 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.
    6. If you have enabled "Use postMessage for communication" set it to "Debug" and check the output in the Javascript console.
    7. 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!
    8. 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.
    9. If you mix http and https you need to enable "Use postMessage for communication" and "Support WP multisite"
    10. Enable the internal debug console (Options -> Debug Javascript) if you have only problems on mobile devices.
    11. 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. If you like that no additional wrapper div is rendered, please add |nowrapper after your setting. The wrapper div is normally only rendered when needed. Sometimes it makes sense to remove this because of performance reasons. 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 milliseconds 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 work flow. 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 documentation 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); } ?>

    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'); } _e('

    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'); ?>

    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') ?>

    1.    var updateIframeHeight = "true";
         var keepOverflowHidden = "false";', 'advanced-iframe') ?>

    2.     <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>
    3. Example 7 shows a working setup.', 'advanced-iframe') ?>

    "; if (count($config_files) === 0) { echo ""; } else { foreach ($config_files as $file) { echo '
    ' .$file . '   '; _e('Edit/View', 'advanced-iframe'); echo ''; $rid = substr(basename($file, ".js"),19); echo '   '; _e('Remove', 'advanced-iframe'); echo '
    '; echo '
    <script src="' . plugins_url() . '/advanced-iframe-custom/'.$file.'"></script>
    '; echo '
    '; } } echo "
    "; ?>


    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') ?>