Intro.js in an iframe

Question

I wanted it to work in an Iframe but if I define the js. in the parent document it does not recognize the elements that should be "introduced" inside the iframe. If I use it inside the iframe the effect is not what I expect (the overlay covers only the iframe).

[Intro.js being used inside an iframe.png] https://dl.dropboxusercontent.com/u/6421243/Intro.js%20being%20used%20inside%20an%20iframe.png

Is there something I can do with the plugin code so that it searches the elements inside an iframe but still shows the overlay over the parent?

UPDATE: I would like the black overlay over the WHOLE page (so the border of the iframe would also be covered by it).

score 2 · Answer 1 · edited May 23 '17 at 11:43

2

Run intro.js in both iFrame and the parent.

In the parent, remove the toolTip and just highlight the iframe

In the iframe, run whatever toolTips you need

To communication between the two, have a look at this: How to communicate between iframe and the parent site?

edited May 23 '17 at 11:43

Community

1
1

answered Aug 11 '15 at 12:43

brianlmerritt

2,095
1
27
36

Afshin Mehrabani · Accepted Answer · 2013-04-16T16:30:42.783

1

First of all you should know that if you define your JavaScript codes outside of iframe, it's no longer available in the inner iframe because you don't have access to them.

So, you should put your codes inside the iframe only.

Update: So I think you put the container element wrongly so the IntroJs define the overlay wrong wrongly too. Update and change your element container and then you will don't have any problem with that.

edited Apr 16 '13 at 16:30

answered Apr 16 '13 at 06:02

Afshin Mehrabani

28,405
26
117
186

Thanks for the update Afshin: however I think I still did not clarify the problem well enough. In this case I have no container, I only want to introduce elements in the iframe (so I call introJs().start(); inside the iframe) but I want the overlay to cover the WHOLE parent. Now the overlay is covering the of the iframe ONLY (see printscreen from link given in question). How can I do that? Thanks! – Fernando C Martinelli Apr 18 '13 at 21:24
@FernandoCMartinelli any success on this issue? I am facing similar kind of problem – Deadlock Jun 17 '13 at 12:11
Hi Deadlock, no. No success here and Afshin unfortunately did not reply to my emails or messages here on Stackoverflow =\ Do you know any similar plugins to his? THanks for sharing! – Fernando C Martinelli Jun 17 '13 at 16:36

Intro.js in an iframe

2 Answers2