英文:
How to access DOM elements of parent from child appication which is used as iframe in parent?
问题
我有一个应用程序（子应用），它由Angular完成，并像插件一样使用，该应用程序用于更改其他应用程序的样式属性（如颜色、背景等）。
所以我通过iframe将上述应用程序注入到另一个项目（父应用）中。
<iframe [src]="url" width="100%" height="900">
</iframe>
我的目的是使用子应用程序来修改父应用程序的样式。
因此，当我尝试访问DOM元素时，出现了一些跨域错误，如
core.mjs:9171 错误DOMException：阻止了带有来源“http://192.168.1.7:4200”的框架访问跨域框架。
子组件的代码如下：
parent.document.querySelector('body');
window.parent.document.querySelector('body');
有没有办法获取父应用程序的DOM元素？
有什么建议吗？
英文:
I have an application (child) which is done by angular and used like a plugin , the application is used to change the style properties (like color, background etc) of application another applications.
So i injected the above application inside another project (parent) by iframe.
<iframe [src]="url" width="100%" height="900">
</iframe>
my purpose is to modify the styles of parent application by using child application.
So when i try to access the dom elements , getting some cross domain error like
> core.mjs:9171 ERROR DOMException: Blocked a frame with origin "http://192.168.1.7:4200" from accessing a cross-origin frame.
child component code look like this
parent.document.querySelector('body');
window.parent.document.querySelector('body')
Is there any way to get the dom elements of parent ?
Any suggestions?
答案1
得分: 1
你无法从父级访问iframe，反之亦然。要从iframe通信到其父级，您需要使用postMessages：https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
英文:
you cannot access to the iframe from the parent nor vice-versa.
To communicate from the iFrame to it's parent you need to use postMessages: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论