Skip to content

IFrames plugin

Jump to bottom
R.Brown edited this page Dec 26, 2020 · 11 revisions

IFrames support

IFrames plugin supports highlighting elements in the HTML IFrames.

Use Cases

  • Highlighting elements in IFrames
  • Support nested IFrames

Installation

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

<script src="https://cdn.jsdelivr.net/npm/guidechimp@2/dist/plugins/iFrames.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/guidechimp@2/dist/plugins/iFrames.css">

How To Use

To highlight an element in an IFrame, you need to specify an array of the IFrame's parent elements (selectors or HTML elements). Multiple IFrames definitions need to be provided in the "nested" order.

<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();

Examples

Website | Documentation | Plugins | Examples | Labs64 NetLicensing

Clone this wiki locally