用戶在使用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;
// 給彈出的網頁對話框準備的調用函數
function updateCount(value) {
count = count + value;
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函數，並傳遞參數
CallParentJSFunc({
func: "updateCount("+num+")",
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>
參考鏈接：彈出網頁對話框