getAdminOptions(); // print_r($devOptions); if (isset($_POST['update_iframe-loader'])) { //save option changes $adminSettings = array('securitykey', 'src', 'width', 'height', 'scrolling', 'marginwidth', 'marginheight', 'frameborder', 'transparency', 'content_id', 'content_styles', 'hide_elements', 'class', 'shortcode_attributes', 'url_forward_parameter', 'id', 'name', 'onload', 'onload_resize', 'onload_scroll_top', 'additional_js', 'additional_css', 'store_height_in_cookie', 'additional_height', 'iframe_content_id', 'iframe_content_styles', 'iframe_hide_elements', 'version_counter', 'onload_show_element_only' ); if (!wp_verify_nonce($_POST['twg-options'], 'twg-options')) die('Sorry, your nonce did not verify.'); foreach ($adminSettings as $item) { if ($item == 'version_counter') { $text = rand(100000, 999999); } else { $text = trim($_POST[$item]); } // replace ' with " $text = str_replace("'", '"' ,$text); if (function_exists('sanitize_text_field')) { $devOptions[$item] = stripslashes(sanitize_text_field($text)); } else { $devOptions[$item] = stripslashes($text); } } update_option($this->adminOptionsName, $devOptions); ?>


[advanced_iframe securitykey=""]

Javascript iframe onload options\' section below! Shortcode attribute: height=""', 'advanced-iframe')); printAutoNo($devOptions, __('Scrolling', 'advanced-iframe'), 'scrolling', __('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. Shortcode attribute: scrolling="auto" or scrolling="no"', 'advanced-iframe')); printNumberInput($devOptions, __('Margin width', 'advanced-iframe'), 'marginwidth', __('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=""', 'advanced-iframe')); printNumberInput($devOptions, __('Margin height', 'advanced-iframe'), 'marginheight', __('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=""', 'advanced-iframe')); printNumberInput($devOptions, __('Frame border', 'advanced-iframe'), 'frameborder', __('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=""', 'advanced-iframe')); printTrueFalse($devOptions, __('Transparency', 'advanced-iframe'), 'transparency', __('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" ', 'advanced-iframe')); printTextInput($devOptions, __('Class', 'advanced-iframe'), 'class', __('You can define a class for the iframe if you like. Shortcode attribute: class=""', 'advanced-iframe')); printTextInput($devOptions, __('URL forward parameters', 'advanced-iframe'), 'url_forward_parameter', __('Define the parameters that should be passed from the browser url to the iframe url. Please separate the parameters by \',\'. 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=""', 'advanced-iframe')); // new 1.4 printTextInput($devOptions, __('Id', 'advanced-iframe'), 'id', __('Enter the \'id\' attribute of the iframe. Shortcode attribute: id=""', 'advanced-iframe')); printTextInput($devOptions, __('Name', 'advanced-iframe'), 'name', __('Enter the \'name\' attribute of the iframe. Shortcode attribute: name=""', 'advanced-iframe')); ?>


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 to use firebug (see below) to find the elements and ids. You can use any valid jQuery selector pattern here! Shortcode attribute: hide_elements=""', 'advanced-iframe')); echo '

'; _e('With the following 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.', 'advanced-iframe'); echo '

'; printTextInput($devOptions, __('Content id', 'advanced-iframe'), '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 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: content_styles=""', 'advanced-iframe')); printTextInput($devOptions, __('Content styles', 'advanced-iframe'), 'content_styles', __('Define the styles that have to be overwritten to enable the full width. Most of the time 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=""', 'advanced-iframe')); ?>

How to find the id and the attributes:

  1. Manually: Go to Appearance -> Editor and select the page template. The you have to look with 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.
', 'advanced-iframe'); ?>


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 iframe page no interaction between parent and iframe is possible!

. Shortcode attribute: store_height_in_cookie="true" or store_height_in_cookie="false" ', 'advanced-iframe')); printHeightNumberInput($devOptions, __('Additional height', 'advanced-iframe'), '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 increases 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. Shortcode attribute: additional_height=""', 'advanced-iframe')); printTrueFalse($devOptions, __('Scrolls the parent window to the top', 'advanced-iframe'), 'onload_scroll_top', __('If you like that if you click on a link in the iframe and 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" ', 'advanced-iframe')); ?>

IMPORTANT: This is only possible if the iframe comes from the same domain because of the same origin policy of Javascript. 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.', 'advanced-iframe'); ?>

'; _e('With the following 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.', 'advanced-iframe'); echo '

'; printTextInput($devOptions, __('Content id in iframe', 'advanced-iframe'), 'iframe_content_id', __('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_styles=""', 'advanced-iframe')); printTextInput($devOptions, __('Content styles in iframe', 'advanced-iframe'), 'iframe_content_styles', __('Define the styles that have to be overwritten to enable the full width. Most of the time 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=""', 'iframe_advanced-iframe')); ?>

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 iframe page which runs again on the parent domain and can then access the functions there. A detailed documentation how this can be done is described here:

http://www.codecouch.com/2008/10/cross-site-scripting-xss-using-iframes

The following steps are needed:
  1. Don't use the onload options above (cookie and additional height does work).
  2. The parent page has a Javascript function that resized the iframe
  3. The iframe page has an additional hidden iframe, an onload attribute at the body and a javascript function
  4. A page on the parent domain does exist that is included by the hidden iframe that calls the function on the parent page
For that features 'resize' and 'scroll to top' I have already prepared everything that you need on the parent domain. Therefore 2. and 4. are already done :). For 3. you have to do the following changes in your page that is included in the iframe:
  1. Add the following Javascript function to the header and check if the domain and wordpress root is correct!:

    <script type="text/javascript">
        function updateIframeHeight() {
            var iframe = document.getElementById('hiddenIframe');
            var newHeight = parseInt(document.body.scrollHeight,10);
            iframe.src = ' /wp-content/plugins/advanced-iframe/js/iframe_height.html?height=' + newHeight;
        }
    </script>

  2. Change <body> to <body onload="updateIframeHeight()">:
  3. Add the hidden iframe at the bottom of your body:

    <iframe id="hiddenIframe" style="visibility:hidden;" width="0" height="0" src=" /wp-content/plugins/advanced-iframe/js/iframe_height.html">Iframes not supported.</iframe>

For the 'scroll to top' functionality please replace iframe_height.html with iframe_scroll.html and remove the height variable. In the plugin folder is an example.html where both examples are shown. For "Show only one element" you also have to rewrite the Javscript because it would remove the hidden iframe as well. The example should point you to the right direction if you like to do something simelar.

= 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 /. Shortcode attribute: additional_js=""', 'advanced-iframe')); ?>



www.tinywebgallery.com for details.', 'advanced-iframe'); ?>



Donate

You like this plugin? Support the development with a small donation.

' . $label . ' '; echo ' ' . __('Yes', 'advanced-iframe') . '   ' . __('No', 'advanced-iframe') . '
' . $description . ' '; } function printAutoNo($options, $label, $id, $description) { echo ' ' . $label . ' '; echo ' ' . __('Yes', 'advanced-iframe') . '   ' . __('No', 'advanced-iframe') . '
' . $description . ' '; } function printTextInput($options, $label, $id, $description, $type = 'text') { echo ' ' . $label . '
' . $description . ' '; } function printNumberInput($options, $label, $id, $description, $type = 'text') { if (!isset($options[$id])) { $options[$id] = 'false'; } echo ' ' . $label . '
' . $description . ' '; } function printHeightTrueFalse($options, $label, $id, $description) { echo ' ' . $label . ' '; echo ' ' . __('Yes', 'advanced-iframe') . '   ' . __('No', 'advanced-iframe') . '
' . $description . ' '; } function printHeightNumberInput($options, $label, $id, $description, $type = 'text') { if (!isset($options[$id])) { $options[$id] = 'false'; } $disabled = ''; if ($options['store_height_in_cookie'] == 'true') { $disabled = ' readonly="readonly" '; $options[$id] = '0'; } echo ' ' . $label . '
' . $description . ' '; } ?>