当前位置： 正文

用iframe必定遇到过这六种“坑”之一（以vue为示例）

2024-09-29 IT技术 27

前言

如果你是做web前端，那么不可避免早晚都会用到iframe的。其实博主很久前用过，但最近又要有项目用了，由于年代久远对iframe的注意事项都有点忘记了，然后想着总结一下比较需要注意的几个重点事项，除了便于高效工作还能分享给有需要用到iframe的小伙伴。

一、iframe基于父窗口大小自适应宽高

简述： 这是iframe最常见的需求了，有时候我们用iframe嵌入一个页面时，不想固定宽高想跟随父系统屏幕大小动态变化，从而大大提高适配性。

实现思路： iframe标签绑定:style 来动态设置宽高，监听父窗口宽高变化时动态获取并且绑定到:style，但监听变化需要考虑到初始化和窗口缩放的情况，并且记得移除事件监听器防止内存泄漏。

完整实现代码如下所示

<template>
  <div class="box" @resize="iframeResize">
    <iframe :src="iframeSrc" :style="{ width: '100%', height: frameHeight + 'px' }" ref="myRef">iframe>
  div>
template>

<script setup>
import { onMounted, onUnmounted, ref, watchEffect } from 'vue';

const myRef = ref(null);
const iframeSrc = 'https:******.com';
const frameHeight = ref(0);


function initHeight() {
  if (myRef.value) {
    frameHeight.value = window.innerHeight;
  }
}


function iframeResize() {
  initHeight();
}


onUnmounted(() => {
  window.removeEventListener('resize', iframeResize);
});


onMounted(() => {
  initHeight();
  window.addEventListener('resize', iframeResize);
});



watchEffect(() => {
  if (myRef.value) {
    initHeight();
  }
});
script>

<style scoped>
.box {
  position: relative;
  width: 100%;
  height: 100vh;
}
style>

二、iframe基于内容动态宽高

简述： 例如我们业务需求嵌入的是一个表格而不是一个页面，并且表格高度并不确定时我们不能固定iframe的高度，否则只有一条内容或者没有内容的时候会不好看，这里要根据内容的数量去决定ifram嵌入窗口的高度。

实现思路： 思路是子窗口通信告诉父窗口具体高度，然后父窗口再动态设置高度即可。具体实现是子窗口利用window.postMessage 来发送具体高度，然后父窗口用window.addEventListener('message', 方法)接收内容，从而根据接收到的内容动态调整iframe的高度。

子窗口（被嵌入页面）代码

<script setup>
    window.onload = function() {
        let height = '想要告诉父窗口的高度'
        if (window.parent && window.parent.postMessage) {
            window.parent.postMessage({height: height}, '*');
        }
    };
script>

父窗口代码

<template>
  <div>
    <iframe :src="iframeSrc" ref="myRef">iframe>
  div>
template>

<script setup>
import { onMounted, ref } from 'vue';

const iframeSrc = 'https:******.com';
const myRef = ref(null);

onMounted(() => {
  window.addEventListener('message', iframeMessage);
});

const iframeMessage = (event) => {
  
  if (event.origin !== 'https:******.com') return;

  const newHeight = event.data.height;
  if (newHeight && myRef.value) {
    myRef.value.style.height = `${newHeight}px`;
  }
};
script>

注意： if (event.origin !== 'https:******.com') return 这行代码记得加上。

三、iframe嵌入页面免登录处理

这个小弟有单独写过相关详细文章，并且分析了几种情况的处理方式，移步：iframe嵌入页面实现免登录

四、http无法嵌入https

简述： 例如开发环境是HTTP，嵌入的环境是生产环境的HTTPS，这时就会发现这个问题了。其实是现代浏览器的安全机制，会认为是跨域不同源而禁止。因为HTTP协议传输的数据未加密的会有安全风险。

解决思路： 网上五花八门的方法，但其实真正靠谱的就两种，（1）将 HTTP 转换成 HTTPS （2）使用代理服务。

方法一：将 HTTP 转换成 HTTPS（推荐）

1、获取 SSL 证书并安装

方法不止一种，这里就细说啦。

2、配置服务器（这里以nginx为例）

下面我把核心部分解释放在注释说明，这是简单版本用于说明HTTP转HTTPS，如果真的上生产其实还有不少其它配置。

server {
  listen 80;   // 监听http默认的80端口
  return 301 https://$host$request_uri; // 把所有http永久重定向到https
  server_name ****.com www.****.com;  // 指定域名,这里视真实情况而定
}

server {
  listen 443 ssl; // 监听https默认的443端口。
  server_name ****.com www.****.com;  // 指定域名,这里视真实情况而定
  
  // 指定 SSL 证书文件路径。
  ssl_certificate /etc/lets/live/****.com/fullchain.pem;
  
  // 指定 SSL 私钥文件路径
  ssl_certificate_key /etc/lets/live/****.com/privkey.pem;

  location / {
      index index.html index.htm;
      root /var/w/html;
  }
}

方法二：使用代理服务

用nodejs搭建个简单的代理服务器（这里是用nodejs举例，真实业务场景可能是后端那边搞）

要先安装对应的依赖，例如

npm init -y
npm install express http-proxy

然后再配置对应的代理服务器，主要核心是下面四个模块

  • express：作用是构建 Web 应用。
  • http：作用是处理 HTTP 请求。
  • https：作用是处理 HTTPS 请求。
  • httpProxy：作用是创建代理服务器。
const express = require('express')
const fs = require('fs')
const https = require('https')
const http = require('http')
const httpProxy = require('http-proxy')

const app = express()
const proxy = httpProxy.createProxyServer()
const port = 3000

// 读取对应的SSL证书文件
const options = {
  key: fs.readFileSync('/etc/lets/live/proxy.****.com/privkey.pem'),
  cert: fs.readFileSync('/etc/lets/live/proxy.****.com/fullchain.pem')
}

// 设置路由信息
app.all('/proxy/*', (req, res) => {
  const targetUrl = `http://${req.params[0]}`
  proxy.web(req, res, { target: targetUrl }, (error) => {
    res.status(500).send('Proxy request failed')
  })
})

// 创建HTTPS服务器
const server = https.createServer(options, app)

// 启动代理服务器
server.listen(port, () => {
  console.log(`HTTPS`)
})

五、跨域问题

简述： iframe 页面的跨域问题是因为涉及到浏览器的安全策略，即同源策略。同源策略限制了一个网页脚本不能读写不同源页面的 DOM 与 Cookie之类的信息。即如果 iframe 中的内容与包含它的页面不在同一个源上，那么这两个页面之间会受到跨域限制。

解决思路：

1、使用 window.postMessage 实现跨域通信

父页面代码： 主要用window.addEventListener监听消息用postMessage发送消息。

注意： @load加载完成后再监听和window.removeEventListener取消监听这两个细节。

<template>
  <div>
    <iframe :src="iframeSrc" ref="iframeRef" @load="onIframeLoad" style="width: 100%; height: 400px;">iframe>
    <button @click="sendMessage">发送消息button>
  div>
template>

<script setup>
import { ref, onMounted } from 'vue';

onMounted(() => {
  window.addEventListener('message', handleMessage);
  
  return () => {
    window.removeEventListener('message', handleMessage);
  };
});

const iframeSrc = 'http://***.com';
const iframeRef = ref(null);

  
const onIframeLoad = () => {
  window.addEventListener('message', handleMessage);
};

const sendMessage = () => {
  const iframe = iframeRef.value;
  if (iframe.contentWindow) {
    iframe.contentWindow.postMessage('Hello!', 'http://***.com');
  }
};

const handleMessage = (event) => {
  
  if (event.origin !== 'http://***.com') return;
  console.log( event.data);
};
script>

子页面代码：和父页面一样，用window.addEventListener监听消息用postMessage发送消息。

<template>
  <div>
    <button @click="sendMessage">发送消息到父页面button>
  div>
template>

<script setup>
import { ref, onMounted } from 'vue';
onMounted(() => {
  window.addEventListener('message', handleMessage);

  
  return () => {
    window.removeEventListener('message', handleMessage);
  };
});
const sendMessage = () => {
  const parentWindow = window.parent;
  if (parentWindow) {
    parentWindow.postMessage('Hello!', 'http://****.com');
  }
};

const handleMessage = (event) => {
  if (event.origin !== 'http://****.com') return;
  console.log(event.data);
};

script>
2、使用 document.domain

document.domain用于解决二级域名之间跨域问题的方法，例如：a.tty.com 和 b.tty.com，它们都属于同一个顶级域名 tty.com，这时就适合用document.domain来让这两个页面能够相互访问。用法相当于简单，就是分别设置两个页面的document.domain。

核心代码在第10与19行。
3、使用 CORS

这里主要是后端的配置了，通过调整服务器响应头中的 Access-Control-Allow-Origin 来控制哪些源是可以安全访问资源。

以为nginx为例，*设置为所有。

http {

  server {
      listen 80
      server_name yourdomain.com

      
      location /iframe-proxy/ {
          
          add_header Access-Control-Allow-Origin *

          
      }
  }
}
4、nginx配置代理

算是常见解决方案了，思路是通过 Nginx 反向代理，将请求重定向到想要请求的目标服务器。

核心就是第10行代码，具体可以特意去看看nginx。

http {

  server {
      listen 80;
      server_name yourdomain.com;  

      
      location /iframe-proxy/ {
          
          proxy_pass http://tty.com/;  

          
      }
  }
}

六、iframe嵌入后报拒绝连接请求

不知道你用iframe有没有见过这个页面，这通常是目标页面设置了 X-Frame-Options 响应头来限制内容被嵌入到其他站点的 iframe 中。这个可以找后端看看 X-Frame-Options 。
image.png

小结

都是把遇到的场景总结了一下，感觉都是比较常见的情况。

如果大佬们有什么iframe的“坑”也可以分享一下我同步学习一下，还有那里写的不好也可以指出更正鸭

阅读全文
下载说明：
1、本站所有资源均从互联网上收集整理而来，仅供学习交流之用，因此不包含技术服务请大家谅解！
2、本站不提供任何实质性的付费和支付资源，所有需要积分下载的资源均为网站运营赞助费用或者线下劳务费用！
3、本站所有资源仅用于学习及研究使用，您必须在下载后的24小时内删除所下载资源，切勿用于商业用途，否则由此引发的法律纠纷及连带责任本站和发布者概不承担！
4、本站站内提供的所有可下载资源，本站保证未做任何负面改动（不包含修复bug和完善功能等正面优化或二次开发），但本站不保证资源的准确性、安全性和完整性，用户下载后自行斟酌，我们以交流学习为目的，并不是所有的源码都100%无错或无bug！如有链接无法下载、失效或广告，请联系客服处理！
5、本站资源除标明原创外均来自网络整理，版权归原作者或本站特约原创作者所有，如侵犯到您的合法权益，请立即告知本站，本站将及时予与删除并致以最深的歉意！
6、如果您也有好的资源或教程，您可以投稿发布，成功分享后有站币奖励和额外收入！
7、如果您喜欢该资源，请支持官方正版资源，以得到更好的正版服务！
8、请您认真阅读上述内容，注册本站用户或下载本站资源即您同意上述内容！
原文链接：https://www.shuli.cc/?p=20192，转载请注明出处。
赏 0

猜你喜欢

4周前 360

2024-10-14 167

2024-10-14 107

2024-10-14 68

2024-10-14 67

2024-10-13 76

评论0

取消

首页 发现 VIP 我的
显示验证码
没有账号？注册  忘记密码？