How to select elements inside iframe with Javascript

In this tutorial I explore how to query HTML elements inside of an iframe on your webpage using the contentDocument property and querySelector() function. This allows the code to click another button on the page when user clicks Submit on an embedded Hubspot form.
// TRY WEBFLOW
👉 try.webflow.com/webflow-is-bae
// FREE resources
✂️ Code Snippet Library: code-snippets-sign-up.webflow...
🤝 CSS Nobody Told You About: www.webbae.net/css-nobody-tol...
🚗 Roadmap to learn Webflow: www.webbae.net/roadmap-to-lea...
// Premium content
🤝 Patreon: / webbae
🕸️ Advanced Webflow Course (201): www.webbae.net/product/webflo...
// Discounts
🎢 Get 10% GSAP: WEBBAE10
♣️ Creative Coding Club (My favorite GSAP lessons): www.creativecodingclub.com/bu...
// Connect
🙋‍♀️ Join the Discord: / discord
🐥 Follow Me! / webisbae

[@camputty1827]

You rock man!

[@Irzani938]

New stuff learned.
Never know we can use queryselector on top of contentdocument.
Spent few days finding way to manipulate data inside frame tag.

[@Idiomeme_com]

very good

[@JosephBosas]

amazing. it works

[@webbae]

Glad I could help!

[@JosephBosas]

yeah brother keep up the great work@@webbae

[@Grifanos]

Thanks for the video! I have always been curious about how to style something inside an . But looks like this isn't work for me 🤔
I've tried using this method for clutch widgets, and also for Freshdesks, but this isn't work for me. contentDocument is always returned null, and quarySelector doesn't work.

[@webbae]

Unfortunately it doesn’t always seem to work - depends on the

[@Rob-co6iz]

Sounds like the issue is with the CORS policy of the source of the content.

[@StevenCookFX]

it works for a little while then breaks. Not sure why but there is a change somewhere that turns the variable to null

[@webbae]

😢 sorry it’s not working for you! I frames can be weird sometimes…

[@smartpythonguy7868]

Hi when I run javascript on it block that request.(same origin policy ) Any solutions?

[@webbae]

hey I don't think you can get around that one :(

[@JitinMaherchandani]

Is there a way to disable this? Speaking on behalf of an

[@webbae]

honestly not sure. s don't speak my language usually. 🙃

[@quangngo4432]

cross-origin frame

[@matteokarol]

how to for each frameObj.contentDocument.querySelectorAll("js-post__content-text restore h-wordwrap")forEach[].innerHTML;

[@webbae]

hey... sorry... I'm not sure :(

[@matteokarol]

@@webbae no problema.🙂

[@matteokarol]

@@webbae hi how to put classname in