手把手教你JS实现iframe跨域那些事

有志者，事竟成！如果你在学习文章，那么本文《手把手教你用JS玩转iframe跨域操作》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

控制iframe内容主要通过JavaScript操作其DOM或使用postMessage实现跨域通信。1. 同域下，通过getElementById获取iframe并操作其DOM元素、样式和脚本；2. 跨域时，必须使用postMessage方法进行安全通信，同时验证event.origin和指定目标域；3. 动态调整iframe高度可通过contentWindow.scrollHeight（同域）或postMessage传递高度值（跨域）实现；4. 数据共享方面，Cookie可在同顶级域名下设置domain共享，而跨域推荐使用postMessage传输数据；5. 加载优化包括延迟加载、使用loading="lazy"、优化内容资源、使用占位符及避免嵌套iframe；6. 安全防范主要包括限制iframe来源、启用CSP防止XSS，以及设置X-Frame-Options或JavaScript检测以防御点击劫持。

iframe，这玩意儿，用起来是真方便，但控制起来也真是让人头疼。特别是涉及到跨域，那简直就是一场噩梦。简单来说，控制iframe内容，就是用JavaScript来操作iframe里的HTML元素、样式和脚本。

解决方案

首先，最基本的操作，就是获取iframe的DOM。假设你的iframe的id是myIframe，那么：

const iframe = document.getElementById('myIframe');
const iframeDocument = iframe.contentDocument || iframe.contentWindow.document; // 兼容写法

拿到iframeDocument，你就可以像操作普通网页的DOM一样操作iframe里的内容了。比如，修改iframe里一个id为myElement的div的文本：

const element = iframeDocument.getElementById('myElement');
if (element) {
  element.textContent = 'Hello from parent!';
}

但是，如果iframe和你的网页不在同一个域，事情就变得复杂了。浏览器出于安全考虑，会阻止跨域的JavaScript访问。

跨域控制？postMessage才是王道！

跨域通信，postMessage是唯一靠谱的选择。它的原理是，父窗口和iframe通过发送和接收消息来进行通信。

父窗口向iframe发送消息：

const iframe = document.getElementById('myIframe');
const message = { action: 'updateText', text: 'New text from parent' };
iframe.contentWindow.postMessage(message, 'http://iframe-domain.com'); // 第二个参数是目标域

iframe监听消息：

window.addEventListener('message', function(event) {
  if (event.origin !== 'http://parent-domain.com') { // 验证消息来源
    return;
  }

  const message = event.data;
  if (message.action === 'updateText') {
    document.getElementById('myElement').textContent = message.text;
  }
}, false);

注意几个关键点：

• event.origin：一定要验证消息来源，防止恶意网站冒充。
• postMessage的第二个参数：目标域，告诉浏览器消息要发给哪个域的iframe。
• 消息内容：event.data，可以是任何JavaScript对象。

如何动态调整iframe的高度以适应内容？

这确实是个常见需求。如果iframe和父页面同域，那就简单了：

function adjustIframeHeight() {
  const iframe = document.getElementById('myIframe');
  iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
}

// 在iframe内容加载完成后调用
iframe.onload = adjustIframeHeight;

但跨域情况下，就得用postMessage了。iframe将自己的高度发送给父页面，父页面再设置iframe的高度。

iframe：

function sendHeightToParent() {
  window.parent.postMessage({ action: 'setHeight', height: document.body.scrollHeight }, 'http://parent-domain.com');
}

window.onload = sendHeightToParent; // 初始加载时发送
// 监听内容变化，动态发送
// 比如用MutationObserver监听DOM变化

父页面：

window.addEventListener('message', function(event) {
  if (event.origin !== 'http://iframe-domain.com') {
    return;
  }

  if (event.data.action === 'setHeight') {
    document.getElementById('myIframe').style.height = event.data.height + 'px';
  }
}, false);

iframe与父页面之间如何共享数据？Cookie？LocalStorage？

Cookie，如果父页面和iframe的顶级域名相同，可以设置domain属性来共享。但跨顶级域名就没戏了。

LocalStorage，理论上可以，但需要配合postMessage。iframe把数据存到LocalStorage，然后通知父页面，父页面再从LocalStorage读取。这过程比较麻烦。

更好的方法是，直接通过postMessage传递数据。

父页面请求数据：

iframe.contentWindow.postMessage({ action: 'getData' }, 'http://iframe-domain.com');

iframe返回数据：

window.addEventListener('message', function(event) {
  if (event.data.action === 'getData') {
    const data = { name: 'John', age: 30 };
    window.parent.postMessage({ action: 'returnData', data: data }, 'http://parent-domain.com');
  }
});

父页面接收数据：

window.addEventListener('message', function(event) {
  if (event.data.action === 'returnData') {
    const data = event.data.data;
    console.log(data); // { name: 'John', age: 30 }
  }
});

如何解决iframe加载缓慢的问题？

iframe加载慢，主要原因有几个：网络、iframe内容复杂、浏览器渲染。

• 延迟加载iframe：不要一开始就加载iframe，等到页面加载完成后再加载。可以用JavaScript控制，或者使用loading="lazy"属性（现代浏览器支持）。
• 优化iframe内容：优化iframe里的HTML、CSS、JavaScript，减少资源大小，使用CDN加速。
• 使用占位符：在iframe加载完成前，先显示一个占位符，提高用户体验。
• 避免嵌套iframe：嵌套iframe会增加加载时间和复杂度。

iframe的安全性问题有哪些？如何防范？

iframe的安全性问题主要集中在跨站脚本攻击（XSS）和点击劫持。

• XSS：如果iframe加载了不可信的第三方内容，可能会被注入恶意脚本。
  • 防范：严格审查iframe加载的URL，只加载可信的来源。使用CSP（Content Security Policy）限制iframe的权限。
• 点击劫持：攻击者将你的网站嵌入到iframe中，然后通过CSS覆盖，诱导用户点击。
  • 防范：设置HTTP响应头X-Frame-Options为DENY或SAMEORIGIN，阻止网站被嵌入到iframe中。或者使用JavaScript检测是否在iframe中，如果是，则跳转到顶级窗口。

if (window.self !== window.top) {
  window.top.location.href = window.self.location.href;
}

好了，本文到此结束，带大家了解了《手把手教你JS实现iframe跨域那些事》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！