弹出网页对话框
# 弹出网页对话框
注意
本文中展示的代码均为关键代码，复制粘贴到您的项目中，按照实际的情况，例如文档路径，用户名等做适当修改即可使用。
用户在使用PageOffice在线编辑文档的操作过程中，如果遇到一些复杂的编辑需求，可能会需要弹出一个新的对话框，做相应的处理，可能是设置一些格式，就如同Office设置字体、段落等各种对话框，也可能是填充一些内容到文档中，就如同插入书签、艺术字等各种对话框，PageOffice针对此需求提供了弹出模态和非模态两种网页对话框的方法，分别是ShowHtmlModalDialog和ShowHtmlModelessDialog，模态和非模态对话框的唯一区别就是模态对话框弹出后，用户就不能对父窗口做任何操作了，当然也就无法编辑文件，而非模态对话框就不会有这样的限制，开发人员可以根据实际需求选择使用。
在使用弹出网页对话框功能时，必须解决网页对话框与父窗口交互的几个问题，包括：
- 父窗口给弹出的网页对话框传递参数
- 网页对话框调用父窗口函数
- 网页对话框给父窗口传递参数
- 网页对话框调用父窗口函数获取返回值
- 网页对话框调用父窗口中的PageOffice
由于ShowHtmlModalDialog和ShowHtmlModelessDialog的参数和调用方法都是完全相同的，为了简单起见，本文就以ShowHtmlModelessDialog方法为例，介绍一下弹出网页对话框的使用方法。
父窗口给弹出的网页对话框传递参数很简单，只需要在执行
ShowHtmlModelessDialog方法弹出对话框的时候给第二个参数传递一个字符串，在弹出的网页对话框中使用window.external.UserParams就可以获取到这个字符串参数值。在网页对话框中调用父窗口函数、给父窗口传递参数、获取返回值等功能，可以使用网页对话框提供的内置js函数
CallParentJSFunc一起实现。为了便于开发人员实现网页对话框与父窗口PageOffice的交互，PageOffice提供的网页对话框中的 js 对象内置引用了父窗口中的pageofficectrl对象，所以在弹出的网页对话框中直接 js 调用
pageofficectrl对象就可以控制父窗口中的PageOffice和操作文档。
# 后端代码
本示例无后端关键代码。
# 前端代码
- 父窗口的HTML代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
<html>
<head>
<script type="text/javascript">
var count = 0;
// 给弹出的网页对话框准备的回调函数，接收参数：num
function updateCount(paramJson) {
let pJson = JSON.parse(paramJson);
let num = pJson.num;//获取到参数 num
count = count + num;
document.getElementById("Text1").value = count;
return count.toString();
}
function ShowModelessDlg() {
// 弹出网页对话框，并通过第二个参数传递字符串数据：123456
pageofficectrl.ShowHtmlModelessDialog("Modeless.html", "123456", "width=560px;height=410px;");
}
function OnPageOfficeCtrlInit() {
pageofficectrl.AddCustomToolButton("弹出非模态窗口", "ShowModelessDlg()", 0);
}
</script>
</head>
<body>
<div>
js变量count=<input id="Text1" type="text" value="0"/>
</div>
<div style=" width:auto; height:95vh;">
PageOffice组件代码
</div>
</body>
</html>
- 弹出网页对话框Modeless.html代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Modeless</title>
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript">
// 1. 获取ShowHtmlModelessDialog方法的第二个参数的字符串值：123456
var paramStr = window.external.UserParams;
function test(num){
// 2. 调用父窗口的updateCount函数，并传递参数
let pJson={};// 使用json对象传递参数
pJson.num = num;//传递参数 num
let pstr=JSON.stringify(pJson);
pohtmldialog.CallParentJSFunc({
funcName: "updateCount",
paramJson:pstr,
success: function (strRet) {
// 调用成功，获取updateCount返回值
document.getElementById('msg').innerText = "父窗口updateCount函数返回值 :"+strRet;
}
});
}
function test2(){
// 3. 直接调用pageofficectrl对象，给Word当前光标位置添加字符串文本
pageofficectrl.word.SetTextToSelection('--来自非模态对话框的文本--');
}
</script>
</head>
<body>
<h3>这是一个非模态网页对话框</h3>
<p> 此窗口弹出之后，用户仍然可以操作父窗口和编辑Word文件。</p>
<p> 父窗口执行ShowHtmlModelessDialog时传递过来的参数：<span id="span1" ></span></p>
<p> 点击下面按钮可以与父窗口进行交互操作。</p>
<ul>
<li>
通过CallParentJSFunc调用父窗口js函数updateCount：<br />
<input type="button" value="Count 加 1" onclick="test(1)" />
<span id="msg" ></span>
</li>
<li>
直接调用父窗口pageofficectrl对象：(<span style="color:red;">点击后，注意word内容变化</span>)<br />
<input type="button" value="插入文本到Word" onclick="test2()" />
</li>
</ul>
<script type="text/javascript">
document.getElementById('span1').innerText = paramStr;
</script>
</body>
</html>