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

Axure跨页面交互：利用IFrame和JS实现父子页面菜单联动

news 来源：原创 2025/7/23 17:20:12

在 Axure 中使用内联框架（IFrame）进行父子页面间的通信是一个非常有效的技巧，尤其是在需要实现复杂交互逻辑时。通过 JavaScript 直接操作 DOM 元素，可以突破 Axure 基础元件的限制，实现更灵活的页面联动。以下是对你描述的场景的进一步解析和实现建议：

实现步骤解析

1. 主页面设计

结构：主页面包含头部栏、左侧导航菜单和一个内联框架（用于加载子页面）。
交互：
- 在内联框架的“载入时”事件中，定义一个全局函数（如 changeMenuSelected），供子页面调用。
- 为左侧导航菜单的每个选项绑定点击事件，更新选中状态并加载对应的子页面。

// 主页面：内联框架的“载入时”事件
window.changeMenuSelected = function(menuId) {// 更新导航菜单的选中状态$('.menu-item').removeClass('active');$(`[data-menu-id="${menuId}"]`).addClass('active');// 加载对应的子页面（可选）$('#myIframe').attr('src', `child-${menuId}.html`);
};

2. 子页面设计

结构：子页面包含内容区域和用于触发菜单切换的按钮。
交互：
- 为按钮绑定“单击时”事件，通过 parent.window.changeMenuSelected(menuId) 调用主页面的函数。

// 子页面：按钮的“单击时”事件
parent.window.changeMenuSelected('A'); // 传递菜单ID（如 'A', 'B', 'C'）

3. 导航菜单联动

主页面的导航菜单：
- 为每个菜单项设置唯一的 data-menu-id 属性（如 data-menu-id="A"）。
- 绑定点击事件，调用 changeMenuSelected 函数并传递对应的菜单 ID。

// 主页面：导航菜单的点击事件
$('.menu-item').on('click', function() {const menuId = $(this).data('menu-id');window.changeMenuSelected(menuId);
});

关键点与注意事项

跨域限制：

如果主页面和子页面跨域（不同域名或协议），浏览器会阻止 parent.window 的直接调用。需确保两者同源，或使用 postMessage API 实现安全通信。

postMessage 示例：

// 主页面：监听子页面消息
window.addEventListener('message', function(event) {if (event.origin !== "http://子页面域名.com") return;const menuId = event.data;window.changeMenuSelected(menuId);
});// 子页面：发送消息
parent.postMessage('A', '*');

代码可维护性：
- 将公共函数（如 changeMenuSelected）集中管理，避免重复定义。
- 使用清晰的命名规范（如 data-menu-id）提高代码可读性。
Axure 原型生成后的调试：
- 在 Axure 生成的 HTML 文件中，检查 IFrame 的 id 或 class 是否与 JavaScript 代码中的选择器匹配。
- 使用浏览器开发者工具（F12）调试 JavaScript 错误。
用户体验优化：
- 在切换菜单时，可以添加过渡动画（如淡入淡出）提升视觉效果。
- 确保子页面的按钮样式与主页面导航菜单一致，避免用户混淆。

完整示例代码

主页面 (index.html)

<!DOCTYPE html>
<html>
<head><title>主页面</title><style>.menu-item { padding: 10px; cursor: pointer; }.menu-item.active { background-color: #eee; }#myIframe { width: 100%; height: 500px; border: none; }</style><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body><div class="menu"><div class="menu-item" data-menu-id="A">菜单 A</div><div class="menu-item" data-menu-id="B">菜单 B</div></div><iframe id="myIframe" src="child-A.html"></iframe><script>window.changeMenuSelected = function(menuId) {$('.menu-item').removeClass('active');$(`[data-menu-id="${menuId}"]`).addClass('active');$('#myIframe').attr('src', `child-${menuId}.html`);};$('.menu-item').on('click', function() {const menuId = $(this).data('menu-id');window.changeMenuSelected(menuId);});</script>
</body>
</html>

子页面 (child-A.html)

<!DOCTYPE html>
<html>
<head><title>子页面 A</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body><h1>子页面 A 内容</h1><button id="switchToB">切换到菜单 B</button><script>$('#switchToB').on('click', function() {parent.window.changeMenuSelected('B');});</script>
</body>
</html>

总结

通过结合 Axure 的内联框架和 JavaScript 代码，你可以实现复杂的父子页面通信，提升原型的交互真实性和维护效率。关键点包括：

合理使用 parent.window 或 postMessage 进行跨页面通信。
确保代码的可读性和可维护性。
充分测试跨域场景和浏览器兼容性。

这种方法不仅适用于导航菜单联动，还可扩展到表单提交、数据加载等更多场景。

Axure跨页面交互：利用IFrame和JS实现父子页面菜单联动

在 Axure 中使用内联框架（IFrame）进行父子页面间的通信是一个非常有效的技巧，尤其是在需要实现复杂交互逻辑时。通过 JavaScript 直接操作 DOM 元素，可以突破 Axure 基础元件的限制，实现更灵活的页面联动。以下是对你描…...

编程日记 2025/7/23 17:20:12

百度飞桨OCR（PP-OCRv4_server_det|PP-OCRv4_server_rec_doc）文本识别-Java项目实践

什么是OCR? OCR（Optical Character Recognition，光学字符识别）是一种通过技术手段将图像或扫描件中的文字内容转换为可编辑、可搜索的文本格式（如TXT、Word、PDF等）的技术。它广泛应用于文档数字化、信息提取、自动化…...

编程日记 2025/7/24 4:15:10

救生衣穿戴检测数据集VOC+YOLO格式2171张2类别

数据集格式：Pascal VOC格式YOLO格式(不包含分割路径的txt文件，仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)：2171 标注数量(xml文件个数)：2171 标注数量(txt文件个数)：2171 …...

编程日记 2025/7/23 13:56:13

JAVA请求vllm的api服务报错Unsupported upgrade request、 Invalid HTTP request received.

环境： vllm 0.8.5 java 17 Qwen3-32B-FP8 问题描述： JAVA请求vllm的api服务报错Unsupported upgrade request、 Invalid HTTP request received. WARNING: Unsupported upgrade request. INFO: - "POST /v1/chat/completions HTTP/1.1&…...

编程日记 2025/7/15 5:12:56

信号量基础入门：并发控制的核心概念

问题的复杂性产生的根本原因在于，如 2.2 节所述，共享变量的访问始终是“单向信息流”。也就是说，一个进程可以分配新值或检查当前值，但这种检查不会为其他进程留下任何痕迹。结果是，当一个进程想要对共享变量的当前值作…...

编程日记 2025/7/7 7:18:32

物联网之使用Vertx实现HTTP/WebSocket最佳实践

小伙伴们，你们好呀，我是老寇，跟我一起学习使用Vertx实现HTTP-Server和WebSocket-Server 实现Http/WebSocket【响应式】 Vertx-Web地址实现过程查看源码代码比较简单，懒得讲解啦代码比较简单，懒得讲解啦代码…...

编程日记 2025/7/21 1:25:27

【神经网络与深度学习】GAN 生成对抗训练模型在实际训练中很容易判别器收敛，生成器发散

引言部分在深度学习领域，生成对抗网络（GAN）是一种强大的数据生成方法，它通过生成器（G）和判别器（D）之间的博弈来不断优化模型。然而，在实际训练过程中，GAN 往…...

编程日记 2025/7/19 9:45:38

使用 NGINX 的 `ngx_http_secure_link_module` 模块保护资源链接

一、模块简介版本：自 NGINX 0.7.18 起引入功能： 签名校验：对请求 URI 中的签名进行校验，保证链接未经篡改。时效控制：根据请求中携带的过期时间，判断链接是否仍在有效期。启用方式：编译 NG…...

编程日记 2025/7/22 14:07:41

5月19日day30打卡

模块和库的导入知识点回顾： 导入官方库的三种手段导入自定义库/模块的方式导入库/模块的核心逻辑：找到根目录（python解释器的目录和终端的目录不一致） 作业：自己新建几个不同路径文件尝试下如何导入一、导入官方库 …...

编程日记 2025/7/22 17:20:39

NW860NW894美光闪存颗粒NX770NX789

在数字化浪潮席卷全球的当下，数据存储技术的革新正以惊人的速度推动着硬件性能的边界。美光科技作为半导体存储领域的领军者，其NW860、NW894、NX770、NX789系列闪存颗粒凭借前沿架构与精密工艺，成为高性能存储解决方案的核心载体。本文将深入…...

编程日记 2025/7/22 16:34:03

高性能锁机制 CAS：Java 并发编程中的深度剖析

引言在并发编程领域，i操作的非线程安全性是开发者们熟知的问题。这一现象根源在于i并非原子操作，其内部执行过程包含读取、修改和写入三个步骤，在多线程环境下极易因线程切换导致数据竞争与不一致，这与我们此前探讨的多线程常见问…...

编程日记 2025/7/17 4:49:00

leetcode 每日一题 1931. 用三种不同颜色为网格涂色

题目 1931. 用三种不同颜色为网格涂色思路先获取列表，上下左右的所有情况。解决一维的问题然后所有一维的问题暴力循环。已知一个一维的解，可以对应其他一维解的列表（用于记忆化搜索） 然后使用递归，进行累加代…...

编程日记 2025/7/22 14:06:58

解决Windows磁盘管理中因夹卷导致的无法分区问题

解决Windows磁盘管理中因夹卷导致的无法分区问题在现代计算机管理中，磁盘分区是一个常见且重要的操作。无论是为了优化存储空间，还是为了实现多系统安装，合理的磁盘分区都是必不可少的。然而，许多用户在使用Windows磁盘管理工具…...

编程日记 2025/7/20 15:23:48

龙虎榜——20250519

上证指数缩量收十字星，个股涨多跌少，这周反弹的概率比较大。深证指数缩量调整，临近反弹，个股表现更好。 2025年5月19日龙虎榜行业方向分析化工（新能源材料国产替代） • 代表个股：红宝丽、…...

编程日记 2025/7/23 23:09:47

Python在自动驾驶数据清洗中的应用

Python在自动驾驶数据清洗中的应用在自动驾驶领域，数据是算法的燃料。高质量的数据意味着更精准的模型，更稳定的驾驶体验。然而，原始数据通常充满噪声、缺失值、不一致格式，甚至有异常点，这些都会严重影响自动驾驶系统的可靠性。因此，数据清洗是一道绕不开的关卡。一…...

编程日记 2025/7/17 17:03:27

腾讯云Mysql实现远程链接

1.SQL语句：CREATE USER remote_user% IDENTIFIED BY YourPassword; GRANT ALL PRIVILEGES ON *.* TO remote_user%; FLUSH PRIVILEGES; 2.设置入站规则 3.设置安全组 4.效果...

编程日记 2025/7/17 10:31:58

大模型（2）——提示工程（Prompt Engineering）

文章目录一、提示工程的核心概念为什么需要提示工程？ 二、提示设计的基本原则三、实用提示工程技巧1. 角色设定法2. 示例引导法（Few-Shot Learning）3. 分阶段提问4. 负面约束5. 温度（Temperature）控制四、不同任务类…...

编程日记 2025/7/20 1:44:07

深入Java G1 GC调优：如何解决高延迟与吞吐量瓶颈

引言 Java的垃圾回收（GC）机制是JVM性能的核心，但即使是最先进的G1（Garbage-First）收集器，在复杂场景下仍可能引发长时间停顿（Stop-The-World, STW）或吞吐量骤降。许多开发者虽然熟…...

编程日记 2025/7/21 15:56:30

DAPO：用于指令微调的直接偏好优化解读

一、背景与动机：从RLHF到DPO，再到DAPO 大型语言模型（LLM）经过海量无监督预训练后，往往需要对齐人类偏好或遵循指令的微调，使模型的回答更符合人类期望。这一过程通常通过人类反馈强化学习（RLHF）来实现。例如OpenAI的ChatGPT就使用了RLHF：先让人工标注对模型输出进行偏…...

编程日记 2025/7/19 5:37:41

vue2、vue3项目打包生成txt文件-自动记录打包日期：git版本、当前分支、提交人姓名、提交日期、提交描述等信息和前端项目的版本号json文件

vue2 打包生成text文件和前端项目的版本号json文件项目打包生成txt文件-自动记录git版本、当前分支、提交人姓名、提交日期、提交描述等信息生成版本号json文件-自动记录当前版本号、打包时间等信息新建branch-version-webpack-plugin.js文件 // 同步子进程 const execSyn…...

编程日记 2025/7/23 1:20:25

iOS解码实现

import Foundation import VideoToolboxclass KFVideoDecoderInputPacket {var sampleBuffer: CMSampleBuffer? }class KFVideoDecoder {// MARK: - 常量private let kDecoderRetrySessionMaxCount 5private let kDecoderDecodeFrameFailedMaxCount 20// MARK: - 回调var pi…...

编程日记 2025/7/19 6:43:42

Windows中PDF TXT Excel Word PPT等Office文件在预览窗格无法预览的终级解决方法大全

Windows中PDF TXT Excel Word PPT等Office文件在预览窗格无法预览的终级解决方法大全参考链接： https://zhuanlan.zhihu.com/p/454259765...

编程日记 2025/7/18 23:06:01

在Excel中使用函数公式时，常见错误对应不同的典型问题

在Excel中使用函数公式时，常见错误对应不同的典型问题 1. #DIV/0!（除以零错误）2. #N/A（值不可用）3. #NAME?（名称错误）4. #NULL!（空交集错误）5. #NUM!（数值错…...

编程日记 2025/7/22 23:26:32

Excel

1.快捷键 CtrlE 快速填充 CtrlQ 快速分析 CtrlEnter 原位填充 Tab 横向移动到下一个单元格 Enter 移动到下一行起始位置对应单元格 Shift 返回上一个单元格 0空格分数显示分数 1.if if(condition,true,false)if(A1>10,"true","fa…...

编程日记 2025/7/22 21:24:41

Rust 学习笔记：错误处理

Rust 学习笔记：错误处理 Rust 学习笔记：错误处理不可恢复的错误带有结果的可恢复错误匹配不同的错误出现错误时 panic 的快捷方式：unwrap 和 expect传播错误传播错误的快捷方式：? 操作符哪里可以使用 ? 操作符 panic or not pan…...

编程日记 2025/7/20 0:34:32

【Linux】系统指令与开发全栈（vim、ssh、gcc）

【Linux】系统指令与开发全栈（vim、ssh、gcc） 一、Linux 系统指令大全 1、文件与目录管理基础操作指令参数说明典型用例注意事项cd~ 家目录，- 返回上级，.. 上级目录cd ~/Documents 进入文档目录无目录权限时会报错ls-l 详情&am…...

编程日记 2025/7/22 9:03:18

用 CodeBuddy 搭建「MiniGoal 小目标打卡器」：一次流畅的 UniApp 开发体验

我正在参加CodeBuddy「首席试玩官」内容创作大赛，本文所使用的 CodeBuddy 免费下载链接：腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴在日常生活中，我们总是希望能够坚持一些小习惯，比如每天锻炼十分钟、读一页书、早睡十分…...

编程日记 2025/7/17 11:24:20

前端（vue）学习笔记（CLASS 6）：路由进阶

1、路由的封装抽离将之前写在main.js文件中的路由配置与规则抽离出来，放置在router/index.js文件中，再将其导入回main.js文件中，即可实现路由的封装抽离例如 //index.js import { createMemoryHistory, createRouter } from vue-routerim…...

编程日记 2025/7/22 9:21:44

ubuntu 安装 Redis新版Redis 7.x

以下是在Ubuntu系统中安装Redis的详细指南， 一、官方APT源安装 sudo apt install redis-server -y 默认安装最新APT源版本（Ubuntu 22.04通常为Redis 6.x） 服务自动启动，配置文件路径：/etc/redis/redis.conf验证安装 …...

编程日记 2025/7/17 8:05:08

Httphelper: Http请求webapi小记

文章目录 1、HttpHelper.cs Framework4.812、HttpHelper.cs NET83、JsonHelper.cs Framework4.814、JsonHelper.cs NET85、uniapp request.js 访问WEBAPI 每次查找、测试都比较费事，记录一下把 1、HttpHelper.cs Framework4.81 using System; using System.IO; usi…...

编程日记 2025/7/16 15:41:51

【Linux】进程控制（进程创建、进程终止、进程等待、进程替换）

目录一、进程创建 1、fork函数 2、页表权限二、进程终止 1、main函数返回值（退出码） 2、常见错误码及其对应的错误描述： 将错误退出码转化为错误描述的方法： 3、进程退出的三种场景 4、由上我们可以知道： 5…...

编程日记 2025/7/22 12:17:57

java+selenium专题-＞启动浏览器下篇

1.简介上一篇文章，我们已经在搭建的java项目环境中实践了，今天就在基于maven项目的环境中演示一下。 2.eclipse中新建maven项目 1.依次点击eclipse的file - new - other ，如下图所示： 2.在搜索框输入关键字“maven”&#xff…...

编程日记 2025/7/9 5:39:54

sqlserver 循环删除1000行

在SQL Server中，如果你想循环删除1000行数据，有几种方法可以实现，但值得注意的是，频繁使用循环删除操作可能会对数据库性能造成影响，尤其是在处理大量数据时。下面介绍几种方法，并讨论它们的优缺点。方法…...

编程日记 2025/7/13 6:47:59

亚信电子与联发科技携手打造AIoT新未来

[台湾新竹讯, 2025年5月19日] 智能物联网（AIoT）融合人工智能与物联网技术，通过边缘AI的实时数据分析及设备智能联网能力，加速智能物联网创新应用的蓬勃发展。为满足AIoT产业对多网络端口的应用需求，全球半导体公司【联…...

编程日记 2025/7/15 14:11:38

【成品设计】基于STM32的人体健康监测系统

《基于STM32的人体健康监测系统》 Ps:有4个版本。 V1硬件设计： 主控：STM32F103C8T6：作为系统主控芯片。血氧心率传感器：用于采集当前心率、血氧值。温湿度传感器：用于采集当前环境温湿度。有源低电平触发蜂鸣器&…...

编程日记 2025/7/19 12:39:12

【MySQL进阶】了解linux操作系统下mysql的配置文件和常用选项

前言 🌟🌟本期讲解关于linux下mysql配置选项的详细介绍~~~ 🌈感兴趣的小伙伴看一看小编主页：GGBondlctrl-CSDN博客 🔥 你的点赞就是小编不断更新的最大动力 🎆那么…...

编程日记 2025/7/19 11:24:38

LeetCode 219.存在重复元素 II

目录题目： 题目描述： 题目链接： 思路： 核心思路： 思路详解： 代码： C代码： Java代码： 题目： 题目描述： 题目链接： 219. 存…...

编程日记 2025/7/22 20:39:34

解释：神经网络

在过去的10年里，表现最好的artificial-intelligence系统——比如智能手机上的语音识别器或谷歌最新的自动翻译——都是由一种叫做“深度学习”的技术产生的深度学习实际上是一种被称为神经网络的人工智能方法的新名称，这种方法已经流行了70多年。1944年…...

编程日记 2025/7/18 22:52:45

Java 泛型详解

在 Java 的类型系统中，泛型（Generics） 是一个非常重要的特性。它让我们能够编写更通用、更安全的代码，尤其是在处理集合类（如 List、Map 等）时，泛型的使用可以大大减少类型转换的麻烦&#xff0…...

编程日记 2025/7/24 3:27:37

React集成百度【JSAPI Three】教程（001）：快速入门

文章目录 1、快速入门1.1 创建react项目1.2 安装与配置1.3 静态资源配置1.4 配置百度地图AK1.5 第一个DEMO1、快速入门 JSAPI Three版本是一套基于Three.js的三维数字孪生版本地图服务引擎，一套引擎即可支持2D、2.5D、3D全能力的地理投影与数据源加载，帮助开发者轻松搞定平面…...

编程日记 2025/7/15 15:20:31

WPF中资源（Resource）与嵌入的资源（Embedded Resource)的区别及使用场景详解

🌟 开发WPF项目时图片、SVG、配置文件等到底该设置为哪种资源？如何正确读取、跨程序集访问？一篇文章全解答。在使用 WPF 进行项目开发时，很多开发者在设置文件“生成操作（Build Action）”时，常常会在“资源（Resource）”和“嵌入的资源（Embedded Resource）”之间感…...

编程日记 2025/7/23 19:07:52

如何在 Windows 11 或 10 上安装 Fliqlo 时钟屏保

了解如何在 Windows 11 或 10 上安装 Fliqlo，为您的 PC 或笔记本电脑屏幕添加一个翻转时钟屏保以显示时间。 Fliqlo 是一款适用于 Windows 和 macOS 平台的免费时钟屏保。它也适用于移动设备，但仅限于 iPhone 和 iPad。Fliqlo 的主要功能是在用户不活动时在 PC 或笔记本电脑…...

编程日记 2025/7/24 1:05:49

【STM32】ST-Link V2.1制作

一、下载烧写工具及程序下载器制作（ST-Link V2.1） 链接: 提取码：6666https://pan.baidu.com/s/1n0RYNDEw5mBT_CsTFoqrIg?pwd6666 二、安装STM32 CubeProgrammer 双击安装包，点击Next 继续点击Next 选择安装路径，再…...

编程日记 2025/7/23 1:21:29

day30python打卡

知识点回顾： 导入官方库的三种手段导入自定义库/模块的方式导入库/模块的核心逻辑：找到根目录（python解释器的目录和终端的目录不一致） 作业：自己新建几个不同路径文件尝试下如何导入一、导入官方库我们复盘下学习py…...

编程日记 2025/7/17 20:12:48

AI大语言模型评测体系演进与未来展望

随着人工智能技术的飞速发展，大语言模型（LLMs）已成为自然语言处理领域的核心研究方向。2025年最新行业报告显示，当前主流模型的评测体系已从单一任务评估转向多维度、全链路的能力剖析。例如，《全球首个大语言模型意识水平”识商”白盒DIKWP测评报告》通过数据、信息、知识…...

编程日记 2025/7/22 15:33:19

用Python将 PDF 中的表格提取为 Excel/CSV

*用Python将 PDF 中的表格提取为 Excel/CSV，*支持文本型 PDF 和扫描件/图片型 PDF（需 OCR 识别）。程序包含以下功能： 1.自动检测 PDF 类型（文本 or 扫描件） 2.提取表格数据并保存为 Excel/CSV 3.处理多页…...

编程日记 2025/7/21 2:26:54

【工具】ncdu工具安装与使用指南：高效管理Linux磁盘空间

磁盘空间管理是Linux系统维护中的关键任务。当系统提示"磁盘空间不足"时，快速找出占用大量空间的文件和目录变得尤为重要。虽然传统的du命令可以完成这项工作，但其输出往往难以阅读和分析。本文介绍的ncdu（NCurses Disk Usage&…...

编程日记 2025/7/22 10:51:15

50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Progress Steps （步骤条）

📅 我们继续 50 个小项目挑战！—— Progress Steps 组件仓库地址：https://github.com/SunACong/50-vue-projects 项目预览地址：https://50-vue-projects.vercel.app/ ✨ 组件目标展示一个多步骤的进度条，指示当前所…...

编程日记 2025/7/17 21:41:49