首页 > 其他分享 >iframe页面加载完成为什么还是获取不到里面的dom

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

时间:2023-02-27 15:14:09浏览次数:37  
标签:document 跨域 DOM dom window iframe 加载 页面

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>

标签:document,跨域,DOM,dom,window,iframe,加载,页面
From: https://www.cnblogs.com/ht955/p/17159742.html

相关文章