एक iFrame के भीतर से तत्व प्राप्त करें

Question

आप एक <div>से कैसे प्राप्त करते हैं <iframe>?

Answer 1

var iframe = document.getElementById('iframeId');
var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;

आप और अधिक आसानी से लिख सकते हैं:

var iframe = document.getElementById('iframeId');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;

और पहला वैध इनर डॉक वापस किया जाएगा।

एक बार जब आप आंतरिक डॉक्टर को प्राप्त कर लेते हैं, तो आप इसके आंतरिक हिस्से को उसी तरह एक्सेस कर सकते हैं जैसे आप अपने वर्तमान पृष्ठ पर किसी भी तत्व को एक्सेस करेंगे। ( innerDoc.getElementById... आदि।)

महत्वपूर्ण: सुनिश्चित करें कि iframe एक ही डोमेन पर है, अन्यथा आप इसके इंटर्नल तक पहुँच प्राप्त नहीं कर सकते। यह क्रॉस-साइट स्क्रिप्टिंग होगी।

Comments

बहुत बढ़िया जवाब। क्या आप जानते हैं कि आप कर सकते हैं: var innerDoc = iframe.contentDocument || iframe.contentWindow.document; // अधिक पठनीय और उसी का अर्थ है

— डेविड स्नेबेल-कॉंट

मैंने उन लोगों को देखा है जो टर्नरी ऑपरेटरों से अधिक भ्रमित हैं। उन्हें पता नहीं लगता है कि पहले वैध को लौटा दिया गया है।

— जियोवा

वास्तव में, जैसा कि मैंने इसे शामिल करने के उत्तर को संपादित किया, मेरे कंधे पर लड़के ने मुझसे पूछा कि उसने क्या किया ...

— जियोवा

संभवतः सादगी के लिए अधिक जटिल कोड का उपयोग करने की तुलना में शिक्षित करना बेहतर है :)

— डेविड स्नेबल-कॉंट

@ जेलिकलकैट: इसके आसपास कोई भी तरीका "क्रॉस-साइट रिक्वेस्ट फर्जी" करने का एक तरीका है, जिसे "वन-क्लिक" अटैक या "सेशन राइडिंग" के नाम से भी जाना जाता है

— CSharper

Answer 2

लोड होने के बाद iframe एक्सेस करना न भूलें । JQuery के बिना पुराना लेकिन विश्वसनीय तरीका:

<iframe src="samedomain.com/page.htm" id="iframe" onload="access()"></iframe>

<script>
function access() {
   var iframe = document.getElementById("iframe");
   var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
   console.log(innerDoc.body);
}
</script>

Answer 3

window.parent.document.getElementById("framekit").contentWindow.CallYourFunction('pass your value')

CallYourFunction() पृष्ठ के अंदर कार्य करता है और उस पर कार्य क्रिया करता है

Comments

यह एक iFrame से एक फ़ंक्शन को बुला रहा है, तत्व का संदर्भ नहीं मिल रहा है।

— निक मिशेल

Answer 4

उपरोक्त उत्तरों ने जावास्क्रिप्ट का उपयोग करके अच्छे समाधान दिए। यहाँ एक सरल jQuery समाधान है:

$('#iframeId').contents().find('div')

यहां ट्रिक jQuery की .contents()विधि है, .children()जिसके विपरीत केवल HTML तत्व .contents()प्राप्त कर सकते हैं , पाठ नोड्स और HTML तत्व दोनों प्राप्त कर सकते हैं। इसीलिए इसका उपयोग करके कोई भी iframe की दस्तावेज़ सामग्री प्राप्त कर सकता है।

JQuery के बारे में आगे पढ़ना .contents(): .contents ()

ध्यान दें कि iframe और पेज को एक ही डोमेन पर होना चाहिए।

Answer 5

अन्य कोई भी उत्तर मेरे लिए काम नहीं कर रहा था। मैंने अपने iframe के भीतर एक फंक्शन का निर्माण किया जो उस वस्तु को लौटाता है जिसकी मुझे तलाश थी:

function getElementWithinIframe() {
    return document.getElementById('copy-sheet-form');
}

तब आप उस फ़ंक्शन को कॉल करते हैं ताकि तत्व को पुनः प्राप्त किया जा सके:

var el = document.getElementById("iframeId").contentWindow.functionNameToCall();

Answer 6

यदि iframe समान डोमेन में नहीं है, तो आप माता-पिता से उसके आंतरिक तक पहुँच प्राप्त नहीं कर सकते, लेकिन यदि आप iframe के स्रोत कोड को संशोधित कर सकते हैं, तो आप iframe द्वारा प्रदर्शित पृष्ठ को मूल विंडो पर संदेश भेजने के लिए संशोधित कर सकते हैं, जो अनुमति देता है आप पृष्ठों के बीच जानकारी साझा करने के लिए। कुछ स्रोत:

• https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
• Html5 - क्रॉस ब्राउज़र iframe पोस्टमेजेज - माता-पिता को बच्चा?
• पार साइट iframe बच्चे से माता-पिता तक पोस्टमासेज

Answer 7

नीचे दिए गए कोड से आपको iframe डेटा का पता लगाने में मदद मिलेगी।

let iframe = document.getElementById('frameId');
let innerDoc = iframe.contentDocument || iframe.contentWindow.document;