जावास्क्रिप्ट में एक आइफ्रेम के शरीर की सामग्री कैसे प्राप्त करें?

154 
<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/>
javascript  html  iframe 
— हे भगवान
स्रोत
52
महत्वपूर्ण नोट: यदि यह क्रॉस-डोमेन है तो आप iFrame की सामग्री का उपयोग नहीं कर सकते। समान-मूल नीति देखें ।
— हेलामद

जवाबों:

154

सटीक सवाल यह है कि इसे शुद्ध जावास्क्रिप्ट के साथ कैसे किया जाए 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;

यह इंटरनेट एक्सप्लोरर में भी काम करता है जो ऑब्जेक्ट की contentWindowसंपत्ति के दौरान यह ट्रिक करता है iframe। अधिकांश अन्य ब्राउज़र contentDocumentसंपत्ति का उपयोग करते हैं और यही कारण है कि हम इस संपत्ति को पहले या इस स्थिति में प्रमाण देते हैं। यदि यह सेट करने की कोशिश नहीं है contentWindow.document।

Iframe में तत्वों का चयन करें

तब आप आमतौर पर DOM-Element का चयन getElementById()करने के querySelectorAll()लिए उपयोग कर सकते हैं या यहां तक कि iframeDocument:

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

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

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

आईफ्रेम में कॉल फ़ंक्शन

कुछ वैश्विक कार्यों, चर या संपूर्ण पुस्तकालयों (जैसे ) को कॉल करने के लिए बस 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 /*, ... */);

ध्यान दें

यह सब संभव है यदि आप एक ही मूल नीति का पालन ​​करते हैं ।

— algorhythm
स्रोत
2
iframe यहां अपरिभाषित है, या तो आपको पूर्ण कोड लिखना चाहिए या इसके साथ jQuery नहीं लिखना चाहिए
— तरुण गुप्ता
13
कृपया मुझे क्षमा करें, लेकिन कोड की रेखा jquery कोड का एक अंश है और कोड ब्लॉक मेरा अपना उदाहरण कोड है। बाकी किसी को भी खुद को बाहर निकालना चाहिए। केवल एक चीज जो आप याद कर रहे हैं वह है चर iframe। और मैं संभवतः यह नहीं जान सकता कि आपका आईफ्रेम कहां है या उसकी आईडी कैसी है।
— एलगोरटेक्स
5
क्या आप उत्तर के शीर्ष पर एक चेतावनी जोड़ सकते हैं कि यह काम नहीं करता है यदि iframe में दूरस्थ src है? अगर मैं गलत हूं, तो मैं सराहना करूंगा कि अगर आप मुझे बता सकते हैं कि मैं अब भी अन्य HTTP अनुरोध भेजे बिना आईफ्रेम सामग्री कैसे प्राप्त कर सकता हूं (संभव नहीं है, क्योंकि मुझे आईफ्रेम सामग्री के निर्माण के लिए निष्पादित जावास्क्रिप्ट की आवश्यकता है और एक को तैनात नहीं करना चाहता हूं दूसरा जावास्क्रिप्ट पर्यावरण अगर टालने योग्य)।
— ज़ैकलाइन
1
मुझे ऐसी चेतावनी है। लेकिन मेरे स्पष्टीकरण के अंत में। आपको उसी-मूल नीति का पालन करना होगा। बस इतना ही।
— एलगोरैट
2
उपरोक्त कार्य प्राप्त करने के लिए, मुझे यह document.querySelector('#id_description_iframe').onload = function() {... आशा में संलग्न करना पड़ा कि यह किसी की मदद करता है।
— user3442612 0
71

JQuery का उपयोग करना, यह प्रयास करें:

$("#id_description_iframe").contents().find("body").html()
— माइकल एडेडायो
स्रोत
27
यह काम नहीं करता है क्योंकि "डोमेन, प्रोटोकॉल और पोर्ट का मिलान होना चाहिए।" : असुरक्षित जावास्क्रिप्ट यूआरएल के साथ फ्रेम का उपयोग करने का प्रयास
— Ionică Bizău
2
जैसा कि उल्लेख किया गया है, यह काम करेगा यदि डोमेन मेल खाते हैं। FYI करें, मैंने अभी पाया है कि $ ("# id_description_iframe #id_of_iframebodybody")। Html () क्रोम में काम करता है, लेकिन सभी फ़ायरफ़ॉक्स संस्करणों में नहीं है, और इसलिए ऊपर का उपयोग करना ठीक है। Ie $ ("# id_description_iframe #id_of_iframe_body")) सामग्री ()। ढूँढें ("शरीर")। Html () दोनों में काम किया
— hobailey
41

यह मेरे लिए पूरी तरह से काम करता है: 

document.getElementById('iframe_id').contentWindow.document.body.innerHTML;
— bizzr3
स्रोत
3
यह अजीब है, लेकिन मेरे लिए .bodyकाम नहीं करता है। हालाँकि .getElementsByTagName('body')[0]करता है।
— जेनी ओ'रिली
इसका "नहीं। कोई", सिर्फ "शरीर"। डॉट निकालें
— अर्जुन
1
यदि आप वेनिला जावास्क्रिप्ट में हैं तो इसका उत्तर होना चाहिए।
— जोवन्नी जी
23

AFAIK, एक iframe उस तरह से इस्तेमाल नहीं किया जा सकता है। आपको इसके src विशेषता को किसी अन्य पृष्ठ पर इंगित करने की आवश्यकता है।

यहाँ विमान पुरानी जावास्क्रिप्ट का उपयोग करके अपने शरीर की सामग्री प्राप्त करने का तरीका बताया गया है। यह IE और फ़ायरफ़ॉक्स दोनों के साथ काम करता है।

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);
 }
— जोस बेसिलियो
स्रोत
1
यह सफारी (यानी शाखा) पर करता है
— आंद्रेई क्रिस्टियन प्रोडन
क्रॉस डोमेन समस्या होने पर, क्रॉस " ओरिजिनल फ़्रेम " तक पहुँचने से मूल " someOther.com " के साथ एक फ़्रेम को ब्लॉक किया गया ।
— lannyf
10

contentJS के साथ iframe में उपयोग करें :

document.getElementById('id_iframe').contentWindow.document.write('content');
— CoursesWeb
स्रोत
5

मुझे लगता है कि टैग को इनबेट करते हुए टेक्स्ट को उन ब्राउज़रों के लिए आरक्षित किया जाता है जो कैंट हैंडल इफ्रेम्स यानी ।।

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

आप iframes html के स्रोत को सेट करने के लिए 'src' विशेषता का उपयोग करते हैं ...

आशा है कि मदद करता है :)

3

निम्नलिखित कोड क्रॉस-ब्राउज़र अनुपालन है। यह 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>
— nekno
स्रोत
नीचे दिए गए HTML ने मैक पर Chrome 7 में मेरे लिए काम किया। मैंने विंडोज पर क्रोम 6 में इस मूल पोस्ट का परीक्षण किया और इसने ठीक काम किया। <html> <head> </ head> <body> <iframe id = "iframeId" नाम = "iframeId"> ... </ iframe> <script type = "text / javascript" "var iframeDoc; अगर (window.frames && window.frames.iframeId && window.frames.iframeId.document) {window.frames.iframeId.document.body.innerHTML = "<h1> परीक्षण / h1>"; } </ script> </ body> </ html>
— nekno
1
window.frames.iframeId.documentमेरे लिए अपरिभाषित है। (Ubuntu 13.04, क्रोम)
— Ionică Bizău
2

Chalkey सही है, आपको पेज को iframe में निर्दिष्ट करने के लिए src विशेषता का उपयोग करने की आवश्यकता है। आपको यह प्रदान करना, और iframe में दस्तावेज़ मूल डोमेन के समान डोमेन में है, आप इसका उपयोग कर सकते हैं:

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

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

— ग्राहम क्लार्क
स्रोत
1

जावास्क्रिप्ट से शरीर की सामग्री प्राप्त करने के लिए, मैंने निम्नलिखित कोड की कोशिश की है:

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

var frameContent = frameObj.contentWindow.document.body.innerHTML;

जहाँ "id_description_iframe" आपकी आइफ्रेम आईडी है। यह कोड मेरे लिए ठीक काम कर रहा है।

— सुनाक्षी
स्रोत
2
कृपया अपना उत्तर हमेशा केवल कोड चिपकाने के बजाय संदर्भ में रखें। अधिक जानकारी के लिए यहां देखें ।
— गेहबिसज़ोमिस
1
कोड-केवल उत्तरों को निम्न गुणवत्ता माना जाता है: यह सुनिश्चित करना सुनिश्चित करें कि आपका कोड क्या करता है और यह समस्या को हल कैसे करता है। यह पूछने वाले और भविष्य के पाठकों दोनों की मदद करेगा यदि आप अपनी पोस्ट में अधिक जानकारी जोड़ सकते हैं। पूरी तरह से कोड-आधारित उत्तरों की व्याख्या करना देखें: meta.stackexchange.com/questions/114762/…
— borchvm
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.