Get HTML inside iframe using jQuery
iframe, jquery
Solution
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.
Problem
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 ``` <html> <head> <!-- Have added title and js files (jquery, slideshow.js) etc. --> </head> <body> <!-- Contains the images which are rendered as slidehow. --> <!-- have hierarchy like 'div' inside 'div' etc. --> </body> </html> ``` 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: ``` <iframe id="iframe" src="path_to_iframe.html" width="480" height="320" scrolling="no" frameborder="0"></iframe> ``` 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.