[Question] Does shepherd support highlighting elements within an iframe?

[wingy3181]

Hi,

I tried to do a quick POC. See https://github.com/wingy3181/shepherd/commit/f5ed9dcc24269beae26334e60086c8d8c6fea7e7

But just wanted to know if Shepherd supports highlighting elements within an iframe? e.g. via the step attachTo.element property with a value of for example document.getElementById('iframeId').contentWindow.document.querySelector('h1'),

I looked into the following issue https://github.com/shipshapecode/shepherd/issues/985 which is some what similar?

I am guessing as per your comment in that issue, that it's just not our iframes work and it will not escape the content in or out of the iframe?

So in other words, due to the limitation of iframes this will never work with any similar library.

Cheers

BTW, thanks for the great library!!

[RobbieTheWagner]

Hi @wingy3181 I think by definition iframes are pretty locked down. I think you would have to have Shepherd running inside the app you have in the iframe and setup your tour steps for the iframe there. I don't think document.querySelector('.foo') will be able to find foo in an iframe.

[wingy3181]

Hi @rwwagner90

Thanks for the reply.

Yea I thought so too around iframes being locked down.

I did look a bit deeper...

So you can grab the element within the iframe as long as its in the same domain (due to CORS restrictions). e.g. via document.getElementById('iframeId').contentWindow.document.querySelector('h1')

But i think i see the calculation of the overlay/highlight here: https://github.com/shipshapecode/shepherd/blob/master/src/js/components/shepherd-modal.svelte#L52

When it is calculating the position of the overlay, it won't take into consideration the iframe's position within the host page.

Unfortunately, in my situation having Shepherd running within the iframe won't satisfy the requirements and technical limitations we have.

Just to give you some context of my situation, the application loads a side panel which has been iframed in (due to technical constraints/limitations)..and the requirement is to highlight items on the page that could be on the host or within the side panel that has been iframed in.

I could spend more time on it to see if it would even be possible but i guess wanted to know your thoughts on (before I spend too much time):

• Is it even possible and am I looking in the right direction?
• Is this edge case something you want this library to even support?

[RobbieTheWagner]

@wingy3181 you are not the first one to request this feature. If you want to spend some time trying to implement it, we would love to support it!

[yaakov123]

I don't know if this works for you, but if you can access an element within the iframe, you can also programatically append a script into the iFrame. Technically, you could add the ShepherdJS script into the the frame at this point.

[wingy3181]

Hi @yaakov123 , unfortunately that most likely wouldn't work for me and might be a pain to maintain in future as I would need to manually keep track of the two independent tours. Moreover, I believe the tour within the iframe is stuck inside there. That is, the overlay would only appear within the iframe portion of it once the tour starts inside the tour.

I was looking at other libraries and SaaSs to see if they support such functionality. Looking at other JS libraries i couldn't find any. But looking at userlane docs suggest they support it via subselectors

I think for shepherd to support this, the API would also change slightly and then it needs to take into consideration the iframe's position (In my POC i can see that it does not and just takes the position of the element within the iframe when displaying the highlight)

Another alternative I thought about but also a bit hacky is to use hidden placeholder elements in the host page that are beneath the iframe......

[ritesh-nitw]

+1. This could be a great addition to the shepherds. As many web apps have iframe. @wingy3181 : Is there any work around?

Thanks

[wingy3181]

FYI I hacked some changes together and got a POC semi-working......just to prove it is possible..... seems like it is..but most likely will have some bugs..moreover popper.js does not actually support iframes as well and i had to use popper options with an offset as per https://github.com/popperjs/popper-core/issues/791#issuecomment-727143848

Needs a lot more cleanup + tests, etc, etc...plus there might be things I missed or dont know about shepherdjs

You can see it somewhat working in the following gif.. where "Heading 1 2" is actually coming from an iframe... Also, didn't do any exhaustive testing with iframes in different positions, etc...

[RobbieTheWagner]

@wingy3181 if we can get it working sometimes, that seems better than not supporting it at all.

[timodwhit]

It isn't ideal and doesn't solve all the complexities of the iframe, but here is a small PR to allow the sizing of the modal to be correct: https://github.com/shipshapecode/shepherd/pull/1833

[rafiazman]

I took a stab at adding some code to correct positioning the overlay cutout for same-origin iframes based on #1833