same-origin-policy - jQuery / JavaScript:الوصول إلى محتويات iframe




(10)

يمكنك استخدام 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>

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

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

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

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

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


إذا كان iframe src من نطاق آخر ، فلا يزال بإمكانك تنفيذه. تحتاج إلى قراءة الصفحة الخارجية في PHP وترددها من نطاقك. مثله:

iframe_page.php

<?php
    $URL = "http://external.com"

    $domain = file_get_contents($URL)

    echo $domain
?>

ثم شيء من هذا القبيل:

display_page.html

<html>
<head>
  <title>Test</title>
 </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script>

$(document).ready(function(){   
    cleanit = setInterval ( "cleaning()", 500 );
});

function cleaning(){
    if($('#frametest').contents().find('.selector').html() == "somthing"){
        clearInterval(cleanit);
        $('#selector').contents().find('.Link').html('ideate tech');
    }
}

</script>

<body>
<iframe name="frametest" id="frametest" src="http://yourdomain.com/iframe_page.php" ></iframe>
</body>
</html>

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


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

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

Reference


أنا إنشاء نموذج التعليمة البرمجية. الآن يمكنك أن تفهم بسهولة من نطاق مختلف لا يمكنك الوصول إلى محتوى 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>

هل جربت الكلاسيكية ، في انتظار استكمال الحمولة باستخدام وظيفة جاهزة في jQuery المدمج؟

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

ك


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

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


تحتاج إلى إرفاق حدث إلى معالج 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 من نطاق مختلف ، فلن تتمكن من الوصول إليه بسبب قيود الأمان.


استعمال

iframe.contentWindow.document

بدلا من

iframe.contentDocument

تم تقديم String.prototype.includes() في ES6.

يحدد ما إذا كان يمكن العثور على سلسلة واحدة داخل سلسلة أخرى ، وإرجاع صواب أو خطأ كما هو مناسب.

بناء الجملة

var contained = str.includes(searchString [, position]);  

المعلمات

searchString

سلسلة يتم البحث عنها ضمن هذه السلسلة.

position

الموضع في هذه السلسلة التي تبدأ searchString البحث عن searchString الافتراضي إلى 0.

مثال

var str = "To be, or not to be, that is the question.";

console.log(str.includes("To be"));    // true
console.log(str.includes("question")); // true
console.log(str.includes("To be", 1)); // false  

ملحوظة

هذا قد يتطلب ES6 الرقائق في المتصفحات القديمة.





javascript jquery iframe same-origin-policy