Django模板嵌入iframe后如何处理iframe保存请求无需重复上传图片

前提说明 #

你嵌入的是第三方站点iframe，实现需求的核心限制是该站点是否支持跨域通信/公开导出能力，以下是两种可行方案： #

方案1：第三方站点支持postMessage通信（首选，性能最优） #

如果该战术站点支持监听导出请求、并通过postMessage返回生成的图片base64，可按以下步骤实现：

步骤1：修改模板iframe标签，增加id便于调用 #

<iframe id="tactic_iframe" src="https://ft-graphics.fussballtraining.com/" width="100%" height="100%" style="border: none">
</iframe>

步骤2：模板新增JS逻辑，处理跨域消息 #

在模板底部新增以下JS代码，实现和iframe的通信：

// 监听iframe返回的导出结果
window.addEventListener('message', (e) => {
  // 校验消息来源，避免安全风险
  if (e.origin !== 'https://ft-graphics.fussballtraining.com') return
  // 假设站点导出成功后返回type为tactic_export的消息，payload为图片base64
  if (e.data.type === 'tactic_export') {
    // 新增隐藏字段存储base64数据
    const base64Input = document.createElement('input')
    base64Input.type = 'hidden'
    base64Input.name = 'tactic_image_base64'
    base64Input.value = e.data.payload
    document.querySelector('form').appendChild(base64Input)
    // 自动提交表单
    document.querySelector('form').submit()
  }
})

// 绑定保存按钮点击事件，主动请求iframe导出图片
document.querySelector('form input[type="submit"]').addEventListener('click', (e) => {
  e.preventDefault()
  // 给iframe发导出请求
  document.getElementById('tactic_iframe').contentWindow.postMessage({
    type: 'request_tactic_export'
  }, 'https://ft-graphics.fussballtraining.com')
})

步骤3：后端处理base64转存为ImageField #

在对应save视图中增加base64转文件逻辑，示例代码如下：

import base64
from django.core.files.base import ContentFile
from django.shortcuts import redirect
from .models import TacticModel # 替换为你自己的模型名

def save(request):
    if request.method == "POST":
        # 解析base64数据
        img_base64 = request.POST.get("tactic_image_base64")
        if not img_base64:
            request.session["error"] = "未获取到战术图数据"
            return redirect("your_page_url") # 替换为你的页面路由名
        # 去除base64头信息
        header, img_content = img_base64.split(";base64,")
        img_ext = header.split("/")[-1]
        # 生成图片文件
        img_file = ContentFile(
            base64.b64decode(img_content),
            name=f"tactic_{request.POST.get('created_at')}.{img_ext}"
        )
        # 存入模型
        TacticModel.objects.create(
            comment=request.POST.get("comment"),
            created_by=request.POST.get("created_by"),
            created_at=request.POST.get("created_at"),
            image=img_file
        )
        return redirect("your_success_url") # 替换为成功页路由

方案2：第三方站点不支持跨域通信 #

如果无法和iframe做前端交互，可采用后端截图方案：

• 使用Playwright/Selenium等无头浏览器工具，在后端模拟用户操作生成战术图后截图
• 若该站点有公开的生成战术图API，可直接调用接口获取图片资源后存到ImageField

注意事项 #

• 你的模板存在笔误：{% if request.sessios.error %} 应为 {% if request.session.error %}，请修正避免报错
• 请提前确认第三方站点的使用条款，确认是否允许抓取、存储其生成的内容
• 跨域限制是浏览器原生安全策略，没有第三方站点的配合无法从前端直接读取iframe内的任何内容

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