URLFrame与JS的交互
# FastWeb URLFrame与JS的交互
用户与FastWeb是通过网页浏览器去进行交互的，浏览器对JavaScript支持的特性使用户可以操作页面上的元素。根据上述方式，用户也可以直接使用JavaScript来操作FastWeb中的相关元素进行交互。以下将以URLFrame中的页面为例进行说明。在查看以下内容前，我们假设您已经会使用JavaScript与jQuery进行简单的程序编写。
参照快速上手的说明方式，创建一个模块，在其中放置URLFrame控件，在其中的HTML属性中输入以下信息。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录界面示例</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style type="text/css">
body {
background: #fff;
color: #5B5B5D;
font-family: "Microsoft YaHei", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif
}
* {
margin: 0;
margin: 0
}
.sucaihuo-container {
margin: 0 auto;
text-align: center;
overflow: hidden
}
.sucaihuo-header {
padding: 3em 190px 2em;
letter-spacing: -1px;
text-align: center
}
.sucaihuo-header h1 {
color: #404d5b;
font-weight: 600;
font-size: 2em;
line-height: 1;
margin-bottom: 0;
font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo,
"Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif
}
.sucaihuo-content {
min-height: 60vh;
height: 60vh;
font-size: 150%;
padding: 1em 0
}
.bgcolor-3 {
background: #e8e8e8
}
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.form-bg {
background: #00b4ef;
}
.form-horizontal {
background: #fff;
padding-bottom: 40px;
border-radius: 15px;
text-align: center;
}
.form-horizontal .heading {
display: block;
font-size: 35px;
font-weight: 700;
padding: 35px 0;
border-bottom: 1px solid #f0f0f0;
margin-bottom: 30px;
}
.form-horizontal .form-group {
padding: 0 40px;
margin: 0 0 25px 0;
position: relative;
}
.form-horizontal .form-control {
background: #f0f0f0;
border: none;
border-radius: 20px;
box-shadow: none;
padding: 0 20px 0 45px;
height: 40px;
transition: all 0.3s ease 0s;
}
.form-horizontal .form-control:focus {
background: #e0e0e0;
box-shadow: none;
outline: 0 none;
}
.form-horizontal .form-group i {
position: absolute;
top: 12px;
left: 60px;
font-size: 17px;
color: #c8c8c8;
transition: all 0.5s ease 0s;
}
.form-horizontal .form-control:focus+i {
color: #00b4ef;
}
.form-horizontal .fa-question-circle {
display: inline-block;
position: absolute;
top: 12px;
right: 60px;
font-size: 20px;
color: #808080;
transition: all 0.5s ease 0s;
}
.form-horizontal .fa-question-circle:hover {
color: #000;
}
.form-horizontal .main-checkbox {
float: left;
width: 20px;
height: 20px;
background: #11a3fc;
border-radius: 50%;
position: relative;
margin: 5px 0 0 5px;
border: 1px solid #11a3fc;
}
.form-horizontal .main-checkbox label {
width: 20px;
height: 20px;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
}
.form-horizontal .main-checkbox label:after {
content: "";
width: 10px;
height: 5px;
position: absolute;
top: 5px;
left: 4px;
border: 3px solid #fff;
border-top: none;
border-right: none;
background: transparent;
opacity: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.form-horizontal .main-checkbox input[type=checkbox] {
visibility: hidden;
}
.form-horizontal .main-checkbox input[type=checkbox]:checked+label:after {
opacity: 1;
}
.form-horizontal .text {
float: left;
margin-left: 7px;
line-height: 20px;
padding-top: 5px;
text-transform: capitalize;
}
.form-horizontal .btn {
float: right;
font-size: 14px;
color: #fff;
background: #00b4ef;
border-radius: 30px;
padding: 10px 25px;
border: none;
text-transform: capitalize;
transition: all 0.5s ease 0s;
}
@media only screen and (max-width: 479px) {
.form-horizontal .form-group {
padding: 0 25px;
}
.form-horizontal .form-group i {
left: 45px;
}
.form-horizontal .btn {
padding: 10px 20px;
}
}
</style>
</head>
<body>
<div class="sucaihuo-container">
<div class="demo form-bg" style="padding: 20px 0;">
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<form class="form-horizontal">
<p></p>
<img id="banner" src="files/logo.png" style="height: 100px; width: 120px;">
<span class="heading">用户登录</span>
<div class="form-group">
<input type="text" class="form-control" id="username" placeholder="用户名或邮箱">
<i class="fa fa-user"></i>
</div>
<div class="form-group help">
<input type="password" class="form-control" id="password" placeholder="密 码">
<i class="fa fa-lock"></i>
<a href="#" class="fa fa-question-circle"></a>
</div>
<div class="form-group">
<div class="main-checkbox">
<input type="checkbox" value="None" id="checkbox1" name="check" />
<label for="checkbox1"></label>
</div>
<span class="text">Remember me</span>
<a href="#" target="_self">
<button id="login" class="btn btn-default" onclick="loginInfo((this,'onclick'))">登录</button></a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script>
function msg() {
alert("你好");
}
function loginInfo(elmnt, event) {
var URLFrame = parent.Ext.getCmp("_URLFrame");
var params = [];
params = ["id=" + elmnt.id, "val=" + elmnt.value, "xevent=" + event];
if (params.length > 0) {
parent.ajaxRequest(URLFrame, 'login', params);
}
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
在模块的程序设计界面，Pascal程序的初始化语句中添加以下内容,此步骤十分重要且不能遗漏，否则会影响到接下来的交互效果。
UgURLFrame01.ClientEvents.UniEvents.Values['beforeInit'] := 'function beforeInit(sender, config){config.id = ''_URLFrame'';}';
1
在模块设计界面中额外放入相关的按钮、编辑框等测试性控件，最终构建完成的界面显示如下：
预览界面中可以看到一个常规的登录窗口。
# 1. 获取网页中的信息(Ajax交互)
可以通过程序的定义来获取到URLFrame中的内容与信息。比如我们可以从上述的页面中来获取到登录窗口的用户名与密码信息，在FastWeb中可通过以下的Pascal程序来实现：
//JScript
//单击\"获取网页用户名和密码\"按钮以获取网页中用户名和密码内容。
function UgBitBtn01OnClick(sender)
{
UniSession.AddJS("setTimeout(function(){parent.ajaxRequest(parent."
+ UgURLFrame01.JSName + ",'getusername',[\"username=\""
+" + parent."+UgURLFrame01.JSName+".iframe.contentWindow.document.getElementById('username').value,\"password=\""
+" + parent."+UgURLFrame01.JSName+".iframe.contentWindow.document.getElementById('password').value])},200);");
}
//ajaxRequest，通过请求的事件触发，完成信息的反馈
function UgURLFrame01OnAjaxEvent(sender,eventname,params)
{
if (eventname == "getusername")
{
UgEdit01.Text = params.Values["username"];
UgEdit02.Text = params.Values["password"];
}
else if ((eventname == "login"))
{
showmessage("你单击了网页中的 登录 按钮</br>"+params.text);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//PasScript
//单击"获取网页用户名和密码"按钮以获取网页中用户名和密码内容。
procedure UgBitBtn01OnClick(sender: tobject);
begin
UniSession.AddJS('setTimeout(function(){parent.ajaxRequest(parent.'
+ UgURLFrame01.JSName + ',''getusername'',["username="'
+' + parent.'+UgURLFrame01.JSName+'.iframe.contentWindow.document.getElementById(''username'').value,"password="'
+' + parent.'+UgURLFrame01.JSName+'.iframe.contentWindow.document.getElementById(''password'').value])},200);');
end;
//ajaxRequest，通过请求的事件触发，完成信息的反馈
procedure UgURLFrame01OnAjaxEvent(sender: tcomponent;eventname: string;params: tunistrings);
begin
if (eventname = 'getusername') Then
Begin
UgEdit01.Text := params.Values['username'];
UgEdit02.Text := params.Values['password'];
End
else if (eventname = 'login') Then
Begin
showmessage('你单击了网页中的 登录 按钮</br>'+params.text);
End;
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// Make sure to add code blocks to your code group
从上述的示例中可以看出，在程序中通过Unisession.AddJS的方式设置了一个JavaScript的ajax请求，延迟200ms触发，该请求搜索用户名与密码的元素中的值，并存储到对应的参数中，200ms触发后，可以从URLFrame的OnAjaxEvent中搜寻对应的事件名称，从其参数中获取相应的值。
接下来对上述的JavaScript抽离出来进行单独描述。
setTimeOut(function(){
parent.ajaxRequest(parent.OBC1,'getusername',
["username"=parent.OBC1.iframe.contentWindow.document.getElementById('username').value,
"password"=parent.OBC1.iframe.contemtWindow.document.getElementById('password').value])
},200);
1
2
3
4
5
2
3
4
5
setTimeout() 是属于 window 的方法，该方法用于在指定的毫秒数后调用函数或计算表达式。
parent.ajaxRequest()用于设置ajax请求。基本的语法格式如下：
parent.ajaxRequest(JSName,ajaxEventName,[param])
1
JSName：所选择要触发OnAjaxEvent事件的控件名称，此处使用控件的JSName来代替，比如'parent.' + URLFrame01.JSName。ajaxEventName，设定的ajaxEvent事件的名称，在后续触发的OnAjaxEvent事件中对应为eventname的值。[param]：设置的参数信息，其格式为["paramname1"=value1,"paramname2"=value2,...]，在OnAjaxEvent事件中存储在params中，可在Pascal程序的params.Values['paramname1']来进行调用。
将上述的JavaScript内容中的OBC1部分替换为URLFrame01.JSName就可将其运用至FastWeb中，替换后的显示样式如下：
//JScript
UniSession.AddJS("setTimeout(function(){parent.ajaxRequest(parent."
+ UgURLFrame01.JSName + ",'getusername',[\"username=\""
+" + parent."+UgURLFrame01.JSName+".iframe.contentWindow.document.getElementById('username').value,\"password=\""
+" + parent."+UgURLFrame01.JSName+".iframe.contentWindow.document.getElementById(""password"").value])},200);");
1
2
3
4
5
2
3
4
5
//PasScript
UniSession.AddJS('setTimeout(function(){parent.ajaxRequest(parent.'
+ UgURLFrame01.JSName + ',''getusername'',["username="'
+' + parent.'+UgURLFrame01.JSName+'.iframe.contentWindow.document.getElementById(''username'').value,"password="'
+' + parent.'+UgURLFrame01.JSName+'.iframe.contentWindow.document.getElementById(''password'').value])},200);');
1
2
3
4
5
2
3
4
5
// Make sure to add code blocks to your code group
# 2. 修改网页中的信息
通过FastWeb修改URLFrame中网页信息的操作相对较为简单，比如我们要修改网页中用户名和密码输入框中的内容，使用下述方式即可进行：
//JScript
//修改网页中的内容
function UgBitBtn02OnClick(sender)
{
//UniSession.AddJS(UgURLFrame01.JSName+".iframe.contentWindow.document.getElementById('password').setAttribute('value','"+UgEdit02.Text+"')");
UniSession.AddJS(UgURLFrame01.JSName+".iframe.contentWindow.document.getElementById('username').value=\""+UgEdit01.Text+"\"");
UniSession.AddJS(UgURLFrame01.JSName+".iframe.contentWindow.document.getElementById('password').value=\""+UgEdit02.Text+"\"");
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
//PasScript
//修改网页中的内容
procedure UgBitBtn02OnClick(sender: tobject);
begin
//UniSession.AddJS(UgURLFrame01.JSName+'.iframe.contentWindow.document.getElementById(''password'').setAttribute(''value'','''+UgEdit02.Text+''')');
UniSession.AddJS(UgURLFrame01.JSName+'.iframe.contentWindow.document.getElementById(''username'').value="'+UgEdit01.Text+'"');
UniSession.AddJS(UgURLFrame01.JSName+'.iframe.contentWindow.document.getElementById(''password'').value="'+UgEdit02.Text+'"');
end;
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
// Make sure to add code blocks to your code group
# 3. 触发网页中的JS事件
如果我们想在FastWeb的程序中来控制网页中的JS事件触发操作，可使用以下方式来执行。
//JScript
//执行网页中的登录按钮击事件,事件的JavaScript程序中如果有包含ajax请求，可同步触发FastWeb中URLFrame的OnAjaxEvent事件
function UgBitBtn03OnClick(sender)
{
UniSession.AddJS(UgURLFrame01.JSName+".iframe.contentWindow.document.getElementById('login').click()");
}
//ajaxRequest，通过请求的JS事件的触发，同步触发FastWeb中URLFrame的OnAjaxEvent事件，完成信息的反馈
function UgURLFrame01OnAjaxEvent(sender,eventname,params)
{
if (eventname == "getusername")
{
UgEdit01.Text = params.Values["username"];
UgEdit02.Text = params.Values["password"];
}
else if (eventname == "login")
{
showmessage("你单击了网页中的 登录 按钮</br>"+params.text);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//PasScript
//执行网页中的登录按钮击事件,事件的JavaScript程序中如果有包含ajax请求，可同步触发FastWeb中URLFrame的OnAjaxEvent事件
procedure UgBitBtn03OnClick(sender: tobject);
begin
UniSession.AddJS(UgURLFrame01.JSName+'.iframe.contentWindow.document.getElementById(''login'').click()');
end;
//ajaxRequest，通过请求的JS事件的触发，同步触发FastWeb中URLFrame的OnAjaxEvent事件，完成信息的反馈
procedure UgURLFrame01OnAjaxEvent(sender: tcomponent;eventname: string;params: tunistrings);
begin
if (eventname = 'getusername') Then
Begin
UgEdit01.Text := params.Values['username'];
UgEdit02.Text := params.Values['password'];
End
else if (eventname = 'login') Then
Begin
showmessage('你单击了网页中的 登录 按钮</br>'+params.text);
End;
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// Make sure to add code blocks to your code group
# 4. JS动态替换属性
如果需要动态替换HTML文本中的内容，可设置FastWeb的程序，使其向URLFrame中注入JS以实现图片替换的效果。
//JScript
//替换图片 利用JS进行直接修改
function UgBitBtn04OnClick(sender)
{
UniSession.AddJS(UgURLFrame01.JSName+".iframe.contentWindow.document.getElementById('banner').setAttribute('src','library/js/ml5-library/assets/bird.jpg')");
}
1
2
3
4
5
6
2
3
4
5
6
//PasScript
//替换图片 利用JS进行直接修改
procedure UgBitBtn04OnClick(sender: tobject);
begin
UniSession.AddJS(UgURLFrame01.JSName+'.iframe.contentWindow.document.getElementById(''banner'').setAttribute(''src'',''library/js/ml5-library/assets/bird.jpg'')');
end;
1
2
3
4
5
6
2
3
4
5
6
// Make sure to add code blocks to your code group
# 5. 执行网页中的JS方法
网页中的方法是以JavaScript的方式存在的，在FastWeb中可以通过Pascal的程序来注入JS调用的程序以实现JS方法的调用：
//JScript
//执行网页中的方法
function UgBitBtn06OnClick(sender)
{
UniSession.AddJS(UgURLFrame01.JSName+".iframe.contentWindow.msg()");
}
1
2
3
4
5
6
2
3
4
5
6
//PasScript
//执行网页中的方法
procedure UgBitBtn06OnClick(sender: tobject);
begin
UniSession.AddJS(UgURLFrame01.JSName+'.iframe.contentWindow.msg()');
end;
1
2
3
4
5
6
2
3
4
5
6
// Make sure to add code blocks to your code group