Làm thế nào để bạn đăng dữ liệu lên iframe?
Làm thế nào để bạn đăng dữ liệu lên iframe?
Câu trả lời:
Phụ thuộc những gì bạn có nghĩa là "dữ liệu bài". Bạn có thể sử dụng target=""thuộc tính HTML trên <form />thẻ, 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 sau 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 chi tiết hơn.
Có một lỗi đã biết với Internet Explorer chỉ xảy ra khi bạn tự động tạo iframe của mình, v.v. bằng Javascript (có cách khắc phục ở đây ), nhưng nếu bạn đang sử dụng đánh dấu HTML thông thường, bạn vẫn ổn. Thuộc tính mục tiêu và tên khung không phải là một hack ninja thông minh; mặc dù nó không được chấp nhận (và do đó sẽ không xác thực) trong HTML 4 Strict hoặc XHTML 1 Strict, 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 là hoạt động với XHTML 1 Strict, XHTML 1 Transpose, HTML 4 Strict và trong "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ể tự xác minh hành vi này.
mặc định
<?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_ ware.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 thích thú khi nghe về bất kỳ trình duyệt nào không chạy các ví dụ này một cách chính xác.
targetthuộc tính cho html <form>. Sau khi biểu mẫu đã được đăng và tôi có thể thấy nội dung trong iframe đích, tôi muốn cung cấp cho người dùng một tùy chọn để lưu nội dung này vào một tệp. Đây là những gì tôi muốn hỏi. Hãy cho tôi biết nếu điều này cần rõ ràng hơn.
Một iframe được sử dụng để nhúng một tài liệu khác trong trang html.
Nếu biểu mẫu được gửi tới iframe trong trang biểu mẫu, thì có thể dễ dàng đạt được nó 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>
Sử dụng mục tiêu iframe nâng cao
Thuộc tính này cũng có thể được sử dụng để tạo trải nghiệm như ajax, đặc biệt là trong các trường hợp như tải lên tệp, trong trường hợp 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 bằng 0 và có thể gửi biểu mẫu với mục tiêu được đặt thành iframe và hộp thoại tải được mở trước khi gửi biểu mẫu. Vì vậy, nó giả định điều khiển ajax vì điều khiển vẫn còn trên jsp mẫu đầu vào, với hộp thoại tải mở.
Sơ đồ
<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>
Hàm này tạo một biểu mẫu tạm thời, sau đó gửi dữ liệu bằng jQuery:
function postToIframe(data,url,target){
$('body').append('<form action="'+url+'" method="post" target="'+target+'" id="postToIframe"></form>');
$.each(data,function(n,v){
$('#postToIframe').append('<input type="hidden" name="'+n+'" value="'+v+'" />');
});
$('#postToIframe').submit().remove();
}
đích là attr 'name' của iFrame đích và dữ liệu là một đối tượng JS:
data={last_name:'Smith',first_name:'John'}
Nếu bạn muốn thay đổi đầu vào trong iframe thì hãy gửi biểu mẫu từ iframe đó, hãy làm điều này
...
var el = document.getElementById('targetFrame');
var doc, frame_win = getIframeWindow(el); // getIframeWindow is defined below
if (frame_win) {
doc = (window.contentDocument || window.document);
}
if (doc) {
doc.forms[0].someInputName.value = someValue;
...
doc.forms[0].submit();
}
...
Thông thường, bạn chỉ có thể làm điều này nếu trang trong iframe có cùng nguồn gốc, nhưng bạn có thể khởi động Chrome ở chế độ gỡ lỗi để bỏ qua chính sách gốc tương tự và kiểm tra điều này trên bất kỳ trang nào.
function getIframeWindow(iframe_object) {
var doc;
if (iframe_object.contentWindow) {
return iframe_object.contentWindow;
}
if (iframe_object.window) {
return iframe_object.window;
}
if (!doc && iframe_object.contentDocument) {
doc = iframe_object.contentDocument;
}
if (!doc && iframe_object.document) {
doc = iframe_object.document;
}
if (doc && doc.defaultView) {
return doc.defaultView;
}
if (doc && doc.parentWindow) {
return doc.parentWindow;
}
return undefined;
}