POBrowser回调父页面的函数传值

• 查看本示例演示效果（Windows版）
• 查看本示例演示效果（国产版）
• 本示例关键代码的编写位置，请参考“开始 - 快速上手”里您所使用的开发语言框架的最简集成代码

注意

本文中展示的代码均为关键代码，复制粘贴到您的项目中，按照实际的情况，例如文档路径，用户名等做适当修改即可使用。

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();
}

2. 将当前页面中定义的updateCount函数挂载到window对象上。

   • 如果是vue项目需要执行下面的代码，：

   mounted: function () {
       window.POPageMounted = this;
   }
   

   • 如果是vue3项目需要执行下面的代码：

   onMounted(() => {
       window.POPageMounted = { updateCount };
   });
   

3. 接着上述步骤，子页面（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;
			}
		}
	});
}