javascript - jQuery/जावास्क्रिप्ट: एक आईफ्रेम की सामग्री तक पहुंच




iframe same-origin-policy (8)

मैं jQuery का उपयोग कर आईफ्रेम के अंदर HTML को हेरफेर करना चाहता हूं।

मैंने सोचा कि मैं 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>

उपरोक्त एक उदाहरण है कि बिना किसी पहुंच के इफ्रैम के माध्यम से किसी बाहरी पृष्ठ को संपादित करना है ...


आप पेज.postMessage का उपयोग पृष्ठ और उसके आईफ्रेम (क्रॉस डोमेन या नहीं) के बीच फ़ंक्शन को कॉल करने के लिए कर सकते हैं।

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>

उपयोग

iframe.contentWindow.document

के बजाय

iframe.contentDocument

क्या आपने क्लासिक की कोशिश की है, जो कि jQuery के बिल्टिन तैयार फ़ंक्शन का उपयोग करके लोड को पूरा करने की प्रतीक्षा कर रहा है?

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

कश्मीर


मुझे लगता है कि आप जो कर रहे हैं वह वही मूल नीति के अधीन है। यह कारण हो सकता है कि आपको अनुमति क्यों मिल रही है त्रुटियों को अस्वीकार कर दिया गया है


मैं एक नमूना कोड बनाते हैं। अब आप आसानी से विभिन्न डोमेन से समझ सकते हैं कि आप iframe की सामग्री तक नहीं पहुंच सकते .. वही डोमेन हम iframe सामग्री तक पहुंच सकते हैं

मैं आपको अपना कोड साझा करता हूं, कृपया इस कोड को कंसोल की जांच करें। मैं कंसोल पर छवि स्रोत मुद्रित करता हूं। चार आईफ्रेम हैं, दो आईफ्रेम एक ही डोमेन से आ रहे हैं और अन्य दो अन्य डोमेन (तृतीय पक्ष) से ​​आते हैं। आप दो छवि स्रोत देख सकते हैं ( 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)}, सामग्री: फ़ंक्शन (ए) {वापसी m.nodeName (ए, "iframe")? a.contentDocument ...

) जो तीसरे पक्ष के आईफ्रेम से आ रहा है।

<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


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







same-origin-policy