Targeting elements in iframes

Officially we don't support Iframes and thus this feature is disabled by default. If your application uses iframes, contact us and we can enable some experimental functionality for you but we can only offer this functionality as is.

Product Fruits tour and hint target elements can be placed inside of iframes. Once the Iframes support is active, you can create and target steps/hints as ordinary. The only visible difference is that you will see a new parent iframe CSS selector field in the editor.

However, there are some limitations because of the security restrictions of internet browsers.

Limitations

The biggest limitation is the same origin policy. Browsers don't allow interaction with iframe content from the parent application if the same origin rule doesn't match. That means:

• The targeted iframe must be loaded from the same domain as the application. For example, if the application runs at my-app.example.com, the iframe src must be also loaded from my-app.example.com
• If the iframe is loaded from a different subdomain, e.g. iframe.example.com, then you can force the same origin policy by setting document.domain = 'example.com' in your code for both the application and the iframe
• If domains are different (e.g. you are using Google Maps and you want to target something in the map view), there is no way to target elements inside the iframe.