如何在JavaScript中实现iframe内文件的下载功能

问题核心原因 #

1. 跨域限制：主站与聊天网站（chat.com）分属不同域名，浏览器同源策略会阻止主页面直接操作iframe内的DOM元素，也无法拦截iframe内的点击事件。
2. download属性的同源限制：该属性仅对同源资源生效，跨域URL会被浏览器忽略此属性，直接在新标签页打开文件。
3. 原iframe内的链接虽设置了target="_blank"，但服务器返回PDF时未添加触发下载的响应头，浏览器默认会渲染PDF而非启动下载。

可行解决方案 #

方案1：修改聊天网站的服务器响应头（最优）

让聊天网站的服务器在返回PDF文件时，添加Content-Disposition响应头：

Content-Disposition: attachment; filename="YN_Hotel_F07-010-F6F9.pdf"

此方式无需前端额外处理，无论用户在哪点击链接，浏览器都会直接触发下载。

方案2：主站搭建代理接口转发文件

若无法修改聊天网站的服务器，可在主站后端搭建代理接口，请求聊天网站的PDF文件后，在返回给用户时添加Content-Disposition头。

示例后端逻辑（Node.js/Express）：

const express = require('express');
const axios = require('axios');
const app = express();

app.get('/proxy-pdf', async (req, res) => {
  const fileUrl = req.query.url;
  try {
    const response = await axios.get(fileUrl, { responseType: 'stream' });
    // 添加下载响应头
    res.setHeader('Content-Disposition', `attachment; filename="YN_Hotel_F07-010-F6F9.pdf"`);
    res.setHeader('Content-Type', response.headers['content-type']);
    // 转发文件流
    response.data.pipe(res);
  } catch (err) {
    res.status(500).send('下载失败');
  }
});

app.listen(3000);

前端修改下载函数，指向代理接口：

function onClickFileDownload(link) {
  const proxyUrl = `/proxy-pdf?url=${encodeURIComponent(link)}`;
  const anchor = document.createElement('a');
  anchor.href = proxyUrl;
  anchor.download = 'YN_Hotel_F07-010-F6F9.pdf';
  document.body.appendChild(anchor);
  anchor.click();
  document.body.removeChild(anchor);
}

方案3：拦截iframe跳转请求（需跨域授权）

若聊天网站设置了Access-Control-Allow-Origin允许跨域通信，可监听iframe的跳转事件，判断目标为PDF时在主页面触发下载：

const iframe = document.getElementById('chat-iframe');
iframe.addEventListener('beforeunload', (e) => {
  const targetUrl = iframe.contentWindow.location.href;
  if (targetUrl.endsWith('.pdf')) {
    e.preventDefault();
    onClickFileDownload(targetUrl);
  }
});

注意：此方案依赖聊天网站的跨域授权，否则会被同源策略拦截。

内容的提问来源于stack exchange，提问作者klp