
- [查看本示例演示效果（Windows版）](https://www.bilibili.com/video/BV1M34y1A7qL?p=6)
- [查看本示例演示效果（国产版）](https://www.bilibili.com/video/BV1eM4m167Lc?p=6)
- 本示例关键代码的编写位置，请参考“开始 - 快速上手”里您所使用的开发语言框架的最简集成代码

POBrowser内置的JS函数CallParentFunc用于PageOffice浏览器打开的页面（子页面）回调父页面JS函数，此功能有如下用途：
- 可以实现子页面调用父页面的JS函数；
- 可以实现子页面给父页面传参；
- 可以实现子页面更新父页面的局部状态信息；
- 可以实现子页面刷新整个父页面等功能。

CallParentFunc回调函数原型：
```
// FuncName：自定以函数名。此函数有且只能有一个字符串参数。
// paramJson：json字符串，用于回调时传递参数。
function FuncName(paramJson){
	// 此处编写您的js代码

	return '';// 返回值必须是字符串类型
}
```

# 前端代码

例如：调用openWindow的页面（父页面）有一个计数器，每次点击子页面中的按钮都回调父页面函数使得这个计数器的值+1。
1. 父页面代码。

首先，在页面添加一个input用来展示数据；
```
<div>Count=<input v-model="CountValue" /></div>
```
然后，定义一个updateCount函数增加计数；
```
// 定义给子页面回调的函数
updateCount(paramJson) {
	let pJson = JSON.parse(paramJson);
	let num = pJson.num;//获取到参数 num
	let count = parseInt(this.CountValue);
	this.CountValue = count + num;
	return this.CountValue.toString();
}
```
1. 将当前页面中定义的updateCount函数挂载到window对象上。
	- 如果是vue项目需要执行下面的代码，：
	```
	mounted: function () {
	    window.POPageMounted = this;
	}
	```
	- 如果是vue3项目需要执行下面的代码：
	```
	onMounted(() => {
	    window.POPageMounted = { updateCount };
	});
	```
2. 接着上述步骤，子页面（POBrowser打开的页面）按钮点击时，通过执行下面的increaseCount函数回调父页面的updateCount函数。

```
increaseCount(value) {
	let pJson = {}; // 使用json对象传递参数
	pJson.num = value; //传递参数 num
	let pstr = JSON.stringify(pJson);

	window.CallParentFunc({
		funcName: 'updateCount', //回调父页面的函数名
		paramJson: pstr, //传递参数
		success: function (strRet) { //回调成功，获取回调函数的返回值
			alert("现在父窗口Count的值为：" + strRet);
		},
		error: function (strErr) {
			if(strErr.indexOf('parentlost')>-1){
				alert('父页面关闭或跳转刷新了，导致父页面函数没有调用成功！');
				return;
			}
		}
	});
}
```

参考链接：[POBrowser回调父页面的函数传值 | PageOffice 开发者中心](https://pageoffice.cn/pages/3842ec/)

本示例关键代码的编写位置，请参考“开始 - 快速上手”里您所使用的开发语言框架的最简集成代码

PageOffice打开的页面（子页面）回调父页面的函数传值

前端

PageOffice的CallParentFunc功能实现子页面与父页面交互，支持传参、状态更新及页面刷新。通过JS回调机制，子页面可调用父页面函数并传递JSON参数，适用于Vue等框架开发场景，提升Web应用动态交互能力。

代码解释

Windows

JSON

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

PageOffice打开的页面（子页面）回调父页面的函数传值-腾讯云开发者社区-腾讯云

PageOffice打开的页面（子页面）回调父页面的函数传值

PageOffice打开的页面（子页面）回调父页面的函数传值

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐