Skip to content

IFrames plugin

R.Brown edited this page Dec 4, 2020 · 11 revisions

(work-in-progress) IFrames support

TODO

Provides support for Guidechimp to work with elements in iframes

Use Cases

  • Highlighting elements in iFrame

Installation

Please refer to the plugins' installation and configuration Wiki page.

How To Use

To highlight an element in an iframe, you need to specify an array of the iframe's parent elements (selectors or HTMLElements) while maintaining the nesting order of the iframe.

<body>
    <iframe id="iframe1">
        <iframe id="iframe2">
            <iframe id="iframe3">
               <div id="first-step-element">First Step Element</div>
            </iframe>
        </iframe>
    </iframe>

</body>
GuideChimp.extend(guideChimpPluginIFrames);

var tour = [{
    element: '#first-step-element',
    iFrames: ['#iframe1', '#iframe2', '#iframes3'],
    title: 'First Step Element',
}];

var guide  = GuideChimp(tour);
guide.start();
Clone this wiki locally