jQuery JavaScript accessing contents of an iframe

Question

I would like to manipulate the HTML inside an iframe using jQuery   I thought I d be able to do this by setting the context of the jQuery function to be the document of the iframe  something like     function      document ready        some selector   frames  nameOfMyIframe   document  doStuff         However this doesn t seem to work  A bit of inspection shows me that the variables in frames  nameOfMyIframe   are undefined unless I wait a while for the iframe to load  However  when the iframe loads the variables are not accessible  I get permission denied-type errors    Does anyone know of a work-around to this

User · Answer

Have you tried the classic  waiting for the load to complete using jQuery s builtin ready function     document  ready function            some selector   frames  nameOfMyIframe   document  doStuff          K

User · Answer

I ended up here looking for getting the content of an iframe without jquery  so for anyone else looking for that  it is just this   document querySelector  iframe name iframename    contentDocument

User · Answer

If the iframe src is from another domain you can still do it  You need to read the external page into PHP and echo it from your domain  Like this   iframe page php   lt  php      URL    http   external com         domain   file get contents  URL        echo  domain    gt      Then something like this   display page html   lt html gt   lt head gt     lt title gt Test lt  title gt    lt  head gt   lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 4 1 jquery min js  gt  lt  script gt    lt script gt     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              lt  script gt    lt body gt   lt iframe name  frametest  id  frametest  src  http   yourdomain com iframe page php   gt  lt  iframe gt   lt  body gt   lt  html gt      The above is an example of how to edit an external page through an iframe without the access denied etc

User · Answer

I think what you are doing is subject to the same origin policy  This should be the reason why you are getting permission denied type errors

User · Answer

Have you tried the classic  waiting for the load to complete using jQuery s builtin ready function     document  ready function            some selector   frames  nameOfMyIframe   document  doStuff          K

User · Answer

If the  lt iframe gt  is from the same domain  the elements are easily accessible as      iFrame   contents   find   someDiv   removeClass  hidden      Reference

User · Answer

I think what you are doing is subject to the same origin policy  This should be the reason why you are getting permission denied type errors

User · Answer

You need to attach an event to an iframe s onload handler  and execute the js in there  so that you make sure the iframe has finished loading before accessing it           ready function              iframeID   ready function        The function below executes once the iframe has finished loading            some selector   frames  nameOfMyIframe   document  doStuff                 The above will solve the  not-yet-loaded  problem  but as regards the permissions  if you are loading a page in the iframe that is from a different domain  you won t be able to access it due to security restrictions

User · Answer

Use  iframe contentWindow document   instead of  iframe contentDocument

User · Answer

If the iframe src is from another domain you can still do it  You need to read the external page into PHP and echo it from your domain  Like this   iframe page php   lt  php      URL    http   external com         domain   file get contents  URL        echo  domain    gt      Then something like this   display page html   lt html gt   lt head gt     lt title gt Test lt  title gt    lt  head gt   lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 4 1 jquery min js  gt  lt  script gt    lt script gt     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              lt  script gt    lt body gt   lt iframe name  frametest  id  frametest  src  http   yourdomain com iframe page php   gt  lt  iframe gt   lt  body gt   lt  html gt      The above is an example of how to edit an external page through an iframe without the access denied etc

User · Answer

I find this way cleaner   var  iframe       iframeID   contents     iframe find  selector

User · Answer

For even more robustness   function getIframeWindow iframe object      var doc     if  iframe object contentWindow        return iframe object contentWindow         if  iframe object window        return iframe object window          if   doc  amp  amp  iframe object contentDocument        doc   iframe object contentDocument          if   doc  amp  amp  iframe object document        doc   iframe object document         if  doc  amp  amp  doc defaultView       return doc defaultView         if  doc  amp  amp  doc parentWindow        return doc parentWindow         return undefined      and       var frame win   getIframeWindow  frames  nameOfMyIframe       if  frame win        frame win contentDocument    frame win document  find  some selector   doStuff

User · Answer

Have you tried the classic  waiting for the load to complete using jQuery s builtin ready function     document  ready function            some selector   frames  nameOfMyIframe   document  doStuff          K

User · Answer

You can use window postMessage to call a function between page and his iframe  cross domain or not    Documentation  page html   lt  DOCTYPE html gt   lt html gt   lt head gt       lt title gt Page with an iframe lt  title gt       lt meta charset  UTF-8    gt       lt script src  http   code jquery com jquery-1 10 2 min js  gt  lt  script gt       lt script gt      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                             lt  script gt   lt  head gt   lt body gt       lt h1 gt Page with an iframe lt  h1 gt       lt iframe src  iframe html  onload  iframeReady this    gt  lt  iframe gt   lt  body gt   lt  html gt    iframe html   lt  DOCTYPE html gt   lt html gt   lt head gt       lt title gt iframe lt  title gt       lt meta charset  UTF-8    gt       lt script src  http   code jquery com jquery-1 10 2 min js  gt  lt  script gt       lt script gt      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                               lt  script gt   lt  head gt   lt body gt       lt h1 gt iframe lt  h1 gt       lt p gt It s the iframe  lt  p gt   lt  body gt   lt  html gt

User · Answer

If the  lt iframe gt  is from the same domain  the elements are easily accessible as      iFrame   contents   find   someDiv   removeClass  hidden      Reference

User · Answer

I prefer to use other variant for accessing  From parent you can have a access to variable in child iframe    is a variable too and you can receive access to its just call window iframe id    For example  window view    div   hide   - hide all divs in iframe with id  view   But  it doesn t work in FF  For better compatibility you should use      iframe id   0  contentWindow

User · Answer

You need to attach an event to an iframe s onload handler  and execute the js in there  so that you make sure the iframe has finished loading before accessing it           ready function              iframeID   ready function        The function below executes once the iframe has finished loading            some selector   frames  nameOfMyIframe   document  doStuff                 The above will solve the  not-yet-loaded  problem  but as regards the permissions  if you are loading a page in the iframe that is from a different domain  you won t be able to access it due to security restrictions

User · Answer

I think what you are doing is subject to the same origin policy  This should be the reason why you are getting permission denied type errors

User · Answer

Have you tried the classic  waiting for the load to complete using jQuery s builtin ready function     document  ready function            some selector   frames  nameOfMyIframe   document  doStuff          K

User · Answer

I ended up here looking for getting the content of an iframe without jquery  so for anyone else looking for that  it is just this   document querySelector  iframe name iframename    contentDocument

User · Answer

I create a sample code   Now you can easily understand from different domain you can t access content of iframe    Same domain we can access iframe content  I share you my code   Please run this code check the console   I print image src at console  There are four iframe   two iframe coming from same domain   amp  other two from other domain third party   You can see two image src  https   www google com logos doodles 2015 googles-new-logo-5078286822539264 3-hp2x gif  and  https   www google com logos doodles 2015 arbor-day-2015-brazil-5154560611975168-hp2x gif     at console and also can see two permission error  2 Error  Permission denied to access property  document      irstChild   contents function a  return m nodeName a  iframe   a contentDocument        which is coming from third party iframe     lt body id  page-top  data-spy  scroll  data-target   navbar-fixed-top  gt   lt p gt iframe from same domain lt  p gt     lt iframe frameborder  0  scrolling  no  width  500  height  500     src  iframe html  name  imgbox  class  iView  gt    lt  iframe gt   lt p gt iframe from same domain lt  p gt   lt iframe frameborder  0  scrolling  no  width  500  height  500     src  iframe2 html  name  imgbox  class  iView1  gt    lt  iframe gt   lt p gt iframe from different  domain lt  p gt    lt 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  gt    lt  iframe gt    lt p gt iframe from different  domain lt  p gt    lt iframe frameborder  0  scrolling  no  width  500  height  500     src  http   d1rmo5dfr7fx8e cloudfront net   name  imgbox  class  iView3  gt    lt  iframe gt    lt script type  text javascript  gt      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               lt  script gt   lt  body gt

User · Answer

You need to attach an event to an iframe s onload handler  and execute the js in there  so that you make sure the iframe has finished loading before accessing it           ready function              iframeID   ready function        The function below executes once the iframe has finished loading            some selector   frames  nameOfMyIframe   document  doStuff                 The above will solve the  not-yet-loaded  problem  but as regards the permissions  if you are loading a page in the iframe that is from a different domain  you won t be able to access it due to security restrictions

User · Answer

I find this way cleaner   var  iframe       iframeID   contents     iframe find  selector

User · Answer

You could use  contents   method of jQuery      The  contents   method can also be used to get the content document of an iframe  if the iframe is on the same domain as the main page      document  ready function            frameID   load function                frameID   contents   find  body   html  Hey  i ve changed content of  lt body gt   Yay

User · Answer

You can use window postMessage to call a function between page and his iframe  cross domain or not    Documentation  page html   lt  DOCTYPE html gt   lt html gt   lt head gt       lt title gt Page with an iframe lt  title gt       lt meta charset  UTF-8    gt       lt script src  http   code jquery com jquery-1 10 2 min js  gt  lt  script gt       lt script gt      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                             lt  script gt   lt  head gt   lt body gt       lt h1 gt Page with an iframe lt  h1 gt       lt iframe src  iframe html  onload  iframeReady this    gt  lt  iframe gt   lt  body gt   lt  html gt    iframe html   lt  DOCTYPE html gt   lt html gt   lt head gt       lt title gt iframe lt  title gt       lt meta charset  UTF-8    gt       lt script src  http   code jquery com jquery-1 10 2 min js  gt  lt  script gt       lt script gt      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                               lt  script gt   lt  head gt   lt body gt       lt h1 gt iframe lt  h1 gt       lt p gt It s the iframe  lt  p gt   lt  body gt   lt  html gt

User · Answer

This solution works same as iFrame  I have created a PHP script that can get all the contents from the other website  and most important part is you can easily apply your custom jQuery to that external content  Please refer to the following script that can get all the contents from the other website and then you can apply your cusom jQuery JS as well  This content can be used anywhere  inside any element or any page    lt div id  myframe  gt      lt  php             Use below function to display final HTML inside this div             Display Frame    echo displayFrame         gt    lt  div gt    lt  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        lt script gt            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        lt  script gt         Append Custom JS with HTML    html    content    customJS       Return customized HTML   return  html

User · Answer

You need to attach an event to an iframe s onload handler  and execute the js in there  so that you make sure the iframe has finished loading before accessing it           ready function              iframeID   ready function        The function below executes once the iframe has finished loading            some selector   frames  nameOfMyIframe   document  doStuff                 The above will solve the  not-yet-loaded  problem  but as regards the permissions  if you are loading a page in the iframe that is from a different domain  you won t be able to access it due to security restrictions

User · Answer

You could use  contents   method of jQuery      The  contents   method can also be used to get the content document of an iframe  if the iframe is on the same domain as the main page      document  ready function            frameID   load function                frameID   contents   find  body   html  Hey  i ve changed content of  lt body gt   Yay

User · Answer

I think what you are doing is subject to the same origin policy  This should be the reason why you are getting permission denied type errors

User · Answer

This solution works same as iFrame  I have created a PHP script that can get all the contents from the other website  and most important part is you can easily apply your custom jQuery to that external content  Please refer to the following script that can get all the contents from the other website and then you can apply your cusom jQuery JS as well  This content can be used anywhere  inside any element or any page    lt div id  myframe  gt      lt  php             Use below function to display final HTML inside this div             Display Frame    echo displayFrame         gt    lt  div gt    lt  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        lt script gt            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        lt  script gt         Append Custom JS with HTML    html    content    customJS       Return customized HTML   return  html

User · Answer

I prefer to use other variant for accessing  From parent you can have a access to variable in child iframe    is a variable too and you can receive access to its just call window iframe id    For example  window view    div   hide   - hide all divs in iframe with id  view   But  it doesn t work in FF  For better compatibility you should use      iframe id   0  contentWindow

User · Answer

For even more robustness   function getIframeWindow iframe object      var doc     if  iframe object contentWindow        return iframe object contentWindow         if  iframe object window        return iframe object window          if   doc  amp  amp  iframe object contentDocument        doc   iframe object contentDocument          if   doc  amp  amp  iframe object document        doc   iframe object document         if  doc  amp  amp  doc defaultView       return doc defaultView         if  doc  amp  amp  doc parentWindow        return doc parentWindow         return undefined      and       var frame win   getIframeWindow  frames  nameOfMyIframe       if  frame win        frame win contentDocument    frame win document  find  some selector   doStuff

User · Answer

I create a sample code   Now you can easily understand from different domain you can t access content of iframe    Same domain we can access iframe content  I share you my code   Please run this code check the console   I print image src at console  There are four iframe   two iframe coming from same domain   amp  other two from other domain third party   You can see two image src  https   www google com logos doodles 2015 googles-new-logo-5078286822539264 3-hp2x gif  and  https   www google com logos doodles 2015 arbor-day-2015-brazil-5154560611975168-hp2x gif     at console and also can see two permission error  2 Error  Permission denied to access property  document      irstChild   contents function a  return m nodeName a  iframe   a contentDocument        which is coming from third party iframe     lt body id  page-top  data-spy  scroll  data-target   navbar-fixed-top  gt   lt p gt iframe from same domain lt  p gt     lt iframe frameborder  0  scrolling  no  width  500  height  500     src  iframe html  name  imgbox  class  iView  gt    lt  iframe gt   lt p gt iframe from same domain lt  p gt   lt iframe frameborder  0  scrolling  no  width  500  height  500     src  iframe2 html  name  imgbox  class  iView1  gt    lt  iframe gt   lt p gt iframe from different  domain lt  p gt    lt 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  gt    lt  iframe gt    lt p gt iframe from different  domain lt  p gt    lt iframe frameborder  0  scrolling  no  width  500  height  500     src  http   d1rmo5dfr7fx8e cloudfront net   name  imgbox  class  iView3  gt    lt  iframe gt    lt script type  text javascript  gt      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               lt  script gt   lt  body gt

User · Answer

Use  iframe contentWindow document   instead of  iframe contentDocument

[javascript] jQuery/JavaScript: accessing contents of an iframe

Examples related to javascript

Examples related to jquery

Examples related to iframe

Examples related to same-origin-policy