Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error when using splide in a iframe in chrome #931

Closed
2 tasks done
Gizmo2109 opened this issue Sep 22, 2022 · 15 comments
Closed
2 tasks done

Error when using splide in a iframe in chrome #931

Gizmo2109 opened this issue Sep 22, 2022 · 15 comments
Labels
bug Something isn't working

Comments

@Gizmo2109
Copy link

Gizmo2109 commented Sep 22, 2022

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 (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
Copy link
Collaborator

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
Copy link
Author

I am using neos cms rn and wantet to create an element to create galleries
grafik
when debugging in this line when i step into isHTMLElement
grafik
grafik
and then step 1 more time
grafik
it will return false (shown on the right Return value: false)

@Gizmo2109
Copy link
Author

Gizmo2109 commented Sep 22, 2022

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
Copy link
Collaborator

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
Copy link
Author

Gizmo2109 commented Sep 22, 2022

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
Copy link

beezital commented Sep 22, 2022

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
Copy link
Collaborator

NaotoshiFujita commented Sep 22, 2022

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
Copy link

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
Copy link
Author

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
Copy link
Collaborator

NaotoshiFujita commented Sep 23, 2022

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

@NaotoshiFujita
Copy link
Collaborator

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
Copy link
Author

Gizmo2109 commented Sep 23, 2022

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.
grafik
The js code is executed outside of the iframe so just embedding a working website with splide in it wont recreate the issue.

@NaotoshiFujita
Copy link
Collaborator

NaotoshiFujita commented Sep 23, 2022

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
Copy link
Author

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
Copy link

redoC-A2k commented Jan 20, 2024

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants