Get HTML inside iframe using jQuery

Question

Here is my situation   I have a file called iframe html  which contains the code to for a image slideshow  The code is somewhat like   lt html gt     lt head gt       lt  -- Have added title and js files  jquery  slideshow js  etc  -- gt     lt  head gt      lt body gt       lt  -- Contains the images which are rendered as slidehow  -- gt       lt  -- have hierarchy like  div  inside  div  etc  -- gt     lt  body gt   lt  html gt    Users can use the embed code to add the slideshow to their blogs or websites  can be from different domains   Let s say a user has to embed the slideshow in index html  they can add by adding following lines    lt iframe id  iframe  src  path to iframe html  width  480  height  320  scrolling  no  frameborder  0  gt  lt  iframe gt    This will bring the complete HTML code from iframe html to index html  now I need a way to access the elements in the iframe to adjust some of their properties   Like in the code the width and the height of the iframe are set by the user to some fix dimensions  I would like to adjust the size of the slideshow  and images contained  to the size of the iframe container  What is the best way to do this   I tried with no success to access the iframe components from index html by something like      iframe   contents      but get the error      TypeError  Cannot call method  contents  of null   So  I think to implement the logic in iframe html where the slideshow should check the width and height of parent and set its height accordingly   I am pretty much confused  hope my question makes sense to most  Please feel free to ask further explanation  Your help is appreciated

User · Answer

editFrame  contents   find  html   html

User · Answer

If you have Div as follows in one Iframe    lt iframe id  ifrmReportViewer  name  ifrmReportViewer  frameborder  0  width  980         lt div id  EndLetterSequenceNoToShow  runat  server  gt  11441551  lt  div gt  Or        lt form id  form1  runat  server  gt                  lt div style  clear  both  width  998px  margin  0 auto   id  divInnerForm  gt                         Some Text           lt  div gt        lt  form gt    lt  iframe gt    Then you can find the text of those Div using the following code  var iContentBody       ifrmReportViewer   contents   find  body    var endLetterSequenceNo   iContentBody find   EndLetterSequenceNoToShow   text     var divInnerFormText   iContentBody find   divInnerForm   text      I hope this will help someone

User · Answer

var iframe   document getElementById  iframe        iframe  contents   find  html   html

User · Answer

iframe   load function         var src       iframe   contents   find  html   html        alert src

User · Answer

Why not try Ajax  check a code part 1 or part 2  use comment     x000D   x000D    document  ready function     x000D   console clear    x000D     x000D         PART 1 ERROR x000D         Uncaught SecurityError  Failed to read the  contentDocument  property from  HTMLIFrameElement   Sandbox access violation  Blocked a frame at  http   stacksnippets net  from accessing a frame at  null    Both frames are sandboxed and lack the  allow-same-origin  flag  x000D   console log  PART 1       x000D   console log    iframe sandro   contents   find  html   html     x000D     x000D      PART 2 x000D     ajax   x000D    url     iframe sandro   attr  src    x000D    type   GET   x000D    dataType   html  x000D      done function html    x000D    console log  PART 2       x000D    console log html   x000D       x000D   x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt  x000D   lt html gt  x000D   lt body gt  x000D   lt iframe id  sandro  src  https   jsfiddle net robots txt  gt  lt  iframe gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Try this code       iframe   contents   find  html   html     This will return all the html in your iframe  Instead of  find  html   you can use any selector you want eg   find  body    find  div mydiv

User · Answer

This line will retrieve the whole HTML code of the frame  By using other methods instead of innerHTML you can traverse DOM of the inner document   document getElementById  iframe   contentWindow document body innerHTML   Thing to remember is that this will work only if the frame source is on the same domain  If it is from a different domain  cross-site-scripting  XSS  protection will kick in

User · Answer

Just for reference s sake  This is how to do it with JQuery  useful for instance when you cannot query by element id        iframe   get 0  contentWindow document body innerHTML

User · Answer

this works for me because it works fine in ie8       iframe   contents   find  html   html      but if you like to use javascript aside for jquery you may use like this  var iframe   document getElementById  iframecontent    var innerDoc   iframe contentDocument    iframe contentWindow document  var val 1   innerDoc getElementById  value 1   value

User · Answer

This can be another solution if jquery is loaded in iframe html         iframe   0  contentWindow    html   html

[jquery] Get HTML inside iframe using jQuery

Examples related to jquery

Examples related to iframe