pageoffice6 版本線上開啟檔案彈出網頁對話方塊

qianxi發表於2024-03-19
網頁

使用者在使用PageOffice線上編輯文件的操作過程中，如果遇到一些複雜的編輯需求，可能會需要彈出一個新的對話方塊，做相應的處理，可能是設定一些格式，就如同Office設定字型、段落等各種對話方塊，也可能是填充一些內容到文件中，就如同插入書籤、藝術字等各種對話方塊，PageOffice針對此需求提供了彈出模態和非模態兩種網頁對話方塊的方法，分別是ShowHtmlModalDialog和ShowHtmlModelessDialog，模態和非模態對話方塊的唯一區別就是模態對話方塊彈出後，使用者就不能對父視窗做任何操作了，當然也就無法編輯檔案，而非模態對話方塊就不會有這樣的限制，開發人員可以根據實際需求選擇使用。

在使用彈出網頁對話方塊功能時，必須解決網頁對話方塊與父視窗互動的幾個問題，包括：

  • 父視窗給彈出的網頁對話方塊傳遞引數
  • 網頁對話方塊呼叫父視窗函式
  • 網頁對話方塊給父視窗傳遞引數
  • 網頁對話方塊呼叫父視窗函式獲取返回值
  • 網頁對話方塊呼叫父視窗中的PageOffice

由於ShowHtmlModalDialog和ShowHtmlModelessDialog的引數和呼叫方法都是完全相同的，為了簡單起見，本文就以ShowHtmlModelessDialog方法為例，介紹一下彈出網頁對話方塊的使用方法。

  1. 父視窗給彈出的網頁對話方塊傳遞引數很簡單，只需要在執行ShowHtmlModelessDialog方法彈出對話方塊的時候給第二個引數傳遞一個字串，在彈出的網頁對話方塊中使用window.external.UserParams就可以獲取到這個字串引數值。

  2. 在網頁對話方塊中呼叫父視窗函式、給父視窗傳遞引數、獲取返回值等功能，可以使用網頁對話方塊提供的內建js函式CallParentJSFunc一起實現。

  3. 為了便於開發人員實現網頁對話方塊與父視窗PageOffice的互動，PageOffice提供的網頁對話方塊中的 js 物件內建引用了父視窗中的pageofficectrl物件，所以在彈出的網頁對話方塊中直接 js 呼叫pageofficectrl物件就可以控制父視窗中的PageOffice和操作文件。

前端程式碼

  1. 父視窗的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>
  1. 彈出網頁對話方塊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>

參考連結：彈出網頁對話方塊

相關文章