مميزات - كيفية الحصول على محتوى الجسم لإطار iframe في Javascript؟




مميزات الجافا سكريبت (6)

Chalkey صحيح ، تحتاج إلى استخدام السمة src لتحديد الصفحة التي سيتم تضمينها في iframe. عند القيام بذلك ، ويكون المستند الموجود في iframe في نفس المجال مثل المستند الأصل ، يمكنك استخدام هذا:

var e = document.getElementById("id_description_iframe");
if(e != null) {
   alert(e.contentWindow.document.body.innerHTML);
}

من الواضح أنه يمكنك بعد ذلك عمل شيء مفيد مع المحتويات بدلاً من وضعها في تنبيه.

<iframe id="id_description_iframe" class="rte-zone" height="200" frameborder="0" title="description">
  <html>
    <head></head>
    <body class="frameBody">
      test<br/>
    </body>
  </html>
</iframe>

ما أريد الحصول عليه هو:

test<br/>

أعتقد أن وضع النص بين العلامات محجوز للمتصفحات التي لا تستطيع التعامل مع iframes بمعنى ..

<iframe src ="html_intro.asp" width="100%" height="300">
  <p>Your browser does not support iframes.</p>
</iframe>

تستخدم السمة "src" لتعيين مصدر iframes html ...

امل ان يساعد :)


التعليمة البرمجية التالية متوافقة مع المتصفحات المتقاطعة. وهي تعمل في IE7 و IE8 و Fx 3 و Safari و Chrome ، لذلك لا داعي للتعامل مع مشكلات المتقاطعة عبر المتصفح. لم اختبار في IE6.

<iframe id="iframeId" name="iframeId">...</iframe>

<script type="text/javascript">
    var iframeDoc;
    if (window.frames && window.frames.iframeId &&
        (iframeDoc = window.frames.iframeId.document)) {
        var iframeBody = iframeDoc.body;
        var ifromContent = iframeBody.innerHTML;
    }
</script>

السؤال الدقيق هو كيفية القيام بذلك مع جافا سكريبت نقية وليس مع jQuery.

لكنني دائما استخدم الحل الذي يمكن العثور عليه في كود مصدر jQuery. انها مجرد خط واحد من جافا سكريبت الأصلي.

بالنسبة لي ، إنها أفضل وسيلة سهلة القراءة ، بل يمكنك الوصول إلى طريقة afaik لأقصر طريقة للحصول على محتوى iframes.

احصل أولاً على iframe

var iframe = document.getElementById('id_description_iframe');

// or
var iframe = document.querySelector('#id_description_iframe');

ثم استخدم حل jQuery

var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

يعمل حتى في Internet Explorer الذي يقوم بهذه الخدعة أثناء خاصية contentWindow لكائن iframe . تستخدم معظم المتصفحات الأخرى خاصية contentDocument وهذا هو سبب contentDocument لهذه الخاصية أولاً في شرط OR هذا. إذا لم يتم ضبطه ، فجرّب contentWindow.document .

حدد العناصر في iframe

ثم يمكنك عادة استخدام getElementById() أو حتى querySelectorAll() لتحديد DOM-Element من iframeDocument :

if (!iframeDocument) {
    throw "iframe couldn't be found in DOM.";
}

var iframeContent = iframeDocument.getElementById('frameBody');

// or
var iframeContent = iframeDocument.querySelectorAll('#frameBody');

وظائف الاتصال في iframe

احصل فقط على عنصر window من iframe لاستدعاء بعض الوظائف أو المتغيرات العامة أو المكتبات العامة (مثل jQuery ):

var iframeWindow = iframe.contentWindow;

// you can even call jQuery or other frameworks
// if it is loaded inside the iframe
iframeContent = iframeWindow.jQuery('#frameBody');

// or
iframeContent = iframeWindow.$('#frameBody');

// or even use any other global variable
iframeWindow.myVar = window.myVar;

// or call a global function
var myVar = iframeWindow.myFunction(param1 /*, ... */);

ملحوظة

كل هذا ممكن إذا لاحظت نفس سياسة الأصل .


لا يمكن استخدام AFAIK ، Iframe بهذه الطريقة. تحتاج إلى توجيه السمة src الخاصة به إلى صفحة أخرى.

فيما يلي كيفية الحصول على محتوى جسمه باستخدام جافا سكريبت قديمة مستوية. هذا يعمل مع كل من IE و Firefox.

function getFrameContents(){
   var iFrame =  document.getElementById('id_description_iframe');
   var iFrameBody;
   if ( iFrame.contentDocument ) 
   { // FF
     iFrameBody = iFrame.contentDocument.getElementsByTagName('body')[0];
   }
   else if ( iFrame.contentWindow ) 
   { // IE
     iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0];
   }
    alert(iFrameBody.innerHTML);
 }

يعمل بشكل مثالي بالنسبة لي:

document.getElementById('iframe_id').contentWindow.document.body.innerHTML;




iframe