如何用JS或jQuery访问iFrame内元素？多次尝试失败求助

核心原因：跨域同源策略限制 #

你的主页面和iframe指向的https://cs3.bluenest.it/Website/test.html属于不同域名（假设主页面运行在本地或其他域名下），浏览器的同源策略会禁止主页面JavaScript访问不同源iframe的DOM内容，这是所有尝试失败的根本原因。

同源策略要求两个页面的协议、域名、端口完全一致，才允许互相访问DOM。两者域名不一致时，浏览器会直接阻止这类操作，导致你获取到的元素为null或undefined。

同源场景下的正确写法（主页面与iframe同源时） #

如果主页面和iframe属于同源，问题出在未等待iframe加载完成就访问内容，同时部分代码存在语法错误，以下是修正后的可行方案：

原生JavaScript写法 #

const frame = document.getElementById("frame");
// 等待iframe加载完成后执行操作
frame.addEventListener('load', function() {
  const element = this.contentWindow.document.getElementById('text');
  // DOM元素使用innerHTML，html()是jQuery专属方法
  console.log("content of #text: " + element.innerHTML);
});

jQuery写法 #

$("#frame").on('load', function() {
  const element = $(this).contents().find("#text");
  console.log("content of #text: " + element.html());
});

跨域场景的替代方案 #

如果确实是跨域场景，无法直接通过主页面脚本访问iframe内容，可采用以下方案：

• 将主页面与iframe部署到同一域名：满足同源策略要求后即可直接访问。
• 使用postMessage跨域通信：让iframe主动发送内容到主页面，主页面监听接收数据。
  • iframe页面（test.html）添加脚本：

    window.addEventListener('load', function() {
      const textContent = document.getElementById('text').innerHTML;
      // 发送消息到主页面，生产环境建议指定具体域名而非*
      window.parent.postMessage(textContent, '*');
    });
    

  • 主页面添加监听：

    window.addEventListener('message', function(event) {
      // 验证消息来源域名，拦截恶意消息
      if (event.origin === 'https://cs3.bluenest.it') {
        console.log("content of #text: " + event.data);
      }
    });
    

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