Làm thế nào để bạn đăng lên iframe?

229

Làm cách nào để bạn đăng dữ liệu lên khung nội tuyến?Làm thế nào để bạn đăng lên iframe?

2008-10-03 Murtaza Mandvi

356

Phụ thuộc ý bạn là "đăng dữ liệu". Bạn có thể sử dụng HTML target="" thuộc tính trên một thẻ <form />, vì vậy nó có thể đơn giản như:

<form action="do_stuff.aspx" method="post" target="my_iframe"> 
    <input type="submit" value="Do Stuff!" /> 
</form> 

<!-- when the form is submitted, the server response will appear in this iframe --> 
<iframe name="my_iframe" src="not_submitted_yet.aspx"></iframe>

Nếu đó không phải là nó, hoặc bạn là sau khi một cái gì đó phức tạp hơn, xin vui lòng chỉnh sửa câu hỏi của bạn để bao gồm thêm chi tiết.

Có lỗi đã biết với Internet Explorer chỉ xảy ra khi bạn đang tạo động iframe, v.v. sử dụng Javascript (có work-around here), nhưng nếu bạn đang sử dụng đánh dấu HTML thông thường, bạn vẫn ổn. Các thuộc tính mục tiêu và tên khung không phải là một số ninja thông minh hack; mặc dù nó không được chấp nhận (và do đó sẽ không xác nhận) trong HTML 4 Nghiêm ngặt hoặc XHTML 1 Nghiêm ngặt, nó là một phần của HTML kể từ 3.2, nó chính thức là một phần của HTML5 và nó hoạt động trong mọi trình duyệt kể từ Netscape 3.

Tôi đã xác minh hành vi này khi làm việc với XHTML 1 Nghiêm ngặt, XHTML 1 Chuyển tiếp, HTML 4 Nghiêm ngặt và ở chế độ "quirks" không có DOCTYPE được chỉ định và nó hoạt động trong mọi trường hợp sử dụng Internet Explorer 7.0.5730.13. Trường hợp thử nghiệm của tôi bao gồm hai tệp, sử dụng ASP cổ điển trên IIS 6; chúng được sao chép ở đây đầy đủ để bạn có thể xác minh hành vi này cho chính mình.

default.asp

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC 
    "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
    <head> 
    <title>Form Iframe Demo</title> 
    </head> 
    <body> 
    <form action="do_stuff.asp" method="post" target="my_frame"> 
    <input type="text" name="someText" value="Some Text" /> 
    <input type="submit" /> 
    </form> 
    <iframe name="my_frame" src="do_stuff.asp"> 
    </iframe> 
    </body> 
</html>

do_stuff.asp

<%@Language="JScript"%><?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC 
    "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
    <head> 
    <title>Form Iframe Demo</title> 
    </head> 
    <body> 
    <% if (Request.Form.Count) { %> 
    You typed: <%=Request.Form("someText").Item%> 
    <% } else { %> 
    (not submitted) 
    <% } %> 
    </body> 
</html>

tôi sẽ rất quan tâm để nghe nói về bất kỳ trình duyệt không chạy các ví dụ này một cách chính xác.

Nguồn

2008-10-03 19:28:18

Như đã chỉ ra dưới đây, mục tiêu về hình thức có thể không hoạt động trong IE7 vì bạn sẽ muốn kiểm tra đó. – NexusRex

@NexusRex - đã được thử nghiệm, và yep, nó hoạt động tốt trong IE7.:) –

+12

Vấn đề với IE 7 là nếu bạn tạo iframe bằng javascript, thẻ tên không được đặt (ngay cả khi bạn cố gắng đặt nó) tại sao mục tiêu bài đăng sẽ không thành công. Giải pháp cho IE7: http://stackoverflow.com/questions/2181385/ie-issue-submitting-form-to-an-iframe-using-javascript – mrD

Khung nội tuyến được sử dụng để nhúng tài liệu khác bên trong trang html.

Nếu biểu mẫu được gửi tới khung nội tuyến trong trang biểu mẫu, thì biểu mẫu có thể dễ dàng đạt được bằng cách sử dụng thuộc tính đích của thẻ.

Đặt thuộc tính đích của biểu mẫu thành tên của thẻ iframe.

<form action="action" method="post" target="output_frame"> 
    <!-- input elements here --> 
</form> 
<iframe name="output_frame" src="" id="output_frame" width="XX" height="YY"> 
</iframe>

nâng cao sử dụng mục tiêu iframe
Khách sạn này cũng có thể được sử dụng để tạo ra một ajax như kinh nghiệm, đặc biệt là trong những trường hợp như upload file, trong trường hợp này, nơi nó trở thành bắt buộc phải gửi biểu mẫu, để tải lên các tệp

Khung nội tuyến có thể được đặt thành chiều rộng và chiều cao là 0 và biểu mẫu có thể được gửi cùng với mục tiêu được đặt cho khung nội tuyến và hộp thoại tải mở trước khi gửi biểu mẫu. Vì vậy, nó mocks một điều khiển ajax như kiểm soát vẫn còn trên jsp hình thức đầu vào, với hộp thoại tải mở.

Exmaple

<script> 
$("#uploadDialog").dialog({ autoOpen: false, modal: true, closeOnEscape: false,     
      open: function(event, ui) { jQuery('.ui-dialog-titlebar-close').hide(); } }); 

function startUpload() 
{    
    $("#uploadDialog").dialog("open"); 
} 

function stopUpload() 
{    
    $("#uploadDialog").dialog("close"); 
} 
</script> 

<div id="uploadDialog" title="Please Wait!!!"> 
      <center> 
      <img src="/imagePath/loading.gif" width="100" height="100"/> 
      <br/> 
      Loading Details... 
      </center> 
</div> 

<FORM ENCTYPE="multipart/form-data" ACTION="Action" METHOD="POST" target="upload_target" onsubmit="startUpload()"> 
<!-- input file elements here--> 
</FORM> 

<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;" onload="stopUpload()"> 
     </iframe>

Nguồn

2012-06-21 04:46:15 kapil

Làm thế nào để bạn đăng lên iframe?

Trả lời

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