帆软用工具测试超链接打开弹窗（iframe嵌套），解决js传参带中文传递有乱码问题

阅读原文时间：2023年07月11日阅读：1

1、新建超链接

随意点击一个单元格右击，选择超级链接

2、在弹出的窗口中选择JavaScript脚本如图：

其中红框框出的是几个要点，左边的就不讲了，右上角的参数cc是设置了公式remoteServletURL 能自动获取报表路径如图：

右下角的js代码是设置一个iframe弹窗，代码如下：

1 var url =FR.cjkEncode("?formlet=indicatorDetailedTypeFirst.frm&companycode=0102010101&intermediarycode=0201072911&name=赵振强");
2 var iframe = $(""); // 对话框内 iframe 参数的命名，默认宽高占比是 100%，可向下滚动 <br /> 3 iframe.attr("src", cc+url); <br /> 4 //iframe.attr("src", cc+"?formlet=indicatorDetailedTypeFirst.frm&name=赵振强"); // 给 iframe 添加 src 属性 <br /> 5 var o = { <br /> 6 width : 700, //对话框宽度 <br /> 7 height: 500 //对话框高度 <br /> 8 }; <br /> 9 FR.showDialog("添加", o.width, o.height, iframe,o);//弹出对话框</p> <p>其中需要注意的是如果参数中有中文需要将url包裹在编码FR.cjkEncode()里，否则传参中的中文将会是乱码：如图</p> <p><img class='lazyload' data-src="https://article.cdnof.com/2307/3d19c3fb-e98f-4ffa-835f-14d6ff72d222.png" alt="" /></p> <p>需要注意的是：如果放到工程js中会报FR没定义，我找了半天没找到怎么引入帆软的js，网上百度看到有人贴出了cjkEncode的源码，直接加到js方法中调用即可</p> <p>$.GPageModule([""],function(){ <br /> var modelType = "indicatorDetailedTypeFirst.frm"; <br /> var companycode = $("#companycode").val(); <br /> var intermediarycode =$("#intermediarycode").val(); <br /> var name =$("#name").val(); <br /> var reportURL = cjkEncodeNew(GlobalParam.context+"/ReportServer?formlet=erm/sj/"+modelType+"&companycode="+companycode+"&intermediarycode="+intermediarycode+"&name="+name); <br /> $("#viewIndicatorDetailedType").attr("src",reportURL); <br /> });</p> <p>function cjkEncodeNew(text) { <br /> if (text == null) { <br /> return ""; <br /> } <br /> var newText = ""; <br /> for (var i = 0; i < text.length; i++) { var code = text.charCodeAt (i); if (code >= 128 || code == 91 || code == 93) {//91 is "[", 93 is "]". <br /> newText += "[" + code.toString(16) + "]"; <br /> } else { <br /> newText += text.charAt(i); <br /> } <br /> } <br /> return newText; <br /> }</p> <p><strong>原创总结。</strong></p></div></div><div class="MuiGrid-root jss8 MuiGrid-item MuiGrid-grid-xs-true MuiGrid-grid-md-3"><div class="MuiTypography-root jss26 MuiTypography-body1"><div class="MuiTypography-root jss27 MuiTypography-body1"><canvas style="height:108px;width:108px" height="108" width="108"></canvas><div class="MuiTypography-root jss28 MuiTypography-body1"><p class="MuiTypography-root jss29 MuiTypography-body1">手机扫一扫</p><p class="MuiTypography-root jss29 MuiTypography-body1">移动阅读更方便</p></div></div></div><div class="MuiTypography-root jss9 MuiTypography-body1"><div class="MuiTypography-root jss30 MuiTypography-body1" style="height:150px"><div class="swiper-container jss32"><div class="swiper-pagination"></div><div class="swiper-wrapper"><div class="swiper-slide jss32"><a class="MuiTypography-root MuiLink-root MuiLink-underlineHover jss32 MuiTypography-colorInherit" target="_blank" rel="nofollow noopener noreferrer" href="https://qd.rs/aliyun"><img alt="阿里云服务器" class="jss31" src="https://article.cdnof.com/promotion/aliyun.jpg"/></a></div><div class="swiper-slide jss32"><a class="MuiTypography-root MuiLink-root MuiLink-underlineHover jss32 MuiTypography-colorInherit" target="_blank" rel="nofollow noopener noreferrer" href="https://qd.rs/tencent"><img alt="腾讯云服务器" class="jss31" src="https://article.cdnof.com/promotion/tencent.jpg"/></a></div><div class="swiper-slide jss32"><a class="MuiTypography-root MuiLink-root MuiLink-underlineHover jss32 MuiTypography-colorInherit" target="_blank" rel="nofollow noopener noreferrer" href="https://qd.rs/qiniu"><img alt="七牛云服务器" class="jss31" src="https://article.cdnof.com/promotion/qiniu.png"/></a></div></div></div></div></div><div class="MuiTypography-root MuiTypography-body1"><div class="MuiTypography-root jss33 MuiTypography-body1"><p class="MuiTypography-root jss34 MuiTypography-body1">你可能感兴趣的文章</p><div class="MuiList-root MuiList-padding" aria-label="main mailbox folders"><div class="MuiTypography-root MuiTypography-body1"><div class="MuiButtonBase-root MuiListItem-root jss37 MuiListItem-gutters MuiListItem-button" tabindex="0" role="button" aria-disabled="false"><div class="MuiListItemIcon-root jss36"><svg class="MuiSvgIcon-root MuiSvgIcon-colorError" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14h-2V9h-2V7h4v10z"></path></svg></div><a class="MuiTypography-root MuiLink-root MuiLink-underlineHover jss35 MuiTypography-colorInherit" target="_blank" href="https://v2as.com/article/18c552e0-d7dc-48b1-b284-b3e50324b84d">热力图heatmap使用</a></div><hr class="MuiDivider-root"/></div><div class="MuiTypography-root MuiTypography-body1"><div class="MuiButtonBase-root MuiListItem-root jss37 MuiListItem-gutters MuiListItem-button" tabindex="0" role="button" aria-disabled="false"><div class="MuiListItemIcon-root jss36"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 8c0 1.11-.9 2-2 2h-2v2h4v2H9v-4c0-1.11.9-2 2-2h2V9H9V7h4c1.1 0 2 .89 2 2v2z"></path></svg></div><a class="MuiTypography-root MuiLink-root MuiLink-underlineHover jss35 MuiTypography-colorInherit" target="_blank" href="https://v2as.com/article/bd7b832c-5af6-4a91-b96c-6ee2a73c202e">Linux系统运维之Web服务器Nginx安装</a></div><hr class="MuiDivider-root"/></div><div class="MuiTypography-root MuiTypography-body1"><div class="MuiButtonBase-root MuiListItem-root jss37 MuiListItem-gutters MuiListItem-button" tabindex="0" role="button" aria-disabled="false"><div class="MuiListItemIcon-root jss36"><svg class="MuiSvgIcon-root MuiSvgIcon-colorSecondary" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M19.01 3h-14c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 7.5c0 .83-.67 1.5-1.5 1.5.83 0 1.5.67 1.5 1.5V15c0 1.11-.9 2-2 2h-4v-2h4v-2h-2v-2h2V9h-4V7h4c1.1 0 2 .89 2 2v1.5z"></path></svg></div><a class="MuiTypography-root MuiLink-root MuiLink-underlineHover jss35 MuiTypography-colorInherit" target="_blank" href="https://v2as.com/article/2236e44e-d725-400a-88ad-8fce6c9a7d6a">APP中Web容器的核心实现</a></div><hr class="MuiDivider-root"/></div><div class="MuiTypography-root MuiTypography-body1"><div class="MuiButtonBase-root MuiListItem-root jss37 MuiListItem-gutters MuiListItem-button" tabindex="0" role="button" aria-disabled="false"><div class="MuiListItemIcon-root jss36"><p class="MuiTypography-root MuiTypography-body1">4</p></div><a class="MuiTypography-root MuiLink-root MuiLink-underlineHover jss35 MuiTypography-colorInherit" target="_blank" href="https://v2as.com/article/2c72d136-b9d8-4a3e-8e5b-4a7183ee66f2">一文搞懂jsBridge的运行机制</a></div><hr class="MuiDivider-root"/></div><div class="MuiTypography-root MuiTypography-body1"><div class="MuiButtonBase-root MuiListItem-root jss37 MuiListItem-gutters MuiListItem-button" tabindex="0" role="button" aria-disabled="false"><div class="MuiListItemIcon-root jss36"><p class="MuiTypography-root MuiTypography-body1">5</p></div><a class="MuiTypography-root MuiLink-root MuiLink-underlineHover jss35 MuiTypography-colorInherit" target="_blank" href="https://v2as.com/article/8a3fd77c-ce95-46b2-95ef-289d2dbbdc17">【狂神说】SpringMVC笔记</a></div><hr class="MuiDivider-root"/></div><div class="MuiTypography-root MuiTypography-body1"><div class="MuiButtonBase-root MuiListItem-root jss37 MuiListItem-gutters MuiListItem-button" tabindex="0" role="button" aria-disabled="false"><div class="MuiListItemIcon-root jss36"><p class="MuiTypography-root MuiTypography-body1">6</p></div><a class="MuiTypography-root MuiLink-root MuiLink-underlineHover jss35 MuiTypography-colorInherit" target="_blank" href="https://v2as.com/article/2afb82c9-5021-45b7-8be5-95645f8cfeb6">SpringMVC--从理解SpringMVC执行流程到SSM框架整合</a></div></div></div></div></div></div></div></div><footer style="margin-top:30px"><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorTextSecondary MuiTypography-alignCenter">Copyright © <a class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorInherit" href="https://v2as.com" title="哇哦，有大量工具等你探索">V2AS | 问路</a> 2025 .</p><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorTextSecondary MuiTypography-alignCenter"><a class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorInherit" rel="nofollow noopener noreferrer" href="https://beian.miit.gov.cn/">浙ICP备15029886号</a></p></footer></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"article":{"article_id":"54b775a0-557b-4315-9e76-686de08944ba","title":"帆软用工具测试超链接打开弹窗（iframe嵌套），解决js传参带中文传递有乱码问题","link":"","description":"1、新建超链接\n随意点击一个单元格右击，选择超级链接\n\n2、在弹出的窗口中选择JavaScript脚本如图：\n\n其中红框框出的是几个要点，左边的就不讲了，右上角的参数cc是设置了公式remoteServletURL 能自动获取报表路径如图：\n\n右下角的js代码是设置一个iframe弹窗，代码如下：\n\n1 var url =FR.cjkEncode(\"?formlet=indicato","image":"https://article.cdnof.com/2307/2620a3a1-30f7-46f1-ac7f-106043269022.png","keywords":["var","iframe","js","连接","FineReport","帆软","报表","乱码","adsbygoogle","JNDI"],"created_at":"2023-07-11T00:03:07.155Z","html":"\u003cp\u003e1、新建超链接\u003c/p\u003e\n\u003cp\u003e随意点击一个单元格右击，选择超级链接\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cimg class='lazyload' data-src=\"https://article.cdnof.com/2307/2620a3a1-30f7-46f1-ac7f-106043269022.png\" alt=\"\" /\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e2、在弹出的窗口中选择JavaScript脚本如图：\u003c/p\u003e\n\u003cp\u003e\u003cimg class='lazyload' data-src=\"https://article.cdnof.com/2307/39489e5b-ca2c-4724-937f-38e283378894.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003cp\u003e其中红框框出的是几个要点\u0026nbsp; \u0026nbsp;，左边的就不讲了，右上角的参数cc是设置了公式remoteServletURL\u0026nbsp; 能自动获取报表路径如图：\u003c/p\u003e\n\u003cp\u003e\u003cimg class='lazyload' data-src=\"https://article.cdnof.com/2307/15ebc6e9-8050-4add-ae85-1701576c1c65.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003cp\u003e右下角的js代码是设置一个iframe弹窗，代码如下：\u003c/p\u003e\n\u003cp\u003e1 var url =FR.cjkEncode(\"?formlet=indicatorDetailedTypeFirst.frm\u0026amp;companycode=0102010101\u0026amp;intermediarycode=0201072911\u0026amp;name=赵振强\"); \u003cbr /\u003e\n2 var iframe = $(\"\u003ciframe id='inp' name='inp' width='100%' height='100%' scrolling='yes' frameborder='0'\u003e\"); // 对话框内 iframe 参数的命名，默认宽高占比是 100%，可向下滚动 \u003cbr /\u003e\n3 iframe.attr(\"src\", cc+url); \u003cbr /\u003e\n4 //iframe.attr(\"src\", cc+\"?formlet=indicatorDetailedTypeFirst.frm\u0026amp;name=赵振强\"); // 给 iframe 添加 src 属性 \u003cbr /\u003e\n5 var o = { \u003cbr /\u003e\n6 width : 700, //对话框宽度 \u003cbr /\u003e\n7 height: 500 //对话框高度 \u003cbr /\u003e\n8 }; \u003cbr /\u003e\n9 FR.showDialog(\"添加\", o.width, o.height, iframe,o);//弹出对话框\u003c/p\u003e\n\u003cp\u003e其中需要注意的是如果参数中有中文需要将url包裹在编码FR.cjkEncode()里，否则传参中的中文将会是乱码：如图\u003c/p\u003e\n\u003cp\u003e\u003cimg class='lazyload' data-src=\"https://article.cdnof.com/2307/3d19c3fb-e98f-4ffa-835f-14d6ff72d222.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003cp\u003e需要注意的是：如果放到工程js中会报FR没定义，我找了半天没找到怎么引入帆软的js，网上百度看到有人贴出了cjkEncode的源码，直接加到js方法中调用即可\u003c/p\u003e\n\u003cp\u003e$.GPageModule([\"\"],function(){ \u003cbr /\u003e\n var modelType = \"indicatorDetailedTypeFirst.frm\"; \u003cbr /\u003e\n var companycode = $(\"#companycode\").val(); \u003cbr /\u003e\n var intermediarycode =$(\"#intermediarycode\").val(); \u003cbr /\u003e\n var name =$(\"#name\").val(); \u003cbr /\u003e\n var reportURL = cjkEncodeNew(GlobalParam.context+\"/ReportServer?formlet=erm/sj/\"+modelType+\"\u0026amp;companycode=\"+companycode+\"\u0026amp;intermediarycode=\"+intermediarycode+\"\u0026amp;name=\"+name); \u003cbr /\u003e\n $(\"#viewIndicatorDetailedType\").attr(\"src\",reportURL); \u003cbr /\u003e\n});\u003c/p\u003e\n\u003cp\u003efunction cjkEncodeNew(text) { \u003cbr /\u003e\n if (text == null) { \u003cbr /\u003e\n return \"\"; \u003cbr /\u003e\n } \u003cbr /\u003e\n var newText = \"\"; \u003cbr /\u003e\n for (var i = 0; i \u003c text.length; i++) { \n var code = text.charCodeAt (i); \n if (code \u003e= 128 || code == 91 || code == 93) {//91 is \"[\", 93 is \"]\". \u003cbr /\u003e\n newText += \"[\" + code.toString(16) + \"]\"; \u003cbr /\u003e\n } else { \u003cbr /\u003e\n newText += text.charAt(i); \u003cbr /\u003e\n } \u003cbr /\u003e\n } \u003cbr /\u003e\n return newText; \u003cbr /\u003e\n}\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e原创总结。\u003c/strong\u003e\u003c/p\u003e"},"seo":{"title":"帆软用工具测试超链接打开弹窗（iframe嵌套），解决js传参带中文传递有乱码问题","description":"1、新建超链接\n随意点击一个单元格右击，选择超级链接\n\n2、在弹出的窗口中选择JavaScript脚本如图：\n\n其中红框框出的是几个要点，左边的就不讲了，右上角的参数cc是设置了公式remoteServletURL 能自动获取报表路径如图：\n\n右下角的js代码是设置一个iframe弹窗，代码如下：\n\n1 var url =FR.cjkEncode(\"?formlet=indicato","image":"https://article.cdnof.com/2307/2620a3a1-30f7-46f1-ac7f-106043269022.png","url":"https://v2as.com/article/54b775a0-557b-4315-9e76-686de08944ba","keywords":["var","iframe","js","连接","FineReport","帆软","报表","乱码","adsbygoogle","JNDI"]},"viewsCount":1,"promotionList":[{"title":"阿里云服务器","image":"https://article.cdnof.com/promotion/aliyun.jpg","link":"https://qd.rs/aliyun"},{"title":"腾讯云服务器","image":"https://article.cdnof.com/promotion/tencent.jpg","link":"https://qd.rs/tencent"},{"title":"七牛云服务器","image":"https://article.cdnof.com/promotion/qiniu.png","link":"https://qd.rs/qiniu"}],"similarKeywordsList":[{"article_id":"18c552e0-d7dc-48b1-b284-b3e50324b84d","title":"热力图heatmap使用","link":"","description":"参考：https://www.cnblogs.com/julinhuitianxia/p/7755246.html\n1.首先到echarts官网下载应用实例：http://echarts.baidu.com/examples/editor.html?c=heatmap-bmap\n2.在A页面中用iframe标签进行跳转（使用该方法的原因：如果你的主页面有应用到其他版本的echarts或jQuery","image":"https://article.cdnof.com/2309/31a000f4-6d61-470c-beb6-c67520abea2d.png","keywords":["script","echarts","js","type","com","var","javascript","src","text","http"],"created_at":"0001-01-01T00:00:00Z"},{"article_id":"bd7b832c-5af6-4a91-b96c-6ee2a73c202e","title":"Linux系统运维之Web服务器Nginx安装","link":"","description":"Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，并在一个BSD-like 协议下发行。本文先整理web服务器内容。\n\n操作系统：CentOS 6.6 X64\nNginx版本：nginx-1.10.2.tar.gz\n\n　下载nginx安装包\n\n[root@LFTp-Svn01 soft]# wget http://nginx.org/download","image":"","keywords":["nginx","conf","usr","local","Linux","运维","fastcgi","http","log","root"],"created_at":"0001-01-01T00:00:00Z"},{"article_id":"2236e44e-d725-400a-88ad-8fce6c9a7d6a","title":"APP中Web容器的核心实现","link":"","description":"现在的业务型APP中，采用纯原生开发策略的已经很少了，大部分都使用的混合开发。如原生，H5,ReactNative,Flutter,Weex它们之间任意的组合就构成了混合开发。\n其中原生+H5是出现最早的，老牌混合方案，即使过来多年，在现在的混合开发方案中H5也是使用率非常高的。在APP中嵌入Web容器，将更新迭代快，用户交互少的页面采用H5开发，将交互性强，稳定的部分使用原生开发是Hybird开","image":"","keywords":["JS","原生","div","webView","Web","message","容器","window","调用","web"],"created_at":"0001-01-01T00:00:00Z"},{"article_id":"2c72d136-b9d8-4a3e-8e5b-4a7183ee66f2","title":"一文搞懂jsBridge的运行机制","link":"","description":"我司的APP是一个典型的混合开发APP，内嵌的都是前端页面，前端页面要做到和原生的效果相似，就避免不了调用一些原生的方法，jsBridge就是js和原生通信的桥梁，本文不讲概念性的东西，而是通过分析一下我司项目中的jsBridge源码，来从前端角度大概了解一下它是怎么实现的。\njs调用方式\n先来看一下，js是怎么来调用某个原生方法的，首先初始化的时候会调用window.WebViewJavascr","image":"","keywords":["原生","WebViewJavascriptBridge","var","js","id","搞懂","window","调用","message","function"],"created_at":"0001-01-01T00:00:00Z"},{"article_id":"8a3fd77c-ce95-46b2-95ef-289d2dbbdc17","title":"【狂神说】SpringMVC笔记","link":"","description":"ssm：mybatis+Spring+SpringMVC MVC三层架构\nssm框架：研究官方文档，锻炼自学能力，锻炼项目能力\nSpringMVC+Vue+SpringBoot+SpringCloud+Linux\nSSM=javaweb项目\nMVVM: m v vm(viewmodel)三层架构。viewmodel：前后端分离核心，双向绑定\n重点：\nSpring：IOC 和 AOP\nSprin","image":"https://article.cdnof.com/2307/999b9ada-ebce-4821-952b-2f7d0f85314b.png","keywords":["org","class","http","springframework","servlet","xml","public","web","jsp","www"],"created_at":"0001-01-01T00:00:00Z"},{"article_id":"2afb82c9-5021-45b7-8be5-95645f8cfeb6","title":"SpringMVC--从理解SpringMVC执行流程到SSM框架整合","link":"","description":"SpringMVC框架是SSM框架中继Spring另一个重要的框架，那么什么是SpringMVC,如何用SpringMVC来整合SSM框架呢？下面让我们详细的了解一下.\n注：在学习SpringMVC之前最好有JavaWeb的基础，这样才能更好的理解SpringMVC,如果不了解JavaWeb可以参考这篇文章JavaWeb基础入门到上手项目，本篇文章参照于B站狂神说老师的SpringMVC视频编写，","image":"https://article.cdnof.com/2307/183f9238-2a5d-4687-9564-aa52574aab4a.png","keywords":["servlet","org","视图","String","public","http","class","springframework","html","jsp"],"created_at":"0001-01-01T00:00:00Z"}]},"__N_SSG":true},"page":"/article/[article_id]","query":{"article_id":"54b775a0-557b-4315-9e76-686de08944ba"},"buildId":"7EtL49Y65E8zx1NwcIC_o","isFallback":false,"gsp":true,"scriptLoader":[]}</script></body></html>