如何获取iframe标签#document内id为check的HTML元素

• 执行时机不对：你写的获取DOM代码运行时，iframe里的/login页面还没加载完、DOM都没渲染出来，这时候调contents()拿到的是空文档，当然找不到id为check的元素。
• 控制台打印的对象是引用值，你后来在控制台里点开看到的完整iframe文档，是页面加载完之后的状态，不是你那行find代码跑的时候的状态，属于控制台的显示特性给的误导。
• 你这里iframe用的是相对路径/login，和父页面同域，不存在跨域拦截的问题，不用考虑跨域配置。

给iframe绑定load事件，等iframe内部页面完全加载好之后，再去查里面的元素就行，把test.blade.php里的脚本改成下面这样：

const iframe = $("#iframe");
// 等iframe加载完成再执行内部DOM操作
iframe.on('load', function() {
    const checkEl = iframe.contents().find("#check");
    console.log(checkEl.html());
    // 所有要操作iframe内部元素的逻辑，都要写在这个回调里
})

原生JS写法参考：

const iframe = document.getElementById('iframe');
iframe.addEventListener('load', function() {
    const checkEl = iframe.contentDocument.getElementById('check');
    console.log(checkEl.innerHTML);
})

注意：只有父页面和iframe页面符合同源策略（协议、域名、端口完全一致）时，才能直接用上面的方法访问内部DOM。如果是跨域场景，浏览器会做安全拦截，得用postMessage做跨文档通信才能交互，你当前的场景不存在这个问题。

内容的提问来源于stack exchange，提问作者NgDat