Closed Gizmo2109 closed 2 years ago
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.
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)
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 https://github.com/Splidejs/splide/discussions/611
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.
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 https://github.com/artf/grapesjs/discussions/4062) like i dont make it up that it returns false in that particular combination i dont realy know why either
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 https://github.com/artf/grapesjs/discussions/4062)
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
?
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)
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
If that's the case, I know the solution. I'll create a new branch so that you can test it.
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
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.
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.
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
@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 (
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
Checks
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 (https://github.com/artf/grapesjs/discussions/4062) but it was never pulled. I already have an open pull request (https://github.com/Splidejs/splide/pull/932) so it would be nice if you pulled it.
Reproduction Link
No response
Steps to Reproduce
Expected Behaviour
It is expected to work in an iframe in chrome