question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

It throw error if target element inside a iframe on Chrome

See original GitHub issue

Describe 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:closed
  • Created 4 years ago
  • Comments:11 (10 by maintainers)

github_iconTop GitHub Comments

1reaction
minhtranitecommented, Apr 12, 2021

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

1reaction
TremayneChristcommented, Apr 11, 2021

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 the defaultView is.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found