专栏名称: 奇舞精选
《奇舞精选》是由奇舞团维护的前端技术公众号。除周五外,每天向大家推荐一篇前端相关技术文章,每周五向大家推送汇总周刊内容。
目录
相关文章推荐
程序员鱼皮  ·  教程老了,被吐槽了! ·  18 小时前  
前端早读课  ·  【早阅】Better:一款AI代码审查工具 ·  昨天  
前端大全  ·  图解Nestjs - 适合中国宝宝的入门指导 ·  3 天前  
前端大全  ·  大家都该学学的埋点概念与使用 ·  5 天前  
前端早读课  ·  【早阅】浏览器中的"隐藏"紫色:rebecc ... ·  4 天前  
51好读  ›  专栏  ›  奇舞精选

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

奇舞精选  · 公众号  · 前端  · 2024-11-07 18:00

正文

点击关注公众号,“技术干货” 及时达!

前言

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

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

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

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

「完整实现代码如下所示」






iframe基于内容动态宽高

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

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

「子窗口(被嵌入页面)代码」


「父窗口代码」





「注意:」

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

iframe嵌入页面免登录处理

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

http无法嵌入https

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

「解决思路:」 网上五花八门的方法,但其实真正靠谱的就两种,(1)将 HTTP 转换成 HTTPS  (2)使用代理服务。

方法一:将 HTTP 转换成 HTTPS(推荐)

1、获取 SSL 证书并安装

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

2、配置服务器(这里以nginx为例)

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

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取消监听这两个细节。




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




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; # 替换为你的域名

# 代理 iframe 请求并添加 CORS 头部
location /iframe-proxy/ {
# 添加CORS头部
add_header Access-Control-Allow-Origin *;

# 其他配置...
}
}
}

4、nginx配置代理

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

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

http {

server {
listen 80;
server_name yourdomain.com; # 替换为你的域名

# 代理 iframe 请求并添加 CORS 头部
location /iframe-proxy/ {
# 将请求代理到目标
proxy_pass http://tty.com/;

# 其他配置...
}
}
}

iframe嵌入后报拒绝连接请求

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

小结

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

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

点击关注公众号,“技术干货” 及时达!