iframe页面加载完成为什么还是获取不到里面的dom

iframe页面加载完成为什么还是获取不到里面的dom？

因为Iframe是跨域，跨域的情况下是无法获取到iframe里面的DOM的，即使iframe加载完成，也无法获取到里面的DOM。 有什么方法获取的到呢？

1.使用 window.postMessage 方法，将信息从iframe传递到父页面，从而能够获取到iframe里面的DOM。

2.使用document.domain，将iframe和父页面设置为同一个域，从而能够获取到iframe里面的DOM。

3.使用跨域资源共享（CORS），从而能够跨域获取iframe里面的DOM。

例如：1.window.postMessage方法： 父页面： // 监听来自子页面的消息 window.addEventListener('message', (event) => { console.log(event.data); }, false); // 向子页面发送消息 window.frames[0].postMessage('Hello, child page', '*'); 子页面： // 监听来自父页面的消息 window.addEventListener('message', (event) => { console.log(event.data); }, false); // 向父页面发送消息 window.parent.postMessage('Hello, parent page', '*');

2.document.domain方法： 父页面和子页面设置相同的document.domain即可，然后即可以使用任意js方法从父页面访问子页面的DOM元素。  父页面： document.domain = 'example.com'; 子页面： document.domain = 'example.com'; // 父页面访问子页面的DOM var element = window.frames[0].document.getElementById('example');  

3.跨域资源共享（CORS）： 使用CORS可以跨域访问资源，可以让父页面访问iframe里面的DOM。 父页面： <iframe src="http://example.com/iframe.html" allow="cross-origin"></iframe> 子页面： <script> document.addEventListener('DOMContentLoaded', () => { // 父页面访问子页面的DOM var element = document.getElementById('example'); }); </script>