كيف يمكنك النشر على iframe؟

StackOverflow https://stackoverflow.com/questions/168455

  •  03-07-2019
  •  | 
  •  

سؤال

كيف يمكنك نشر البيانات إلى iframe؟

هل كانت مفيدة؟

المحلول

يعتمد على ما تعنيه بـ "نشر البيانات".يمكنك استخدام HTML target="" صفة على أ <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 يحدث فقط عندما تقوم بإنشاء إطارات iframe الخاصة بك ديناميكيًا، وما إلى ذلك.باستخدام جافا سكريبت (هناك العمل هنا)، ولكن إذا كنت تستخدم ترميز HTML عادي، فلا بأس.السمة المستهدفة وأسماء الإطارات ليست بمثابة اختراق ذكي للنينجا؛على الرغم من أنه تم إهماله (وبالتالي لن يتم التحقق من صحته) في HTML 4 Strict أو XHTML 1 Strict، إلا أنه أصبح جزءًا من HTML منذ 3.2، وهو جزء رسمي من HTML5، ويعمل في كل متصفح تقريبًا منذ Netscape 3.

لقد تحققت من هذا السلوك باعتباره يعمل مع XHTML 1 Strict وXHTML 1 Transitional وHTML 4 Strict وفي "وضع المراوغات" مع عدم تحديد DOCTYPE، ويعمل في جميع الحالات باستخدام Internet Explorer 7.0.5730.13.تتكون حالة الاختبار الخاصة بي من ملفين، باستخدام 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>

سأكون مهتمًا جدًا بمعرفة أي متصفح لا يقوم بتشغيل هذه الأمثلة بشكل صحيح.

نصائح أخرى

يتم استخدام 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
يمكن أيضًا استخدام هذه الخاصية لإنتاج تجربة شبيهة بالآجاكس، خاصة في حالات مثل تحميل الملفات، وفي هذه الحالة يصبح إرسال النموذج إلزاميًا لتحميل الملفات

يمكن تعيين عرض وارتفاع iframe على 0، ويمكن إرسال النموذج مع تعيين الهدف إلى iframe، ويتم فتح مربع حوار التحميل قبل إرسال النموذج.لذا، فهو يسخر من عنصر تحكم ajax حيث لا يزال عنصر التحكم موجودًا في نموذج الإدخال jsp، مع فتح مربع حوار التحميل.

مثال

<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>

وهذه الوظيفة يخلق شكل مؤقت، ثم ترسل البيانات باستخدام مسج: 

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();
}

والهدف هو 'اسم' ATTR من الإطار من الهدف، والبيانات هو كائن 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;
}
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top