Giả sử bi giờ chúng ta có 2 cửa sổ trình duyệt. Cửa sổ mẹ cần lấy một ít dữ liệu từ cửa sổ con. Vậy thì làm thế nào để lấy được bây giờ? Điều này khá đơn giản với Javascript.
Đầu tiên ta xây dựng cái cửa sổ mẹ.
Ở đây tôi để một phần tử có id là thumotti trên cửa sổ mẹ. Phần tử này sẽ hiển thị nội dung lấy từ một cái thẻ HTML nào đó của cái cửa sổ con: <div id="thumotti"></div> Tiếp đó, trên cửa sổ mẹ, ta tạo ra một cái đoạn javascript để khi phát sinh sự kiện onclick trên một thẻ nào đó thì nó sẽ đẻ ra cái cửa sổ con: <script language="javascript"> function ShowDialog() { window.open('test.htm',';D','scrollbars=1, width=450,height=400'); } </script> Bây giờ ta định nghĩa một cái liên kết mà khi kích chuột vào nó thì hệ thống sẽ gọi đến hàm javascript trên để "đẻ" ra cửa sổ con: <a onclick=ShowDialog();>Đẻ ra con đi nào</a> Rồi, thế là xong phần "cửa sổ mẹ", bây giờ chúng ta tạo ra thằng con, với cái tên là test.htm (như trong đoạn javascript trên). File này chứa một cái trời đất gì trên đó cũng được. Đây có thể là một cái trang PHP để giao tiếp với CSDL, sau khi thực hiện chán chê các thao tác với CSDL thì ta cần truyền lại cái gì đó cho "cửa sổ mẹ". Để cho đơn giản thì tôi tạo mỗi một cái thẻ <div> với id là "conday" và nhét vài thứ linh tinh vào đó, và nhiệm vụ của tôi là lấy nội dung từ thẻ div của "cửa sổ con" để trả về cho "cửa sổ mẹ". Tạo thẻ div với id là conday trên cửa sổ con: <div id="conday">Hi, hello, I'm <b><i>CMXQ</i></b></div> Đoạn code javascript sau đây sẽ trả về nội dung của thẻ div có id là "thumotti" trên "cửa sổ mẹ": <script language='javascript'> function xong() { opener.document.getElementById('thumotti').innerHTML=document. getElementById('conday').innerHTML; close(); } </script> Tạo một nút để click chuyển dữ liệu từ "cửa sổ con" sang "cửa sổ mẹ" Trên Mozilla Firefox: <input type='button' name = 'button' value='Đã xong' onclick='xong();'> Trên Internet Explorer: <FORM><INPUT type="button" value="New Window!" onClick="window. open('http://www.pageresource.com/jscript/jex5.htm','mywindow','width=400, height=200')"></FORM> Ghi chú: Mọi thẻ HTML nếu có id thì đều có thể tìm đến nó để nghịch ngợm thông qua một DOM object có tên là document (sử dụng phương thức getElementById). Để lấy hoặc thiết lập nội dung của thẻ đó, ta sử dụng thuộc tính innerHTML: document.getElementById('thumotti').innerHTML="xyz"; opener.document.getElementById('thumotti').innerHTML: chính là giá trị thẻ HTML có ID là thumoti của trang mở cái popup đó ra (trang mẹ). |
Thêm vào trang Google +
Số lần xem : 6340
Đánh giá