2010-10-21 75 views
7

Tôi đang làm việc trên một dự án nhỏ trong JavaScript/jQuery.Tạo cửa sổ mới bằng cách sử dụng jquery

Để hiển thị các kết quả từ tính thực hiện trong javascript, tôi muốn mở một cửa sổ mới với một số nội dung được xác định trước và sửa đổi nội dung này để hiển thị kết quả: Im sử dụng mã như thế này:

var resultwindow = window.open('result.html') 
var doc = $('body', resultwindow.document); 
doc.append("<p>Result</p>") 

Điều này không hoạt động vì tài liệu kết quả chưa được tải khi tôi thêm nội dung, vì vậy nó được ghi đè bằng nội dung của 'result.html'.

Tôi cũng đã cố gắng

$(resultwindow.document).ready(function() { 
    // ... Fill result document here 
}) 

$(resultwindow.document).load(function() { 
    // ... Fill result document here 
}) 

nhưng ready() chỉ hoạt động trên các tài liệu hiện tại (nó được gọi là ngay lập tức, nếu tài liệu hiện nay đã được nạp), và load không được gọi là tất cả.

Có lẽ ai đó có thể chỉ cho tôi đúng hướng. Cảm ơn trước!

EDIT:

cuối cùng tôi giải quyết điều này bằng cách tạo ra các tài liệu mới "bằng tay" trong Javascript như:

w = window.open('','newwinow','width=800,height=600,menubar=1,status=0,scrollbars=1,resizable=1); 
d = w.document.open("text/html","replace"); 
d.writeln('<html><head>' + 
    '<link rel="stylesheet" type="text/css" href="style.cs"/></head>' + 
    +'<body></body></html>'); 
// use d to manipulate DOM of new document and display results 

Nếu tôi được làm điều tương tự ngày hôm nay (hai năm kinh nghiệm sau này), tôi sẽ sử dụng một số thư viện mẫu Javascript như Handlebars để duy trì mẫu và biên dịch nó thành javscript.

+0

Martin bạn có làm việc này không? Tôi có một vấn đề tương tự. – Shaunak

+0

@Shaunak Tôi đã đăng giải pháp của mình từ hai năm trước như là chỉnh sửa cho câu hỏi, cũng đã đề cập đến cách tôi sẽ giải quyết nó hôm nay ... hth. – MartinStettner

Trả lời

0

Gửi dữ liệu đến result.html trong chuỗi truy vấn và sau đó có result.html hiển thị dữ liệu từ đó. Nếu bạn muốn ít rõ ràng hơn về nó đi qua bạn có thể băm dữ liệu trong chuỗi truy vấn và có trang kết quả khử nó.

+0

Phần mềm cũng sẽ hoạt động ngoại tuyến ngay từ hệ thống tệp (nghĩa là không có bất kỳ máy chủ web nào). Vì vậy, đề xuất của bạn không phải là một lựa chọn, tôi nghĩ vậy. Dù sao cũng cảm ơn bạn. – MartinStettner

+0

Không chắc chắn lý do tại sao bạn muốn xây dựng một trang web hoặc một loạt các trang web không thực sự sống trên một số loại máy chủ web. – Harv

1

Sự cố bạn gặp phải là load() không làm những gì bạn nghĩ.

Thay vào đó, hãy sử dụng bind("load", function() { /* Your function here */ }); khi đó mọi thứ nên hoạt động.


Correction:

load() thực sự là một chức năng kép sử dụng - nếu nó được gọi với một chức năng như tham số đầu tiên của nó, sau đó nó sẽ gắn nó vào sự kiện load của đối tượng (hoặc đối tượng) trong câu hỏi, nếu không nó sẽ tải dữ liệu trả về (nếu có) vào các phần tử được đề cập. Xem câu trả lời của Josh cho số điện thoại thực lý do tại sao nó không hoạt động.

+1

Sai. ['Load'] (http://api.jquery.com/load-event/) trong jQuery đủ thông minh. Nó cháy dựa trên các thông số được truyền vào. Vì vậy, nếu bạn chỉ chuyển một hàm, nó biết rằng bạn có nghĩa là sự kiện onload. Nếu bạn chuyển tất cả các tham số cần thiết cho một cuộc gọi AJAX, nó sẽ thực hiện điều đó. –

+0

Vì vậy, nó sai hay chỉ là cú pháp dài hơn? – Harv

+0

@Harv Điều đó là sai. Tải nên đã làm việc tốt cho OP, và có một lý do nó không. Xem câu trả lời của tôi cho một lời giải thích chi tiết. –

2

Gọi load của bạn không hoạt động vì bạn đang cố gắng xử lý tải của document và có thể tài liệu thậm chí không tồn tại tại thời điểm này. Điều đó có nghĩa là bạn đang bỏ qua null vào jQuery, và nó duyên dáng bỏ qua bạn. Thay vào đó, hãy xử lý sự kiện tải của tham chiếu cửa sổ thô và sau đó bạn nên làm tốt ...

var win = window.open("result.html"); 
$(win).load(function() { 
    $("body").append("<p>Result</p>"); 
}); 
+0

Thật không may, trình xử lý sự kiện không bao giờ được gọi. Ngoài ra trình gỡ lỗi cho thấy rằng - ít nhất trong Chrome - đối tượng tài liệu đã tồn tại nhưng trống ("about: blank"). – MartinStettner

Các vấn đề liên quan