如何解决在iframe中的shadow-root中访问自定义元素
我已经搜索了一段时间,但发现了一些与此问题相关的问题,但没有一个对我有用。
我正在尝试使用devTools内的香草javaScript在iframe的shadow-root中访问div内的自定义元素。
iframe > shadow-root > div > app-header
我想访问<app-header>
自定义元素。
<iframe name="xpc" id=""xpc sandbox="allow-scripts allow-forms
allow-same-origin allow-popups allow-presentaion allow-modals"
allow="microphone" allowfullscreen class="DT7" src="www.example.com">
#document
<!DOCTYPE html>
<html>
<head></head>
<body>
<speech id="speech">
#shadow-root (open)
<!---->
<link href="www.some-google-font-link.com"
rel="stylesheet">
<div>
<app-header fixed style="header": 0ms;
transfrom: translate3d(0px,0px,0px);>
<p>Hello World</p>
</app-header>
</div>
</speech>
</body>
</html>
</iframe>
我尝试使用
-
window.frames.shadowRoot
和我得到的ƒ ShadowRoot() { [native code] }
-
window.frames[frame-id].shadowRoot
和我得到的Uncaught TypeError: Cannot read property 'shadowRoot' of undefined
- 如果我尝试制作
window.frames.document.querySelector/getElementsById/...
,这些总是返回null
那么有什么我可以访问影子根目录内的应用程序标题吗?
解决方法
如果iframe的位置是同一域,请使用:
document.getElementById("myFrame").contentDocument.getElementsByTagName("my-element")[0].shadowRoot
请注意,<speech>
本身不是有效的自定义元素名称。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。