https的页面里面可以嵌套 http 的iframe吗

从安全的角度考虑，HTTPS 页面中嵌入 HTTP 的 iframe 是不被推荐的，因为它可能会引起安全漏洞。这是因为，HTTPS 页面是通过 SSL/TLS 协议进行加密传输的，而 HTTP 页面则没有进行加密。因此，如果你在 HTTPS 页面中嵌入 HTTP 的 iframe，那么在传输过程中，HTTP 页面中的数据可能会被篡改、窃取或者注入恶意脚本等攻击。

为了避免这种情况，建议在 HTTPS 页面中只嵌入 HTTPS 的 iframe，这样可以保证数据的完整性和安全性。如果你必须在 HTTPS 页面中嵌入 HTTP 的 iframe，那么可以考虑在 HTTP 页面中使用 HTTPS 协议来保证传输的安全。

相关问题

iframe嵌套浏览器

### 使用 `iframe` 嵌入其他网页或浏览器窗口

为了在 HTML 页面中使用 `<iframe>` 来嵌入其他网页或浏览器窗口，可以遵循最佳实践并利用 JavaScript 和 CSS 提供更好的用户体验。

#### 设置基本结构

通过定义一个简单的 HTML 结构来引入外部资源：

<iframe id="exampleIframe" src="https://www.example.com/" title="Example Website"></iframe>

此代码片段展示了如何指定要加载的目标 URL (`src`) 属性以及提供描述性的标题(`title`)以便于辅助技术识别[^1]。

#### 自动调整尺寸以适应不同屏幕大小

为了让嵌入的内容能够在各种设备上良好呈现而不会出现不必要的滚动条，可以通过CSS设置宽度为百分之百，并借助JavaScript动态计算高度从而匹配实际内容的高度:

/* 定义 iframe 的初始样式 */
#iframeContain {
    border: none;
    width: 100%;
}

// 动态调整 iframe 高度函数
function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}

document.getElementById('exampleIframe').onload = function() {resizeIframe(this);}

这段脚本会在每次 iframe 加载完成后重新评估其内部文档的实际高度，并相应地更新 iframe 的高度属性。

#### 处理跨域安全策略

由于现代浏览器的安全机制，默认情况下不允许父页面直接操作来自不同域名的子帧内的DOM元素。如果需要实现两者的交互，则需确保双方服务器都配置了适当CORS(Cross-Origin Resource Sharing)头信息允许这种行为发生；或者考虑采用 postMessage API 进行安全的消息传递[^2]。

#### 跳转至新标签页或其他上下文环境

对于某些情况可能希望点击链接时打开新的浏览会话而不是在同一 iframe 中导航，在这种情形下可运用如下方法改变默认动作：

window.parent.window.open(url, '_blank');

这将强制任何尝试从 iframe 发起的新请求都在独立的浏览器实例里完成而非影响现有布局[^4]。

自己的vue被嵌套在iframe里怎么获取自己的body

当你将Vue应用嵌套在一个`<iframe>`标签中时，由于浏览器的安全策略（同源策略），Vue直接操作`window.document.body`可能会受限。 Vue实例默认不会访问到`iframe`的DOM，因为它们属于不同的沙箱环境。

不过，你可以通过以下几种方式来间接获取`iframe`内的`body`：

1. **使用事件通信**：利用`Vue`的自定义事件机制，在`parent`页面触发一个事件，`child`页面的Vue组件接收到这个事件后再返回`document.body`。

// parent.vue (外层应用)
new Vue({
  methods: {
    getIFrameBody() {
      const iframe = document.querySelector('iframe');
      iframe.contentWindow.postMessage({ type: 'get-body' }, '*');
    }
  },
});

// child.vue (内嵌应用)
mounted() {
  window.addEventListener('message', event => {
    if (event.data.type === 'get-body') {
      this.$emit('on-body-received', document.body);
    }
  });
}

2. **使用postMessage API**：直接通过`window.postMessage`和`window.addEventListener('message')`进行跨域通信，接收`body`数据。

3. **使用MutationObserver**：如果你有对`iframe`内容区域的引用，可以使用`MutationObserver`来观察其内容变化，当`body`添加或修改时得到它。

4. **利用第三方库**：如果允许的话，可以考虑使用像`vue-communicator`这样的库，它提供了一种更简洁的方式来在Vue组件之间传递消息。

记住，在实际项目中，嵌套`iframe`可能会遇到一些性能和安全问题，因此需要谨慎处理。