It throw error if target element inside a iframe on Chrome
See original GitHub issueDescribe the bug If we try observe an element inside iframe it will throw an error:
Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element"
It because when you check target instanceof Element
it return false
. The reason are explained here: https://stackoverflow.com/questions/52222237/instanceof-fails-in-iframe
We can try other way to check target is an element like: https://stackoverflow.com/questions/384286/how-do-you-check-if-a-javascript-object-is-a-dom-object
Or use lodash.iselement: https://www.npmjs.com/package/lodash.iselement
To Reproduce Please try this demo on Chrome: https://codesandbox.io/s/pensive-cache-31co0
Expected behavior It work with element inside iframe.
Frameworks/Libraries used React
Desktop (please complete the following information):
- OS: Any
- Browser Chrome
Issue Analytics
- State:
- Created 4 years ago
- Comments:11 (10 by maintainers)
Top Results From Across the Web
How can I access the DOM elements within an iFrame
In my trying to solve this issue, I discovered some pretty bizarre things (in Chrome) with iFrames. When you first look in the...
Read more >Using Cypress - Cypress Documentation
How do I get the native DOM reference of an element found using Cypress? Cypress wraps elements in jQuery so you'd get the...
Read more >chrome.scripting - Chrome Developers
Use the chrome.scripting API to execute script in different contexts. Permissions ... This function will be executed in the context of injection target....
Read more >Element.requestFullscreen() - Web APIs | MDN
If the element has been detached from the original document, ... The TypeError exception may be delivered in any of the following situations ......
Read more >Working with IFrames and frames | Selenium
However, if there are no buttons outside of the iframe, you might instead get a no such element error. This happens because Selenium...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Hi @JayaKrishnaNamburu your problem on the demo above easy to fix by use iframe document to create element instead of top windown document.
The demo for the fix: https://codesandbox.io/s/observer-330-forked-39xy9?file=/src/App.tsx
Great! I’m not sure if you’ve looked at the code yet but it’s probably best to just test if
el instanceof Element
first and return. If not, continue to try and find the document/window scope. This is the current issue for your use case, as the util cannot find out what thedefaultView
is.