tags:

views:

282

answers:

2
Q: 

How do I grab the entire exact contents of an iframe and also be able to edit it?

I know you can get the innerHTML doing something like this, with jQuery,

$('iframe').load(function(){
  alert($(this).contents().find('body').html());
});

This gets the innerHTML of the body tag. But I want it all. I want the HTML tag and the doctype. The whole source code basically. And I want to be able to edit it as a whole as well. By "as a whole", I mean I wanna be able to do something like this,

$('iframe').html('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html>
<head>
  <title>title</title>
</head>
<body>
hello world
</body>
</html>');

How do I do this?

Note: I realize DOM is handled differently in different browsers and so the innerHTML from Opera will look different than the one from Firefox. But it's no biggie.

A: 

I assume this document you are accessing is on the same server? Obviously being able to access (and edit!) the contents of another website would be very dangerous.

$('iframe').contentWindow.document.documentElement.outerHTML will contain the full html tag and its contents. outerHTML isn't exactly cross-browser, and you may want to parse the attributes of the documentElement object instead. Note that you can't edit the outerHTML (at least in WebKit), so you can use innerHTML to edit the contents.

$('iframe').contentWindow.document.doctype represents the DOCTYPE. You can't get the actual tag, but you can retrieve the information from its attributes. Here is the MSDN reference for the !DOCTYPE element.

ACoolie  2009-09-02 02:03:12
jQuery doesn't have a `contentWindow` property...
geowa4  2009-09-02 03:35:48
also, `documentElement`? goin' old school?
geowa4  2009-09-02 03:36:33
Yes it's in the same server.
this is a dead end  2009-09-02 05:55:02
A: 

document.write is your friend.

For example:

var iframeEl = document.createElement('iframe');
document.body.appendChild(iframeEl);

var oFrame = window.frames[window.frames.length - 1];
oFrame.document.write('<html><head><title>foo</title></head><body>bar</body></html>');

oFrame.document.body.innerHTML; // "bar"
kangax  2009-09-02 02:34:15
oFrame.document isn't x-browser; use `oFrame.contentDocument || oFrame.contentWindow.document`
geowa4  2009-09-02 03:33:58
@geowa4 Not exactly. You confuse `contentDocument` property of `HTMLIframeElement` - http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-67133006 with `document` property of `Window` object (available through `window.frames` collection). Notice that I'm accessing document via iframe's corresponding window object, not via iframe element's `contentDocument` property.
kangax  2009-09-02 04:36:45

related questions

What JavaScript patterns do you use most?
Javascript events
What style do you use for creating an "class" in JavaScript?
Graphing JavaScript Library
What's the difference in closure style
Getting the text from a drop-down box
How to specify javascript to run when ModalPopupExtender is shown
Length of Javascript Associative Array
How Do I Post and then redirect to an external URL from ASP.Net?
How to set up a CSS switcher in ASP.NET
Wrapping lists into columns
Javascript keyboard events primer? (or rather: help me with my custom dropdown)
Http Auth in a Firefox 3 bookmarklet
Best Debugging Tools for JavaScript/xulrunner Development
How can I turn a string of HTML into a DOM object in a Firefox extension?
Call ASP.NET Function From Javascript?
Javascript troubleshooting tools in IE
MAC addresses in JavaScript
Capturing TAB key in text box
CSS Background Color in Javascript
How can I make the browser see CSS and Javascript changes?
Triple Quotes? How do I delimit a databound Javascript string parameter in ASP.NET?
ASP .Net Custom Client-Side Validation
What JavaScript library would you choose for a new project and why?
Detecting font in JavaScript