Error when using splide in a iframe in chrome

[Gizmo2109]

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

v4.1.2

Description

When using splide in an iframe and while using chrome an uncaught Error appears: "[splide] A track/list element is missing." even though all track and list elements are present. I debugged and found that in splide.esm.js:66 (uncompiled: type.ts:75) the function isHTMLElemnt returns false when given the 'splide__list' element because it is a HTMLUListElement and only inherits HTMLElement. I have already found a fix by @beezital (GrapesJS/grapesjs#4062) but it was never pulled. I already have an open pull request (#932) so it would be nice if you pulled it.

Reproduction Link

No response

Steps to Reproduce

1. Have an iframe
2. Use splide in it
3. open the website with the iframe using chrome

Expected Behaviour

It is expected to work in an iframe in chrome

[NaotoshiFujita]

How do I reproduce the issue? It's working in my chrome:
https://codesandbox.io/s/931-14plyc?file=/index.html

To be honest, I don't want to mock instanceof, since it should not be necessary.

[Gizmo2109]

I am using neos cms rn and wantet to create an element to create galleries

when debugging in this line when i step into isHTMLElement


and then step 1 more time

it will return false (shown on the right Return value: false)

[Gizmo2109]

In neos the middle is a canvas (iframe) (WYSIWYG editor) in which i have my splide track list and such and it all works fine in firefox because it gives the exact same things to the isHTMLElement and returns true.

another thing to know is i run my js outside of the iframe and attache to splide thingies in the iframe

it was also once discussed here #611

[NaotoshiFujita]

Then, Splide works in an iframe, but doesn't in neos CMS.
Is that an issue of Splide? I have no knowledge about neos, but all users using 3rd party libraries can not use instanceof HTMLElement? It's kinda unbelievable.

[Gizmo2109]

it must be some sort of bug in chrome when checking instanceof HTMLElement on an list element that comes from inside of an iframe i dont realy have a better explenation either but this is the way it makes it work reliably for me (and others GrapesJS/grapesjs#4062) like i dont make it up that it returns false in that particular combination i dont realy know why either

[beezital]

This behaviour is due to the different "contexts" of the main window and the iframe (conceptually considered as a different window)
Because the objects do not share the very same instance of their root prototype, the comparison instanceof fails.

see
https://stackoverflow.com/questions/14391506/instanceof-operator-fails-when-passing-an-object-through-windows
and
http://perfectionkills.com/instanceof-considered-harmful-or-how-to-write-a-robust-isarray/

So it's not a bug in Chrome, it's a "feature" of Javascript.
And because of this, it makes IMHO sense to consider replacing calls to instanceof in splidejs with alternatives that are compatible with this special case (as in #932 and GrapesJS/grapesjs#4062)

[NaotoshiFujita]

Of course instanceof fails for different Window instances.
So, are you saying neos creates HTML under the browser window first, and passes it to iframe?

[beezital]

I don't know about neos. I experienced the issue on some other HTML editor (grapesjs). My understanding is that instanceof was comparing an object created outside of the iframe with the HTMLElement of the iframe context (or vice-versa)

[Gizmo2109]

Sorry i dont know the inner workings of neos i just know my splide elements are inside the iframe and my js code is executed outside of the iframe and when it has the element and tries to check it with isHTMLElement it returns false because it comes from inside the iframe. With the fix from @beezital it doesnt matter anymore where the splide elements are. and this all is not really about neos it is about splide not accepting elements from inside of an iframe

[NaotoshiFujita]

If that's the case, I know the solution. I'll create a new branch so that you can test it.

[NaotoshiFujita]

Done in this branch:
https://github.com/Splidejs/splide/tree/iframe

If you are using npm, you can install the branch by:

npm i Splidejs/splide#iframe

[Gizmo2109]

The branch works perfectly but maybe if you see the code that causes it it makes more sence to you. If you still want more infos we can hop in a discord call at some point and i will show you everything live.

The js code is executed outside of the iframe so just embedding a working website with splide in it wont recreate the issue.

[NaotoshiFujita]

Thank you for your proposal, but everything is clear now.

Well, I think initializing Splide from the different window is not a good idea, since it's problematic and probably unsecure.
I'd do it inside it by dynamically appending script tag.

But anyways, the issue has been solved. I will merge the branch to the master after double check.

[Gizmo2109]

Alright thank you but for your security concerns: It will only work if the iframe is created and runs on the same website else you will get in touch with CORS errors when trying to access the contents of an iframe. Anyways i will close this ticket up then

[redoC-A2k]

@Gizmo2109 @NaotoshiFujita @beezital
I am having exact same issue with splidejs in grapesjs , please help me . Would be really really thankful .
I am having error - Error: [splide] A track/list element is missing.
at bn (assert.ts:12:11)
at Object.p [as setup] (Elements.ts:181:13)
at Splide.ts:126:36
at forOwn.ts:20:30
at Array.forEach ()
at w (forOwn.ts:19:65)
at n.mount (Splide.ts:123:13)
at initLib (:19:22)
at HTMLDivElement. (:36:13)
at :38:15

on both chrome and edge , while everything works fine on firefox .
Here's the code - https://github.com/redoC-A2k/Venue-Web-Builder/blob/85221646ed7df6b0509b255c2d96959f8cd7a060/client/src/Plugins/carousel/components.ts#L168