原生js获取iframe中dom元素–父子页面相互获取对方dom元素的方法

当在网页中嵌入了一个iframe元素时，有时候需要获取其中的DOM元素或与iframe页面里面的JS代码进行交互，这时需要使用原生Javascript来进行操作。

获取iframe中的DOM元素

1. 获取iframe元素

首先，我们需要获取到iframe元素，这可以通过以下方法来实现:

const iframe = document.getElementById('myIframe');

其中，'id'需要设置为iframe元素的ID。

1. 获取iframe的window对象

接下来，我们需要获取iframe中的window对象，然后通过window对象来获取DOM元素。可以通过以下方法来实现：

const iframe = document.getElementById('myIframe');
const iframeWindow = iframe.contentWindow;
const iframeDocument = iframeWindow.document;
const iframeElement = iframeDocument.getElementById('myElement');

在第二行代码中，"contentWindow"属性会返回iframe的window对象。在第三行代码中，我们获取iframe的document对象，这样我们就可以操作iframe中的DOM元素了。最后一行代码是获取具体的DOM元素，需要设置'id'为需要获取的DOM元素的ID。

父页面操作iframe中的DOM元素

如果想要父页面操作iframe中的DOM元素，可以这样做：

1. 获取iframe对象

const iframe = document.getElementById('myIframe');

1. 获取iframe中的DOM元素

const iframeWindow = iframe.contentWindow;
const iframeDocument = iframeWindow.document;
const iframeElement = iframeDocument.getElementById('myElement');

1. 修改DOM元素内容

iframeElement.innerHTML = "Hello World";

iframe页面操作父页面的DOM元素

如果想要iframe中的JS代码操作父页面的DOM元素，需要通过parent对象来实现。

1. 获取父页面的DOM元素

const parentElement = parent.document.getElementById('myParentElement');

1. 修改DOM元素内容

parentElement.innerHTML = "Hello Parent World";

以上是原生Javascript获取iframe中DOM元素的方法及父子页面相互获取对方dom元素的方法，可以根据需要灵活应用。