iframe标签常见问题和解决方法（持续更新）

1. 跨域问题

问题描述：当尝试从父页面访问或操作<iframe>中的内容时，如果<iframe>加载的页面与父页面不同源，则会遇到跨域安全限制。

解决方法：

• 后端代理：通过服务器端设置代理，请求目标网页内容，然后将内容返回给前端，实现跨域访问。

• CORS：如果你控制了被嵌入页面的服务器，可以通过设置CORS（跨源资源共享）策略来允许特定的跨域请求。

• Window.postMessage：使用window.postMessage方法进行跨域通信。这是一种安全的方式来实现跨源通信。

2. 样式调整问题

问题描述：调整<iframe>的大小和样式以适应不同的布局需求。

解决方法：

• 直接在<iframe>标签上使用width和height属性或者CSS来调整尺寸。

• 使用CSS来控制<iframe>的边框、背景等样式属性。

• 为<iframe>设置scrolling="no"属性或者用CSS的overflow: hidden;来隐藏滚动条。

3. 性能问题

问题描述：<iframe>可能会增加页面的加载时间，特别是当嵌入多个<iframe>或内容较重的页面时。

解决方法：

• 懒加载：只有当用户滚动到<iframe>的可视区域时，再加载<iframe>内容。

• 预加载：使用loading="lazy"属性（部分浏览器支持）来延迟加载非关键<iframe>。

• 优化被嵌入页面的加载速度，减少资源文件的大小。

4. SEO问题

问题描述：搜索引擎可能不会抓取或索引<iframe>中的内容，这可能影响父页面的SEO表现。

解决方法：

• 尽量避免在对SEO敏感的页面中使用<iframe>来嵌入关键内容。

• 如果必须使用，考虑提供<iframe>内容的替代访问方式，例如在父页面提供链接到<iframe>内容的直接链接。

5. 安全问题

问题描述：<iframe>可能会被用于点击劫持攻击。

解决方法：

• 使用X-Frame-Options响应头来控制你的网页是否允许在<iframe>中显示。

• 对于敏感操作，实施额外的验证措施，如验证码或二次确认。

6. <iframe>与父页面的通信问题

问题描述：在<iframe>与父页面之间进行数据传递或调用函数时遇到困难。

解决方法：

• 使用window.postMessage进行安全的跨域通信。

• 如果是同源的情况，可以直接通过JavaScript访问<iframe>的contentWindow属性来调用其内部的方法，或者修改其文档的内容。

7.使用 iframe出现了缓存，导致页面不会刷新

游览器进入直接刷新ifram 标签：

//  进入事件
    window.onload = function () {
         onloadIfram()
    }
     // 刷新ifram
     function onloadIfram() {
         document.getElementById('#activity').contentWindow.location.reload();
}.