用户在使用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>

参考链接:弹出网页对话框

pageoffice6 版本在线打开文件弹出网页对话框的更多相关文章

  1. JS 弹出网页 (不显示地址栏,工具栏) 网页去掉地址栏

    JS 弹出网页 (不显示地址栏,工具栏) 网页去掉地址栏 window.open()支持环境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 基本语法: ...

  2. JS弹出下载对话框以及实现常见文件类型的下载

    写在前面 JS要实现下载功能,一般都是这么几个过程:生成下载的URL,动态创建一个A标签,并将其href指向生成的URL,然后触发A标签的单击事件,这样就会弹出下载对话框,从而实现了一个下载的功能. ...

  3. Visual Studio2012打开时弹出“遇到异常:这可能是由某个扩展导致的”错误的解决办法

    Visual Studio2012打开时弹出"遇到异常:这可能是由某个扩展导致的"错误的解决办法: 具体问题如下: 分析原因:网上搜集了以下,出现异常的原因是安装了第三方控件,然后 ...

  4. CEfSharp下载文件 弹出保存框,实现 IDownloadHandler 接口

    上节讲了如何将CefSharp集成到C#中,但集成后将web界面链接进ChromiumWebBrowser后,但web界面上下载附件的功能不好使咯. 百度了半天还是没搞定,只能去看官网的Excampl ...

  5. 第九篇 -- 可以上网,连WIFI弹出网页

    最近在调试WIFI模块时,程序路径没走对,导致运行了其他的函数,修改了配置文件,之后每次连接WIFI时都会弹出网页,并且明明可以上网,下面电脑符号那儿还会出现黄标,甚是心烦.上网搜索一番,终是解决了. ...

  6. 由于想要实现下载的文件可以进行选择,而不是通过<a>标签写死下载文件的参数,所以一直想要使用JFinal结合ajax实现文件下载,但是ajax实现的文件下载并不能触发浏览器的下载文件弹出框,这里通过模拟表单提交实现同样的效果。

    由于想要实现下载的文件可以进行选择,而不是通过<a>标签写死下载文件的参数,所以一直想要使用JFinal结合ajax实现文件下载(这样的话ajax可以传递不同的参数),但是ajax实现的文 ...

  7. 打开Office2007弹出“向程序发送命令时出现问题” 解决方案

    打开Office2007弹出“向程序发送命令时出现问题” 解决方案,试了很多方案,最终还是这种方法帮我解决了问题,分享下,以下地址便是: http://club.excelhome.net/threa ...

  8. firefox下载文件弹出框之终极解决方案-vbs模拟键盘操作

    由于近期一直被firefox的保存文件弹出框困扰,摸索尝试过几种方法,已有的方法可以跑通但是对对效果不太满意,因此一直在寻找合适的解决办法. 最近发现了也可以通过VBS来处理弹出框,速度也不错,其原理 ...

  9. 使用CEfSharp之旅(3)下载文件 弹出保存框 IDownloadHandler

    原文:使用CEfSharp之旅(3)下载文件 弹出保存框 IDownloadHandler 版权声明:本文为博主原创文章,未经博主允许不得转载.可点击关注博主 ,不明白的进群191065815 我的群 ...

  10. [c/c++] programming之路(2)、kill QQ,弹出系统对话框,吃内存等

    一.删除文件 二.盗取密码的原理 #include<stdlib.h> //杀掉QQ,然后提示网络故障,请重新登陆,弹出高仿界面,获取账号密码,然后打开QQ进行登录 void main() ...

随机推荐

  1. 你真的了解java class name吗?

    在面向对象的世界,Class是java的基础.java.lang.Class实际上是继承自java.lang.Object. class有一个方法叫做getName,该方法会返回(class, int ...

  2. Docker学习路线2:底层技术

    了解驱动Docker的核心技术将让您更深入地了解Docker的工作原理,并有助于您更有效地使用该平台. Linux容器(LXC) Linux容器(LXC)是Docker的基础. LXC是一种轻量级的虚 ...

  3. C# Dev GridControl小结

    1. 如何解决单击记录整行选中的问题 View->OptionsBehavior->EditorShowMode 设置为:Click 2. 如何新增一条记录 (1).gridView.Ad ...

  4. Python设计模式----4.构建者模式

    构建者模式: 将一个复杂对象的构造与表现进行分离,利用多个步骤进行创建,同一个构建过程可用于创建多个不同的表现 构建者模式一般由 Director(指挥官)和 Builder(建设者)构成 class ...

  5. springBoot集成RPC

    需求 : 项目开发到尾期,仓库系统需要对接我们这边的制造系统, 为的是制造系统所使用物料时,需向仓库系统发送请求物料信息,所以需要调用 仓库接口. 使用技术: RPC 数据传输格式: json 开发环 ...

  6. mockjs 模拟实现增删改查

    /*mUtils.js用于解析get请求的参数*/ export const param2Obj = url => { const search = url.split('?')[1] if ( ...

  7. js 连接数据库 提示:ActiveXObject is not defined

    ActiveXObject is not defined 最近比较闲,上班瞎捣鼓一下,没想到报错了,提示ActiveXObject is not defined 大概是在js连接数据库时new对象使用 ...

  8. verilog中端口定义方式以及如何使用变量

    一.module端口定义方式 目前有两种方式能够对module端口进行定义, 第一种是我目前使用比较多的,把I/O说明写在端口声明语句里,方式A: 1 module block( 2 input a, ...

  9. 力扣507(java)-完美数(简单)

    题目: 对于一个 正整数,如果它和除了它自身以外的所有 正因子 之和相等,我们称它为 「完美数」. 给定一个 整数 n, 如果是完美数,返回 true:否则返回 false. 示例 1: 输入:num ...

  10. 云原生时代下,微服务体系与 Serverless 架构的发展、治理与融合

    简介: 7 月 22.23 日为期两天的 2022 稀土开发者大会召开在即,此次阿里云 Serverless 研发负责人杨皓然(不瞋)作为大会出品人,带来<微服务与 Serverless> ...