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