当前位置：首页 > article >正文

＜iframe＞标签和定时调用函数setInterval

article 2026/5/14 8:38:16

iframe 标签和定时调用函数 setInterval

问题描述：
解决方法：

问题描述：

今天遇到一个前端问题，在浏览器页面上传Excel文件后，然后点击导入按钮，经后端Java类读取文件内容校验后，将校验结果返回给前端，要求整个校验过程中，整个界面禁止跳转，校验结果以弹框形式展示，然后用户根据校验结果，选择【确定】或【取消】决定是否真正导入该 Excel 文件数据；

项目中导入文件时使用的 form.submit(); 方法，form 表单属性enctype="multipart/form-data"，通过这种方式将 内置的参数 传入到后端，后端根据这些参数来解析Excel文件获取数据来校验，因为项目框架限制，无法使用 FormData 工具、Promise、传统Ajax方式…（要不无法使用，可以使用的无法将解析 Excel 文件的关键内置参数传入后端）

界面参考：
在这里插入图片描述

test.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head><title>文件上传界面</title><style>body {font-family: Arial, sans-serif;background-color: #f4f4f4; /* 背景颜色 */margin: 0;padding: 0;display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */height: 100vh; /* 全屏高度 */}.container {background-color: white; /* 内容区域背景色 */padding: 30px; /* 上下内边距，增加容器高度 */border-radius: 10px; /* 圆角 */box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */text-align: center; /* 文字居中 */width: 80%; /* 宽度 */max-width: 600px; /* 最大宽度 */min-height: 300px; /* 最小高度，容器高度增加 */}h1 {color: #333; /* 标题颜色 */margin-bottom: 20px; /* 标题底部留白 */}p {color: #666; /* 文字颜色 */margin-bottom: 20px; /* 段落底部留白 */}.file-upload {display: flex; /* 使用 flexbox 放置文件选择、文件名框和上传按钮 */align-items: center; /* 垂直居中 */justify-content: flex-start; /* 左对齐 */gap: 10px; /* 之间留白 */}.file-upload input[type="file"] {flex: 1; /* 文件选择框占据剩余空间 */display: none; /* 隐藏文件选择框 */}.file-upload .file-name {width: 100%; /* 文件名框占满空间 */padding: 10px;border: 1px solid #ccc; /* 边框 */border-radius: 5px; /* 圆角 */text-align: left; /* 文件名显示在左侧 */background-color: #f9f9f9; /* 背景颜色 */height: 40px; /* 高度统一 */}.choose-file-btn,.upload-btn {padding: 10px 20px; /* 按钮内边距 */border: none; /* 无边框 */border-radius: 5px; /* 圆角 */cursor: pointer; /* 鼠标指针样式 */height: 40px; /* 高度一致 */white-space: nowrap; /* 防止文字换行 */}.choose-file-btn {background-color: #007bff; /* 选择文件按钮的蓝色 */color: white; /* 按钮文字颜色 */}.choose-file-btn:hover {background-color: #0056b3; /* 蓝色按钮悬停效果 */}.upload-btn {background-color: #28a745; /* 上传按钮的绿色 */color: white; /* 按钮文字颜色 */}.upload-btn:hover {background-color: #218838; /* 绿色按钮悬停效果 */}</style>
</head>
<body>
<div class="container"><h1>欢迎来到文件导入界面</h1><p>请在下面上传您的文件。</p><form id="myForm" action="upload" method="post" enctype="multipart/form-data"><div class="file-upload"><input type="text" id="fileName" class="file-name" placeholder="请选择文件..." readonly><input type="file" name="file" id="fileInput" required onchange="updateFileName()"><button type="button" class="choose-file-btn" onclick="document.getElementById('fileInput').click();">选择文件</button><input type="submit" class="upload-btn" value="导入"></div></form><iframe name="upload_target" style="display:none;"></iframe>
</div><script>// 显示选择的文件名function updateFileName() {let fileInput = document.getElementById('fileInput');let fileNameField = document.getElementById('fileName');if (fileInput.files.length > 0) {fileNameField.value = fileInput.files[0].name;}}</script>
</body>
</html>

解决方法：

要求整个校验过程中，整个界面禁止跳转这一过程可以通过 <iframe>标签来实现；
获取校验结果可以通过定时调用函数setInterval来实现。（因为异步提交表单导致获取校验结果的代码总是先结果返回之前执行，一直获取空，所以才采用定时调用函数setInterval来实现）

IFRAME是HTML标签，作用是文档中的文档，或者浮动的框架(FRAME)。iframe元素会创建包含另外一个文档的内联框架（即行内框架）

setInterval 是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。

由setInterval返回的ID值可用作clearInterval方法的参数。

示例代码：

function doImport() {let form = document.forms["myForm"];//获取name属性值为"myForm"的表单对象let ckUrl = 'XXXXXXX';//校验地址// 设置表单的目标属性为 'upload_target'，即指定表单提交后显示的iframeform.setAttribute('target', 'upload_target');form.action = ckUrl; // 设置表单提交的URL地址form.submit();// 提交表单// 启动一个定时器，每200毫秒检查一次iframe内容const start = setInterval(function () {let ifm = document.getElementById('ifm'); // 获取iframe元素let ifDoc = ifm.contentDocument || ifm.contentWindow.document;// 获取iframe内部的文档对象let ifContent = ifDoc.body.innerHTML; // 获取iframe文档中的HTML内容// 判断iframe中的内容是否为空，如果不为空则执行以下操作if (ifContent !== '') {doStopGoal(); // 停止定时器let returnData = eval('(' + ifContent + ')');// 解析iframe中的内容let ckInfo = returnData.ckInfo;// 获取返回的数据中的ckInfo字段值if (ckInfo === 'ok') {//校验通过，调用导入函数importConfirm();} else {//逻辑代码...}}}, 200);  // 每200毫秒执行一次// 停止定时器function doStopGoal() {clearInterval(start);}
}// 校验成功后，真正导入数据
function importConfirm() {let importUrl = 'YYYYYY';  // 导入地址let form = document.forms["myForm"];form.removeAttribute("target");// 移除表单的target属性form.action = importUrl;form.submit();
}

在这里插入图片描述

＜iframe＞标签和定时调用函数setInterval

iframe 标签和定时调用函数 setInterval

问题描述：

解决方法：

相关文章：

＜iframe＞标签和定时调用函数setInterval

MYSQL学习笔记(六)：聚合函数、sql语句执行原理简要分析

Qt——界面优化

MySQL 数据库常见字段类型大全及详细解析

MATLAB 工具库的使用说明和案例示例

对于Docker的初步了解

java基础学习——jdbc基础知识详细介绍

第20篇：Python 开发进阶：使用Django进行Web开发详解

CukeTest使用 | 1 CukeTest是什么？如何下载安装？

An OpenGL Toolbox

R语言学习笔记之高效数据操作

构造函数及实例化的过程：实例成员

Linux的权限和一些shell原理

LearnOpenGL——光照

落地 ORB角点检测与sift检测

步入响应式编程篇（二）之Reactor API

利用Redis实现数据缓存

如何使用 pytest-html 创建自定义 HTML 测试报告

服务器中的流量主要是指什么？

飞牛NAS安装过程中的docker源问题

【动态规划】--- 斐波那契数模型

php-phar打包避坑指南2025

ChirpIoT技术的优势以及局限性

java提取系统应用的日志中的sql获取表之间的关系

PyQt6医疗多模态大语言模型（MLLM）实用系统框架构建初探（下.代码部分）

IMX6ull项目环境配置

Linux(Centos 7.6)命令详解：wc

Gradle buildSrc模块详解：集中管理构建逻辑的利器

六、深入了解DI

基于RAG构建Text2SQL的实战教程