Skip to content

IFrames plugin

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

(work-in-progress) IFrames support

Search and highlight elements in the 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();

Website | Documentation | Plugins | Examples | Labs64 NetLicensing

Clone this wiki locally