首頁 探索 說明
登入
ipu
/
ipu-guide
關註 10
讚好 1
派生 0
代碼 問題管理 0 合併請求 0 提交歷史 476 版本發佈 1 Wiki
瀏覽代碼

增加远程iframe子页面调用插件demo

guohh 4 年之前
父節點
1c770e86cc
當前提交
a47ec6a56f
共有 7 個文件被更改，包括 210 次插入 和 6 次删除
分割檢視 顯示文件統計
  1. 5 0
      show-server/src/main/resources/server-page.xml
  2. 6 6
      show-server/src/main/webapp/biz/js/common/require-config.js
  3. 4 0
      show-server/src/main/webapp/biz/js/more/scene/CrossIframePlug.js
  4. 56 0
      show-server/src/main/webapp/biz/js/more/scene/sendmsg.js
  5. 95 0
      show-server/src/main/webapp/template/webapp/more/scene/CrossIframePage.html
  6. 34 0
      show-server/src/main/webapp/template/webapp/more/scene/CrossIframePlug.html
  7. 10 0
      show-server/src/main/webapp/template/webapp/more/scene/scene.html

+ 5 - 0
show-server/src/main/resources/server-page.xml
查看文件 

@ -88,6 +88,11 @@
88 88
89 89 
    <action name="VueDemo" template="template/webapp/more/dist/index.html"></action>
90 90 
    <action name="scenedemo" template="template/webapp/more/scene/scene.html"></action>
91
92 
    <!-- 远程iframe跨域调用插件 -->
93 
    <action name="CrossIframePlug" template="template/webapp/more/scene/CrossIframePlug.html"></action>
94 
    <action name="CrossIframePage" template="template/webapp/more/scene/CrossIframePage.html"></action>
95
91 96 
    <!-- 报表场景 -->
92 97 
    <action name="SceneBean_Demo" template="template/webapp/more/scene/demo/Demo.html"></action>
93 98 
    <action name="SceneBean_DemoAdd" template="template/webapp/more/scene/demo/DemoAdd.html"></action>

+ 6 - 6
show-server/src/main/webapp/biz/js/common/require-config.js
查看文件 

@ -2,12 +2,12 @@ require.config({
2 2 
	paths:{
3 3 
		'common' : 'biz/js/common/common',
4 4 
		'util' : 'biz/js/common/util',
5 
		'crossframe':'biz/js/common/cross-frame',
6 
		'artTemplate':'biz/lib/art-template/template-web',
7 
		'handlebars':'biz/lib/handlebars/handlebars-4.0.5',
8 
		'lc': 'biz/lib/literallycanvas/literallycanvas-core', // 签名
9 
		'dragsort': 'biz/lib/dragsort/jquery.dragsort-0.5.2', // 拖动
10 
		'gesture': 'biz/lib/gesture/gesture.password'
5 
		'crossframe':'biz/js/common/cross-frame',							 // 子iframe页面调用插件功能..
6 
		'artTemplate':'biz/lib/art-template/template-web',		 // 模板第三方库推荐
7 
		'handlebars':'biz/lib/handlebars/handlebars-4.0.5',		 // 模板第三方库（不建议）
8 
		'lc': 'biz/lib/literallycanvas/literallycanvas-core',  // 签名第三方库
9 
		'dragsort': 'biz/lib/dragsort/jquery.dragsort-0.5.2',  // 拖动第三方库
10 
		'gesture': 'biz/lib/gesture/gesture.password',				 //　手势密码第三方库
11 11 
	},
12 12 
	shim:{
13 13 
        'dragsort': { deps: ['jquery'] }

+ 4 - 0
show-server/src/main/webapp/biz/js/more/scene/CrossIframePlug.js
查看文件 

@ -0,0 +1,4 @@
1 
require(["mobile", "crossframe"], function (Mobile, crossframe) {
2
3
4 
});

+ 56 - 0
show-server/src/main/webapp/biz/js/more/scene/sendmsg.js
查看文件 

@ -0,0 +1,56 @@
1 
	/**
2 
	 * paras里面的项属性或子属性值不能为函数，如 paras:[function(){}, {action:function(){}}];
3 
	 * 上面paras，数组第一项function(){}是没问题的，代码已做处理，第二项 {action:function(){}} 会有问题
4 
	 *
5 
	 * options = {
6 
	 * 	objName:str, // 父窗口中，模块名称，必需
7 
	 * 	method:str	 // 要调用的模块方法，必需
8 
	 * 	paras:array  // 调用方法所需参数，数组格式，必需，
9 
	 * }
10 
	 */
11 
	var sendMsg = (function() {
12 
		var callBackInfos = {}; // 存储需要回调的方法
13 
		var uid = 0; // id索引，自增
14
15 
		function sendMsg(options) {
16 
			// 可做一些基础参数检查,检查参数是否齐全
17
18 
			var paras = options.paras;
19 
			var localId = options.id = uid++; // 进行编号
20 
			var callBacks = callBackInfos[localId] = {};
21 
			var callBackIndexs = options.callBackIndexs = [];
22
23 
			// 若是方法就需要进行替换，因为postMessage不支持传递函数对象
24 
			for ( var key in paras) {
25 
				if (typeof paras[key] == "function") {
26 
					callBacks[key] = paras[key];
27 
					paras[key] = 'function'; // 将function修改为字符串'function'
28 
					callBackIndexs.push(key); // 记录下标
29 
				}
30 
			}
31 
			window.parent.postMessage(options, "*"); // 给父窗口发消息，*任何域名domain
32 
//			alert('send');
33 
		}
34
35 
		function receiveMessage(event) {
36 
			console.dir(event);
37 
//			alert('receive');
38 
//			alert('child receive'+event);
39 
//			alert(JSON.stringify(event.data));
40 
			var data = event.data;
41 
			var code = data.code;
42
43 
			if (code >= 0) { // 大于0表示调用成功
44 
				var localId = data.id;
45 
				var result = data.result;
46 
				callBackInfos[localId][code].apply(this, result);
47 
				delete callBackInfos[localId]; // 移除相关信息
48 
			} else {
49 
				// 表示参数验正失败， 此处理自己处理
50 
				alert('invalid:'+data.result);
51 
			}
52 
		}
53
54 
		window.addEventListener("message", receiveMessage, false);
55 
		return sendMsg;
56 
	})();

+ 95 - 0
show-server/src/main/webapp/template/webapp/more/scene/CrossIframePage.html
查看文件 

@ -0,0 +1,95 @@
1 
<!DOCTYPE html>
2 
<html lang="en">
3 
<head>
4 
  <meta charset="utf-8">
5 
  <title>iframe子页面</title>
6 
  <script src="biz/js/more/scene/sendmsg.js"></script>
7 
</head>
8 
<body>
9 
<script type="text/javascript">
10 
  //WadeMobile.tip("你好，我好，大家好………………");
11 
</script>
12 
<h1>跨域调用</h1>
13 
<button style="width:200px;height:100px;" id="openContacts">打开联系人(无回调)</button>
14 
<script type="text/javascript">
15 
  /* 	alert('child alert'); */
16
17 
  var btn = document.getElementById("openContacts");
18 
  btn.onclick = function(){
19 
    //WadeMobile.openBrowser("http://3g.baidu.com");
20 
    var msg = {
21 
      objName : "ipuMobile",     // 老版本名称wadeMobile
22 
      method : "getContacts",
23 
      paras : [function(result){
24 
        alert(result.toString())
25 
      }]
26 
    }
27 
    sendMsg(msg);
28 
  }
29 
</script>
30
31 
<br /><br />
32 
<button style="width:200px;height:100px;" id="openBrowser">打开浏览器(无回调)</button>
33 
<script type="text/javascript">
34 
  /* 	alert('child alert'); */
35
36 
  var btn = document.getElementById("openBrowser");
37 
  btn.onclick = function(){
38 
    var msg = {
39 
      objName:"ipuMobile",     // 老版本名称wadeMobile
40 
      method:"openBrowser",
41 
      paras:["http://baidu.com"]
42 
    }
43 
    sendMsg(msg);
44 
  }
45 
</script>
46
47 
<br /><br />
48 
<button style="width:200px;height:100px;" id="getOsVersion">获取手机手机版本(回调)</button>
49 
<script type="text/javascript">
50 
  var btn = document.getElementById("getOsVersion");
51 
  btn.onclick = function(){
52 
    var msg = {
53 
      objName : "ipuMobile",  // 老版本名称wadeMobile
54 
      method : "getSysInfo",
55 
      paras : [ function(name) {
56 
        alert('手机系统版本：'+name);
57 
      }, 'OSVERSION', function(name, t){
58 
        alert("callback error");
59 
      }]
60 
    };
61 
    sendMsg(msg);
62 
  }
63 
</script>
64
65
66 
<br /><br />
67 
<button style="width:200px;height:100px;" id="setMemoryCache">设置缓存</button>
68 
<script type="text/javascript">
69 
  var btn = document.getElementById("setMemoryCache");
70 
  btn.onclick = function(){
71 
    var msg = {
72 
      objName:"ipuMobile",  // 老版本名称wadeMobile
73 
      method:"setMemoryCache",
74 
      paras:["Key001","我是缓存中的测试值-Value001"]
75 
    };
76 
    sendMsg(msg);
77 
  }
78 
</script>
79
80 
<br /><br />
81 
<button style="width:200px;height:100px;" id="getMemoryCache">获取缓存</button>
82 
<script type="text/javascript">
83 
  var btn = document.getElementById("getMemoryCache");
84 
  btn.onclick = function(){
85 
    var msg = {
86 
      objName:"ipuMobile",
87 
      method:"getMemoryCache",   // 老版本名称wadeMobile
88 
      paras:[function(value){
89 
        alert(value);},"Key001","没有取到值我，我是默认值"]
90 
    };
91 
    sendMsg(msg);
92 
  }
93 
</script>
94 
</body>
95 
</html>

+ 34 - 0
show-server/src/main/webapp/template/webapp/more/scene/CrossIframePlug.html
查看文件 

@ -0,0 +1,34 @@
1 
<!DOCTYPE html>
2 
<html lang="en">
3 
<head>
4 
  <meta charset="utf-8">
5 
  <title>iframe子页面调用插件</title>
6 
  {%>template/common/Head.html%}
7 
  <script src="biz/js/more/scene/CrossIframePlug.js"></script>
8 
</head>
9 
<body>
10 
<div class="ipu-flex-row ipu-flex-vertical">
11
12 
  <div class="ipu-flex-col">
13 
    <header class="ipu-toolbar">
14 
      <a class="ipu-fn-left page-back" href="javascript:;"> <i
15 
          class="ipu-icon mdi mdi-chevron-left"></i>
16 
      </a>
17 
      <h1 class="ipu-toolbar-title">iframe子页面调用插件</h1>
18 
    </header>
19 
  </div>
20
21 
  <div class="ipu-flex-col">
22 
    子页面地址http://www.aiipu.com:8083/show/mobile?action=CrossIframePage，原理为通过postMessage与父窗口通信，通过父窗口调用插件（iframe页面不直接调用插件）
23 
  </div>
24
25 
  <div class="ipu-flex-col ipu-flex-col-auto">
26 
    <div class="ipu-flex-content page-content">
27 
      <iframe src="http://www.aiipu.com:8083/show/mobile?action=CrossIframePage" style="width: 100%;height: 100%;border: none;">
28 
      </iframe>
29 
    </div>
30 
  </div>
31
32 
</div>
33 
</body>
34 
</html>

+ 10 - 0
show-server/src/main/webapp/template/webapp/more/scene/scene.html
查看文件 

@ -129,6 +129,16 @@
129 129 
                                <div class="ipu-list-item-text">调用数据请求，传入的参数先用于请求数据接口，得到的结果集用于解析模板得到html。</div>
130 130 
                            </div>
131 131 
                        </li>
132 
                        <li class="ipu-list-item" action="IframePlug">
133 
                            <div class="ipu-list-item-inner">
134 
                                <div class="ipu-list-item-title-row">
135 
                                    <div class="ipu-list-item-title">远程iframe调用插件</div>
136 
                                </div>
137 
                                <div class="ipu-list-item-text">
138 
                                    远程iframe页面调用插件
139 
                                </div>
140 
                            </div>
141 
                        </li>
132 142 
                    </ul>
133 143 
                </div>
134 144 
            </div>