Iframes Information & Troubleshooting

###GENERAL INFORMATION Forms, photo galleries, and other interactive media are often contained within iframes, and so it's important to detect activity within them. For example, the editable textareas of WYSIWYG editors such as TinyMCE and CKEditor are within iframes.

No one wants users to 'time out' while they are in the middle of filling out a form or editing their CMS pages!

Jquery-idleTimeout can detect activity within iframes on your site, including:

• Iframes within JQuery dialogs (popups)
• Nested iframes (iframes within iframes)
• Iframes inserted dynamically into the body of the page. Please read the DYNAMIC IFRAMES section below.

###IFRAMES - SAME-ORIGIN POLICY For 'activity detection' within an iframe to work correctly, the content of the iframe must be from the same domain (Same-Origin Policy) as the parent page. This means the page within the iframes must be use the same protocol, host and port. Note that an iframe from a subdomain of the parent page is 'cross-site' and not 'Same-Origin'.

There are methods for 'relaxing' the Same-Origin policy. Please read the information on this at http://en.wikipedia.org/wiki/Same-origin_policy

###IFRAMES DEMO View this page for examples of iframes: static, dynamic, single, nested, 'cross-site', etc. http://jillelaine.github.io/jquery-idleTimeout/iframe-demo.html

You can create an iframe demo with console output for debugging on your site: load the jquery-idleTimeout-for-testing.js, which includes iframe functionality.

###HOW IT WORKS The addition of 'activity detection' to iframes is tricky. Iframes on the page must first be identified (found) by the jquery-idleTimeout script, and next an 'activity event' listener is attached to each 'Same-Origin' iframe. This listener allows activity detected within the iframe to 'bubble' to the parent page.

The 'activity event' listener cannot be attached to iframes that do not meet the Same-Origin Policy.

###DYNAMIC IFRAMES Iframes that are added to the page AFTER the page loads require an 'iframe recheck'. In other words, the newly added iframes must be 'found' and the 'activity event' listener attached.

Dynamic iframes within JQuery dialogs are automatically checked for iframes. The jquery-idleTimeout script 'listens' for new dialogs and initiates an 'iframe recheck' every time a dialog is opened.

Iframes added to the body of the page require a manual 'iframe recheck'. Please add this snippet of code to run after the function that inserts the iframe: $.fn.idleTimeout().iframeRecheck().

Example - Manual Iframe Recheck:

<input type="button" value="Insert New Iframe" onclick='$("#iframe_id").append("<iframe src=\"iframe-same-origin-child.html\"></iframe>");$.fn.idleTimeout().iframeRecheck();' />

###TROUBLESHOOTING IFRAMES

If activity is not detected within an iframe, please check these pointers.

Did you load the right jquery-idleTimeout script?

Iframe detection requires one of 'iframes' scripts:

• jquery-idleTimeout-iframes.min.js (runs fastest)
• jquery-idleTimeout-iframes.js (good)
• jquery-idleTimeout-for-testing.js (for testing only - not recommended for production sites)

Has the iframe been found and does it meet the Same-Origin policy?

How to check: the jquery-idleTimeout script adds one or two CSS classes to all 'found' iframes. View the source of the page and inspect the iframe HTML tag.

• All 'found' iframes have the CSS class, 'jit-inspected', added
• Iframes that do NOT meet the Same-Origin policy also have the CSS class, 'cross-site', added

If an iframe does not have the 'jit-inspected' class, perhaps it was dynamically inserted into the page, and you didn't call the 'iframe recheck' function after the insertion? Please read the DYNAMIC IFRAMES section above.

If an iframe has the 'cross-site' class, there are methods for 'relaxing' the same domain policy. Please read: http://en.wikipedia.org/wiki/Same-origin_policy

Special Case - Dynamic Iframes - Iframes added after the page has loaded:

• Iframes within JQuery UI Dialogs (popups) should be automatically added to 'activity detection'.
• Iframes added to the body of the page require an 'iframe recheck' function call. Please read the DYNAMIC IFRAMES section above.

Rare problem? If multiple dynamic iframes are added in rapid succession to the body of the page, it's possible that some of iframes will be incorrectly detected as 'cross-site' by the jquery-idleTimeout script. You can demonstrate this issue by rapidly clicking the "Insert New Iframe - Same Domain" button at the bottom of the iframe demo page: http://jillelaine.github.io/jquery-idleTimeout/iframe-demo.html

If you experience this particular problem on your site, please open an issue!

###CLOSED IFRAME ISSUES Iframe functionality and enhancement was added after two issues were submitted. https://github.com/JillElaine/jquery-idleTimeout/issues/5 (basic iframe detection) https://github.com/JillElaine/jquery-idleTimeout/issues/14 (dynamic iframe detection)