คุณโพสต์ข้อมูลไปยัง iframe ได้อย่างไร
คุณโพสต์ข้อมูลไปยัง iframe ได้อย่างไร
คำตอบ:
ขึ้นอยู่กับสิ่งที่คุณหมายถึงโดย "โพสต์ข้อมูล" คุณสามารถใช้target=""แอตทริบิวต์HTML บน<form />แท็กดังนั้นจึงอาจเป็นเรื่องง่ายเหมือน:
<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>
หากยังไม่ได้ดำเนินการหรือคุณมีความซับซ้อนมากกว่านี้โปรดแก้ไขคำถามของคุณเพื่อให้มีรายละเอียดมากขึ้น
มีข้อผิดพลาดที่รู้จักกับ Internet Explorer ที่จะเกิดขึ้นเฉพาะเมื่อคุณสร้าง iframes ของคุณแบบไดนามิก ฯลฯ โดยใช้ Javascript (มีการแก้ไขที่นี่ ) แต่ถ้าคุณใช้มาร์กอัพ HTML ธรรมดาคุณก็สบายดี แอตทริบิวต์เป้าหมายและชื่อเฟรมไม่ใช่แฮ็คนินจาที่ฉลาด แม้ว่าจะเลิกใช้แล้ว (และจะไม่ผ่านการตรวจสอบ) ใน HTML 4 Strict หรือ XHTML 1 Strict มันเป็นส่วนหนึ่งของ HTML ตั้งแต่ 3.2 แต่เป็นส่วนหนึ่งของ HTML5 อย่างเป็นทางการและทำงานได้ในเบราว์เซอร์ทุกชนิดตั้งแต่ Netscape 3
ฉันได้ตรวจสอบพฤติกรรมนี้ว่าทำงานกับ XHTML 1 Strict, XHTML 1 Transitional, HTML 4 Strict และใน "โหมด quirks" โดยไม่ได้ระบุ DOCTYPE และทำงานได้ในทุกกรณีโดยใช้ Internet Explorer 7.0.5730.13 กรณีทดสอบของฉันประกอบด้วยสองไฟล์โดยใช้ classic ASP บน IIS 6; พวกมันถูกสร้างขึ้นที่นี่เต็มรูปแบบเพื่อให้คุณสามารถตรวจสอบพฤติกรรมนี้ด้วยตัวคุณเอง
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>
ฉันสนใจที่จะได้ยินเบราว์เซอร์ใด ๆ ที่ไม่ทำงานตัวอย่างเหล่านี้อย่างถูกต้อง
target <form>หลังจากโพสต์แบบฟอร์มแล้วและฉันสามารถดูเนื้อหาใน iframe เป้าหมายได้ฉันต้องการให้ผู้ใช้มีตัวเลือกในการบันทึกเนื้อหานี้ลงในไฟล์ นี่คือสิ่งที่ฉันต้องการถาม แจ้งให้เราทราบหากต้องการความชัดเจนมากขึ้น
iframe ใช้เพื่อฝังเอกสารอื่นภายในหน้า html
หากฟอร์มนั้นจะถูกส่งไปยัง iframe ภายในหน้าแบบฟอร์มนั้นจะสามารถทำได้อย่างง่ายดายโดยใช้แอตทริบิวต์เป้าหมายของแท็ก
ตั้งค่าแอตทริบิวต์เป้าหมายของฟอร์มเป็นชื่อของแท็ก 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>
การใช้เป้าหมาย iframe ขั้นสูง
คุณสมบัตินี้สามารถใช้เพื่อสร้าง ajax like experience โดยเฉพาะในกรณีเช่นการอัปโหลดไฟล์ในกรณีที่จำเป็นต้องส่งแบบฟอร์มเพื่ออัปโหลดไฟล์
iframe สามารถตั้งค่าเป็นความกว้างและความสูงเป็น 0 และสามารถส่งแบบฟอร์มพร้อมชุดเป้าหมายเป็น iframe และเปิดกล่องโต้ตอบการโหลดก่อนส่งแบบฟอร์ม ดังนั้นมันจะทำการควบคุม ajax เมื่อตัวควบคุมยังคงอยู่ในรูปแบบอินพุต jsp โดยเปิดไดอะล็อกการโหลด
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>
ฟังก์ชั่นนี้สร้างรูปแบบชั่วคราวจากนั้นส่งข้อมูลโดยใช้ 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();
}
target คือ 'ชื่อ' attr ของ iFrame เป้าหมายและข้อมูลเป็นวัตถุ JS:
data={last_name:'Smith',first_name:'John'}
หากคุณต้องการเปลี่ยนอินพุตใน iframe ให้ส่งแบบฟอร์มจาก iframe นั้นให้ทำเช่นนี้
...
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();
}
...
โดยปกติคุณสามารถทำได้หากหน้าใน iframe มาจากจุดเริ่มต้นเดียวกัน แต่คุณสามารถเริ่ม Chrome ในโหมดแก้ไขข้อบกพร่องโดยไม่สนใจนโยบายต้นกำเนิดเดียวกันและทดสอบในหน้าใดก็ได้
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;
}