javascript - page - w3schools how to




jQuery/JavaScript: الوصول إلى محتويات iframe (8)

أجد هذه الطريقة أنظف:

var $iframe = $("#iframeID").contents();
$iframe.find('selector');

أرغب في معالجة HTML داخل iframe باستخدام jQuery.

اعتقدت أنني سأكون قادرًا على القيام بذلك عن طريق تعيين سياق وظيفة jQuery لتكون وثيقة iframe ، وهو ما يشبه:

$(function(){ //document ready
    $('some selector', frames['nameOfMyIframe'].document).doStuff()
});

لكن هذا لا يبدو ناجحا. تبين لي قليلاً من الفحص أن المتغيرات في frames['nameOfMyIframe'] undefined ما لم أنتظر بعض الوقت حتى يتم تحميل iframe. ومع ذلك ، عندما يحمّل iframe لا يمكن الوصول إلى المتغيرات (أحصل على permission denied نوع من الأخطاء).

لا أحد يعرف من حول هذا العمل؟


أعتقد أن ما تقوم به يخضع لنفس سياسة الأصل . يجب أن يكون هذا هو سبب حصولك على إذن لنفي نوع الأخطاء.


أنا إنشاء نموذج التعليمة البرمجية. الآن يمكنك أن تفهم بسهولة من نطاق مختلف لا يمكنك الوصول إلى محتوى iframe .. نفس المجال يمكننا الوصول إلى محتوى iframe

أشارككم رمز بلدي ، يرجى تشغيل هذا الرمز التحقق من وحدة التحكم. أنا طباعة صورة src في وحدة التحكم. هناك أربعة إطارات iframe ، وهما iframe قادمان من نفس النطاق ، والآخران من نطاق آخر (طرف ثالث). يمكنك مشاهدة صورتين src ( https://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif

و

https://www.google.com/logos/doodles/2015/arbor-day-2015-brazil-5154560611975168-hp2x.gif ) في وحدة التحكم ويمكن أيضًا الاطلاع على خطأ الإذن (خطأ 2: تم رفض الإذن للوصول إلى مستند "الموقع") '

... irstChild)} ، محتويات: وظيفة (أ) {return m.nodeName (a، "iframe")؟ a.contentDocument ...

) التي تأتي من iframe لجهة خارجية.

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<p>iframe from same domain</p>
  <iframe frameborder="0" scrolling="no" width="500" height="500"
   src="iframe.html" name="imgbox" class="iView">

</iframe>
<p>iframe from same domain</p>
<iframe frameborder="0" scrolling="no" width="500" height="500"
   src="iframe2.html" name="imgbox" class="iView1">

</iframe>
<p>iframe from different  domain</p>
 <iframe frameborder="0" scrolling="no" width="500" height="500"
   src="https://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif" name="imgbox" class="iView2">

</iframe>

<p>iframe from different  domain</p>
 <iframe frameborder="0" scrolling="no" width="500" height="500"
   src="http://d1rmo5dfr7fx8e.cloudfront.net/" name="imgbox" class="iView3">

</iframe>

<script type='text/javascript'>


$(document).ready(function(){
    setTimeout(function(){


        var src = $('.iView').contents().find(".shrinkToFit").attr('src');
    console.log(src);
         }, 2000);


    setTimeout(function(){


        var src = $('.iView1').contents().find(".shrinkToFit").attr('src');
    console.log(src);
         }, 3000);


    setTimeout(function(){


        var src = $('.iView2').contents().find(".shrinkToFit").attr('src');
    console.log(src);
         }, 3000);

         setTimeout(function(){


        var src = $('.iView3').contents().find("img").attr('src');
    console.log(src);
         }, 3000);


    })


</script>
</body>

إذا كان <iframe> من نفس المجال ، فيمكن الوصول إلى العناصر بسهولة

$("#iFrame").contents().find("#someDiv").removeClass("hidden");

Reference


استعمال

iframe.contentWindow.document

بدلا من

iframe.contentDocument

تحتاج إلى إرفاق حدث إلى معالج onload الخاص بـ iframe ، وتنفيذ js هناك ، حتى تتأكد من الانتهاء من تحميل iframe قبل الوصول إليه.

$().ready(function () {
    $("#iframeID").ready(function () { //The function below executes once the iframe has finished loading
        $('some selector', frames['nameOfMyIframe'].document).doStuff();
    });
};

سيحل ما ورد أعلاه مشكلة "لم يتم تحميلها بعد" ، ولكن فيما يتعلق بالأذونات ، إذا كنت تحمّل صفحة في iframe من نطاق مختلف ، فلن تتمكن من الوصول إليه بسبب قيود الأمان.


يمكنك استخدام window.postMessage لاستدعاء دالة بين الصفحة وإطار iframe (عبر النطاق أم لا).

Documentation

page.html

<!DOCTYPE html>
<html>
<head>
    <title>Page with an iframe</title>
    <meta charset="UTF-8" />
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
    var Page = {
        id:'page',
        variable:'This is the page.'
    };

    $(window).on('message', function(e) {
        var event = e.originalEvent;
        if(window.console) {
            console.log(event);
        }
        alert(event.origin + '\n' + event.data);
    });
    function iframeReady(iframe) {
        if(iframe.contentWindow.postMessage) {
            iframe.contentWindow.postMessage('Hello ' + Page.id, '*');
        }
    }
    </script>
</head>
<body>
    <h1>Page with an iframe</h1>
    <iframe src="iframe.html" onload="iframeReady(this);"></iframe>
</body>
</html>

iframe.html

<!DOCTYPE html>
<html>
<head>
    <title>iframe</title>
    <meta charset="UTF-8" />
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
    var Page = {
        id:'iframe',
        variable:'The iframe.'
    };

    $(window).on('message', function(e) {
        var event = e.originalEvent;
        if(window.console) {
            console.log(event);
        }
        alert(event.origin + '\n' + event.data);
    });
    $(window).on('load', function() {
        if(window.parent.postMessage) {
            window.parent.postMessage('Hello ' + Page.id, '*');
        }
    });
    </script>
</head>
<body>
    <h1>iframe</h1>
    <p>It's the iframe.</p>
</body>
</html>

$(document).ready(function(){
    $('#frameID').load(function(){
        $('#frameID').contents().find('body').html('Hey, i`ve changed content of <body>! Yay!!!');
    });
});






same-origin-policy