jQuery / जावास्क्रिप्ट: एक iframe की सामग्री तक पहुँचने

Question

मैं jQuery का उपयोग करके एक iframe के अंदर HTML में हेरफेर करना चाहूंगा।

मुझे लगा कि मैं jQuery फ़ंक्शन के संदर्भ को iframe के दस्तावेज़ के रूप में सेट करके ऐसा करने में सक्षम होऊंगा, कुछ इस तरह:

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

हालाँकि यह काम नहीं करता है। थोड़ा सा निरीक्षण मुझे दिखाता है कि चर तब तक frames['nameOfMyIframe']हैं undefinedजब तक कि मैं iframe को लोड करने के लिए थोड़ी देर प्रतीक्षा नहीं करता। हालाँकि, जब iframe लोड होता है तो चर सुलभ नहीं होते हैं (मुझे permission denied-type त्रुटियाँ मिलती हैं)।

क्या किसी को काम के बारे में पता है?

Comments

IFrame में क्या है - इसका src दूसरे डोमेन पर सेट है?

— जेम्स

अगर यह एक अन्य डोमेन है, तो क्या अभी भी इसकी सामग्री तक पहुंचने या किसी घटना को पंजीकृत करने का एक तरीका है

— adardesign

नहीं, क्योंकि यह क्रॉस-साइट स्क्रिप्टिंग होगी, जो सुरक्षा कारणों से निषिद्ध है। मेरा समाधान एक प्रॉक्सी का उपयोग करना था: अपनी स्वयं की साइट के माध्यम से IFRAME शब्दशः में HTML फ़ीड करें ताकि यह अब क्रॉस-साइट फ्रॉ mthe ब्राउज़र के परिप्रेक्ष्य में न हो।

— रीइनियरियरपोस्ट

यह अधिक क्रॉस-ब्राउज़र का उपयोग करने के .contentWindow.documentकी तुलना में .documentपर iframeतत्व। मैं उपरोक्त परिवर्तन का सुझाव दूंगा।

— एलन एच।

एक तरीका है क्रोम एक्सटेंशन

— मुहम्मद उमर

Answer 1

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

Comments

@Pacerier सबसे अच्छा दांव आपकी साइट पर iframe की सामग्री को प्रॉक्सी करना है, यदि आप कर सकते हैं ...

— Tracker1

@ Tracker1: क्या आप इस प्रॉक्सी समाधान को लागू करने के लिए किसी भी ढांचे / एपीआई / डिजाइन पैटर्न का सुझाव दे सकते हैं। उदाहरण या ट्यूटोरियल आदि के लिए कोई लिंक? मैंने खोज करने की कोशिश की है, लेकिन कोई नहीं मिला।

— उमर हयात

इस स्थिति में, उसका मतलब है कि http सर्वर का उपयोग करें जो आपके डोमेन के पृष्ठ को प्रॉक्सी के रूप में प्रस्तुत कर रहा है - तीसरी पार्टी साइट से सामग्री का अनुरोध करें और इसे क्लाइंट को http प्रतिक्रिया में आगे भेजें। जैसा कि आप शायद अनुमान लगा सकते हैं, यह आपकी साइट की जवाबदेही को जल्दी प्रभावित करता है क्योंकि पहले के समानांतर अनुरोधों को आपके सर्वर के साथ श्रृंखला में संभावित अड़चन के रूप में निष्पादित किया जाता है।

— रदरफोर्ड

@Pacerier संभावित रूप से स्वीकृत उत्तर में कोई भी विधि है: stackoverflow.com/questions/3076414/… या अन्य (जैसे प्रॉक्सी के रूप में अपने स्वयं के डोमेन का उपयोग करना), इस पर निर्भर करता है कि आप क्या हासिल करना चाहते हैं।

— मार्क अमेरी

रिकॉर्ड के लिए, मैं बस कुछ इसी तरह सेट करता हूं: यदि आप चाहते हैं कि परिणाम अविश्वसनीय रूप से धीमा न हो, तो बस अपने वेब सर्वर को सीधे मूल वेबसाइट पर परिसंपत्ति अनुरोधों (सीएसएस / जेएस / छवियां) के लिए सेट करें, इसलिए आपका प्रॉक्सी केवल HTML अनुरोधों का प्रबंधन करता है। मैं अभी लोकलहोस्ट के तहत एक दूर की साइट ब्राउज़ कर रहा हूं और यह बिल्कुल पारदर्शी है :)

— नीमजी

Answer 2

यदि <iframe>समान डोमेन से है, तो तत्व आसानी से सुलभ हैं

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

संदर्भ

Comments

एक ही मूल नीति के बारे में जानना महान है लेकिन यह वह उत्तर है जो ओपी चाहता था। अन्य उत्तर को सही के रूप में क्यों चुना गया?

— जेसन स्वेट

आपको अपने मूल में HTML प्राप्त करने के लिए एक प्रॉक्सी का उपयोग करना होगा। उदाहरण के लिए, johnchapman.name/…

— mhenry1384

@JasonSwett, मेरा अनुमान है कि ओपी की समस्या वास्तव में है same origin policy, जिस स्थिति में यह उत्तर उसके लिए कोई समाधान नहीं है।

— एविएव्स

@fizzbuzz तब आपको IFrame मिलता है उसी तरह आपको jQuery के साथ कोई अन्य आईडी-कम सामग्री मिलेगी: आप सीएसएस के साथ उपयुक्त <IFrame> टैग का चयन करें, यदि आवश्यक हो तो इसे संकीर्ण करने के लिए वर्ग नाम और विशेषता मान का उपयोग करें।

— शुभ अंक

आईफ्रेम के लिए सामग्री नामक कोई विधि नहीं है ।

— रेनन

Answer 3

आप .contents()jQuery की विधि का उपयोग कर सकते हैं ।

.contents()विधि को भी, एक iframe की सामग्री दस्तावेज़ प्राप्त करने के लिए इस्तेमाल किया जा सकता है, तो आइफ्रेम मुख्य पृष्ठ के रूप में एक ही डोमेन पर है।

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

Comments

मुझे बॉडी सेट न करने के लिए i फ्रेम कंटेंट प्राप्त करने की आवश्यकता है ..... जब मैं ऊपर करता हूं तो यह हमेशा काम नहीं करता है खाली शरीर

— जॉर्ज हन्ना

@ डार्कोज़ उम, वास्तव में यह उत्तर पहले आया था, इसलिए यदि कुछ भी हो, तो अन्य उत्तर की प्रतिलिपि थी

— माइक्रोफ्री

@DarkoZ: मूल टिप्पणी को छोड़ने से मुझे शर्म नहीं आई, लेकिन मैंने 30 सेकंड की बर्बादी की जैसे कि एक गैर-मुद्दे को समझने की कोशिश कर रहा था :) इसलिए एक पूरी तरह से जवाब देने के बारे में इस पूरी चर्चा को हटाना सबसे अच्छा हो सकता है।

— डेन डैस्कलेस्कु

भ्रम को रोकने के लिए टिप्पणियां हटा दी गईं। क्षमा याचना।

— Darko Z

Answer 4

यदि 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 के माध्यम से बाहरी पृष्ठ को संपादित किया जाए ...

Comments

बेशक, क्योंकि आपके सर्वर को उपयोगकर्ता के ब्राउज़र में दूरस्थ पृष्ठ नहीं मिल रहा है, कोई कुकीज़ को दूरस्थ पृष्ठ पर नहीं भेजा जाएगा। YMMV।

— मार्क फॉवलर

@ मार्क: यदि आप कर्ल एक्सटेंशन के साथ इसे लागू करते हैं, तो आप आसानी से कुकीज़, पोस्ट किए गए डेटा, HTTP हेडर और व्हाट्सएप भेज सकते हैं। php.net/manual/en/book.curl.php

— जौन

@geon: लेकिन ब्राउज़र आपकी PHP लिपि में विदेशी डोमेन के लिए कुकीज़ नहीं भेजेगा

— ysth

@basysmith सावधान रहें: एक कारण है कि क्यों same origin policyमौजूद है, और इस जवाब का प्रस्ताव इसके लिए प्रतिरक्षा नहीं है।

— एवेव्स

क्या ऐसा करना किसी भी तरह से अवैध है?

— टैल्बॉय

Answer 5

मुझे इस तरह से क्लीनर मिला:

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

Comments

मेरे बट को बचाया - मैं "$ (" # iframe ") का उपयोग करके पागल हो रहा था। सामग्री ()। ढूंढना ()" किसी कारण से काम नहीं कर रहा था ... दो लाइनों पर एक ही काम किया। डननो क्यों, लेकिन यह काम करता है।

— नीनम

Answer 6

उपयोग

iframe.contentWindow.document

के बजाय

iframe.contentDocument

Comments

बहुत बढ़िया जवाब। यह अन्य डोमेन में iFrames के लिए काम करता है। मैंने सफारी और फ़ायरफ़ॉक्स पर कंसोल में यह कोशिश की।

— अनिल मल्लावरप्पू

मेरा मानना ​​है कि यह केवल अन्य डोमेन के लिए काम करेगा यदि आप इसे कंसोल से कर रहे हैं। एक स्क्रिप्ट से, एक्सेस की अनुमति नहीं दी जाएगी।

— यिनक्रैश

यह स्वीकृत उत्तर होना चाहिए। मेरे जीवन को बचाया और काम करता है जब आईफ्रेम एक अलग डोमेन से होता है; हालांकि जैसा कि उल्लेख किया गया है, केवल कंसोल में।

— रेशमकीट

मेरे लिए iframe.contentWindow.document हमेशा काम नहीं करता है। और जब मुझे यह नहीं मिला कि $ (elem) .contents ()। get (0) करता है

— elewinso

आप ब्राउज़र कंसोल में "रूट डॉक्यूमेंट" चुन सकते हैं। जब आप "शीर्ष" चुनते हैं तो यह काम नहीं करेगा, क्रॉस-ऑरिजिन एक्सेस के रूप में। यदि आप iframe दस्तावेज़ की ओर से एक्सेस करना चुनते हैं, तो निश्चित रूप से यह आपको एक्सेस प्रदान करेगा। सिर्फ इसलिए कि आप ब्राउज़र नहीं हैं, लेकिन ब्राउज़र का स्वामी है।

— सेर्गेई

Answer 7

आपको एक इवेंट को 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 में एक पेज लोड कर रहे हैं जो कि एक अलग डोमेन से है, तो आप सुरक्षा प्रतिबंधों के कारण इसे एक्सेस नहीं कर पाएंगे।

Comments

यह एक अच्छा विचार है, वास्तव में मैं इसे वैसे ही आजमा रहा था जैसा आपने उत्तर दिया। हालांकि, यह इनकार की गई अनुमति के आसपास काम नहीं करता है (यह iframe सामान का उपयोग शुरू करने से पहले प्रतीक्षा करने के लिए मेरे होने का पता करता है)

— आरजे।

वास्तव में ... कभी नहीं, ऐसा लगता है कि यह करते हुए भी प्रतीक्षा की आवश्यकता है।

— आरजे।

तैयार फ़ंक्शन काम करता है। हालांकि, ऐसा लगता है कि यह लोडिंग खत्म करने के लिए iframe की सामग्री का इंतजार नहीं करता है - केवल मूल दस्तावेज के लिए भी जब iframe की सामग्री पर ही आमंत्रित किया जाता है। मैं कल्पना करता हूं कि यह उसी मूल नीति के कारण भी है।

— आरजे।

इस कोड पर नोटों की एक जोड़ी: आपको .document के बजाय iframe.contentDocument का उपयोग करना चाहिए, और आपको प्रतीक्षा से बचने के लिए (।) के बजाय .load () का उपयोग करना चाहिए। (एकदम सही, लेकिन बेहतर नहीं)

— रॉड्रिगो क्यूरो जूल 27'09

Answer 8

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

प्रलेखन

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>

Answer 9

मैं एक्सेस करने के लिए अन्य वेरिएंट का उपयोग करना पसंद करता हूं। माता-पिता से आपके पास बच्चे के iframe में परिवर्तनशील की पहुंच हो सकती है। $एक चर भी है और आप इसकी बस कॉल के लिए पहुँच प्राप्त कर सकते हैं window.iframe_id.$

उदाहरण के लिए, window.view.$('div').hide()सभी आईडी में आईडी 'दृश्य' के साथ छिपाएं

लेकिन, यह एफएफ में काम नहीं करता है। बेहतर संगतता के लिए आपको उपयोग करना चाहिए

$('#iframe_id')[0].contentWindow.$

Answer 10

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

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

क

Comments

हाँ। मुख्य फ्रेम लोड होने पर तैयार फ़ंक्शन निष्पादित करना शुरू कर देता है - जब आइफ्रेम लोड नहीं होता है। प्रतीक्षा समस्या का एक छोटा सा हिस्सा है, हालांकि लगता है। मुझे लगता है कि इसे क्रॉस-डोमेन सुरक्षा के साथ करना होगा।

— आरजे।

Answer 11

मैं एक नमूना कोड बनाता हूं। अब आप अलग-अलग डोमेन से आसानी से समझ सकते हैं कि आप iframe के कंटेंट को एक्सेस नहीं कर सकते हैं .. समान डोमेन से हम iframe कंटेंट को एक्सेस कर सकते हैं

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

Answer 12

मैं बिना किसी आईक्री के कंटेंट पाने की तलाश में यहाँ आ गया, इसलिए किसी और की तलाश में, यह सिर्फ है:

document.querySelector('iframe[name=iframename]').contentDocument

Answer 13

यह समाधान iFrame के समान काम करता है। मैंने एक PHP स्क्रिप्ट बनाई है जो अन्य वेबसाइट से सभी सामग्री प्राप्त कर सकती है, और सबसे महत्वपूर्ण हिस्सा यह है कि आप अपने कस्टम jQuery को उस बाहरी सामग्री पर आसानी से लागू कर सकते हैं। कृपया निम्नलिखित स्क्रिप्ट का उल्लेख करें जो अन्य वेबसाइट से सभी सामग्री प्राप्त कर सकती है और फिर आप अपने cusom jQuery / JS को भी लागू कर सकते हैं। इस सामग्री का उपयोग कहीं भी, किसी भी तत्व या किसी भी पेज के अंदर किया जा सकता है।

<div id='myframe'>

  <?php 
   /* 
    Use below function to display final HTML inside this div
   */

   //Display Frame
   echo displayFrame(); 
  ?>

</div>

<?php

/* 
  Function to display frame from another domain 
*/

function displayFrame()
{
  $webUrl = 'http://[external-web-domain.com]/';

  //Get HTML from the URL
  $content = file_get_contents($webUrl);

  //Add custom JS to returned HTML content
  $customJS = "
  <script>

      /* Here I am writing a sample jQuery to hide the navigation menu
         You can write your own jQuery for this content
      */
    //Hide Navigation bar
    jQuery(\".navbar.navbar-default\").hide();

  </script>";

  //Append Custom JS with HTML
  $html = $content . $customJS;

  //Return customized HTML
  return $html;
}

Answer 14

और भी अधिक मजबूती के लिए:

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

तथा

...
var frame_win = getIframeWindow( frames['nameOfMyIframe'] );

if (frame_win) {
  $(frame_win.contentDocument || frame_win.document).find('some selector').doStuff();
  ...
}
...