Hihi, PostMessage HTML5 thật hấp dẫn

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down

Hihi, PostMessage HTML5 thật hấp dẫn

Bài gửi by nth on 09/03/12, 02:38 pm

Um, mình nói nó hấp dẫn là bởi vì làm hoài mà vẫn chưa hiểu được hết về nó nè.
Hôm trước, lần đầu thử nghiệm, mình gửi 1 message từ trang A qua trang B như sau:
Code javascript ở trang A:
var ifwin = window.open('@Url.Content("~/TestDD/b")');
function test() {
//alert('4');
//var ifwin = document.getElementById("iframea").contentWindow;

ifwin.postMessage('123', "*");
}

Và code javascript nhận tham số từ trang B:
if (window.addEventListener) {
window.addEventListener("message", hienThi, false);
}
else {
window.attachEvent("onmessage", hienThi(e));
}
function hienThi(thamSo) {
//alert('trang b: ' + thamSo);
debugger;
var id = thamSo.data;
alert(id);
}

Khi load trang A lên, trang A sẽ load 1 iframe bên trong, và nhấp vào button bên ngoài của trang A, trang A sẽ nhận tham số từ trang B gửi qua.

===== Thành viên Forum Thien Than CNTT ====
Nothing!

(~~/)
(~'.'~)
(_(__)~~

nth
Admin
Admin

Tổng số bài gửi: 550
Số điểm: 1113
Số lần được cám ơn: 33
Ngày đến diễn đàn:: 01/08/2009
Tuổi: 25
Đến từ: Thiên Đường

Xem lý lịch thành viên http://thuhuong.hot4um.com

Về Đầu Trang Go down

Re: Hihi, PostMessage HTML5 thật hấp dẫn

Bài gửi by nth on 09/03/12, 02:41 pm

Sau đó, mình lại tiếp tục gửi ngược tham số từ trang B qua Trang A, tức là gửi ngược lại từ trang con (B) sang con cha (A):
Code javascript từ trang con B như sau:
function test() {
var id = 1;
window.parent.postMessage(id, "*");
}

Và code js của trang A là:
function hienThi(thamSo) {
alert('trang a: ' + thamSo.data);
//alert(window.id);
var id = thamSo.data;
alert(id);
}

if (window.addEventListener) {
window.addEventListener("message", hienThi, false);
}
else {
window.attachEvent("onmessage", hienThi);

}

===== Thành viên Forum Thien Than CNTT ====
Nothing!

(~~/)
(~'.'~)
(_(__)~~

nth
Admin
Admin

Tổng số bài gửi: 550
Số điểm: 1113
Số lần được cám ơn: 33
Ngày đến diễn đàn:: 01/08/2009
Tuổi: 25
Đến từ: Thiên Đường

Xem lý lịch thành viên http://thuhuong.hot4um.com

Về Đầu Trang Go down

Re: Hihi, PostMessage HTML5 thật hấp dẫn

Bài gửi by nth on 09/03/12, 02:45 pm

Vì gửi từ trang con ra trang cha, nên mình dùng parent, nhưng khi mình load một cái popup, có thể hiểu là nếu như mình dang thực hiện trang A nằm trong 1 popup, và trang B là con của trang A(tức là popup trong popup), thì cần phải gửi tham số về trang đầu tiên. Khi đó, mình dùng parent nó không còn hiểu nữa. Cuối cùng, mình mới tìm thấy, cần gửi về trang đầu tiên, thì phải dùng top, chứ không phải là "parent":
window.top.postMessage(str);

Có thể tham khảo thêm bài viết về phần "top" này ở đây nè:
[You must be registered and logged in to see this link.]

===== Thành viên Forum Thien Than CNTT ====
Nothing!

(~~/)
(~'.'~)
(_(__)~~

nth
Admin
Admin

Tổng số bài gửi: 550
Số điểm: 1113
Số lần được cám ơn: 33
Ngày đến diễn đàn:: 01/08/2009
Tuổi: 25
Đến từ: Thiên Đường

Xem lý lịch thành viên http://thuhuong.hot4um.com

Về Đầu Trang Go down

Re: Hihi, PostMessage HTML5 thật hấp dẫn

Bài gửi by nth on 09/03/12, 02:49 pm

Quên mất, code html của trang A Razz:
<iframe id="iframea" src="@Url.Content("~/TestDD/b")"></iframe>
<button onclick="test();">Hien Thi</button>

và code html trang B:
<p id="pb">ppppppppppppppppp</p>

<button onclick="test();">b</button>

===== Thành viên Forum Thien Than CNTT ====
Nothing!

(~~/)
(~'.'~)
(_(__)~~

nth
Admin
Admin

Tổng số bài gửi: 550
Số điểm: 1113
Số lần được cám ơn: 33
Ngày đến diễn đàn:: 01/08/2009
Tuổi: 25
Đến từ: Thiên Đường

Xem lý lịch thành viên http://thuhuong.hot4um.com

Về Đầu Trang Go down

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang


Permissions in this forum:
Bạn không có quyền trả lời bài viết