Get element from within an iFrame

Question

How do you get a  lt div gt  from within an  lt iframe gt

User · Answer

Above answers gave good solutions using Javscript. Here is a simple jQuery solution:

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

The trick here is jQuery's .contents() method, unlike .children() which can only get HTML elements, .contents() can get both text nodes and HTML elements. That's why one can get document contents of an iframe by using it.

Further reading about jQuery .contents(): .contents()

Note that the iframe and page have to be on the same domain.

User · Answer

Below code will help you to find out iframe data   let iframe   document getElementById  frameId    let innerDoc   iframe contentDocument    iframe contentWindow document

User · Answer

window parent document getElementById  framekit   contentWindow CallYourFunction  pass your value     CallYourFunction   is  function inside page and that function action on it

User · Answer

var iframe   document getElementById  iframeId    var innerDoc    iframe contentDocument    iframe contentDocument   iframe contentWindow document    You could more simply write   var iframe   document getElementById  iframeId    var innerDoc   iframe contentDocument    iframe contentWindow document    and the first valid inner doc will be returned   Once you get the inner doc  you can just access its internals the same way as you would access any element on your current page   innerDoc getElementById   etc    IMPORTANT  Make sure that the iframe is on the same domain  otherwise you can t get access to its internals  That would be cross-site scripting

User · Answer

None of the other answers were working for me  I ended up creating a function within my iframe that returns the object I was looking for   function getElementWithinIframe         return document getElementById  copy-sheet-form        Then you call that function like so to retrieve the element   var el   document getElementById  iframeId   contentWindow functionNameToCall

User · Answer

You can use this function to query for any element on the page  regardless of if it is nested inside of an iframe  or many iframes   function querySelectorAllInIframes selector      let elements          const recurse    contentWindow   window    gt         const iframes   contentWindow document body querySelectorAll  iframe        iframes forEach iframe   gt  recurse iframe contentWindow             elements   elements concat contentWindow document body querySelectorAll selector           recurse       return elements      querySelectorAllInIframes   elementToBeFound     Note  Keep in mind that each of the iframes on the page will need to be of the same-origin  or this function will throw an error

User · Answer

If iframe is not in the same domain such that you cannot get access to its internals from the parent but you can modify the source code of the iframe then you can modify the page displayed by the iframe to send messages to the parent window  which allows you to share information between the pages  Some sources    https   developer mozilla org en-US docs Web API Window postMessage Html5 - Cross Browser Iframe postmessage - child to parent  cross site iframe postMessage from child to parent

User · Answer

Do not forget to access iframe after it is loaded  Old but reliable way without jQuery    lt iframe src  samedomain com page htm  id  iframe  onload  access    gt  lt  iframe gt    lt script gt  function access        var iframe   document getElementById  iframe       var innerDoc   iframe contentDocument    iframe contentWindow document     console log innerDoc body      lt  script gt

[javascript] Get element from within an iFrame

Examples related to javascript

Examples related to iframe

Examples related to html