In Chrome's web inspector, if you right-click a DOM element there's a "Copy as HTML" option that will normally give you an HTML string of that element and all its children. However, it doesn't seem to ever include the contents of IFrame tags despite the fact they appear in the inspector as child nodes.
The problem isn't caused by cross-domain restrictions: Even same-domain IFrames are excluded from the copied HTML.
Is there any way around this, short of just copy-and-pasting the HTML root of every nested IFrame and manually stitching them together in a text editor? I work for a site whose third-party ad scripts often produce large, sprawling trees of nested IFrames, and I need a way for coworkers to be able to copy-and-paste that structure so I can debug ad issues without my physically sitting down at their desk.
I finally found a solution, via a Chrome Extension called Save Page WE by DW-dev.
It is also available for Firefox. https://addons.mozilla.org/en-US/firefox/addon/save-page-we/
I believe Google Chrome has hard coded the behavior inside their browser somewhere but I don't have time to find the section of code.
Here's a work around that will grab the html from all the iframes current on the webpage using google chrome.
DisplayIframeContent.js will produce an error like this.Unsafe JavaScript attempt to access frame with URL ...
Example:
cd LOCATIONOFGOOGLECHROME
chrome.exe --disable-web-security
When Google Chrome loads you should see an yellow warning stating,
You are using an unsupported command-line flag: --disable-web-security. Stabilty and security will suffer.
DisplayIframeContent.js inside the console.DisplayIframeContent.js
// @author Larry Battle <bateru.com/news> 12.13.2012
// requires jQuery 1.8.3+
clear();
if( !$("iframe").length ){
console.log("No iframes were found");
}else{
$("iframe").each(function (i) {
console.log( "### iframe[%s].src = (%s)", i, $(this).attr("src") );
console.log( $(this).contents().find("html").html() )
});
}
"done";
Example URL: http://jsfiddle.net/28yrA/ Output:
### iframe[0].src = (javascript:false)
...HTML...
### iframe[1].src = (javascript:false)
...HTML...
### iframe[2].src = (javascript:false)
...HTML...
### iframe[3].src = (http://fiddle.jshell.net/28yrA/show/)
...HTML...
"done"
The other answer may works, but I don't like disabling the security just to copy some html.
Here another way that is IMHO way simplier.
First Inspect element and copy the iframe element now paste it wherever you want to add it.
The result should be en empty iframe tag with all it attributes :
<iframe src="src"></iframe>
Now inside that iframe manually type the #document and DOCTYPE so you now have something like :
<iframe>
#document
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
</iframe>
Copy the parent node of the document in the iframe as html and it will copy all it childs as if you would copy a normal html page.
Simply paste back under the doctype and you have your entire iframe. The ending result should look something like this
<iframe>
#document
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<!-- All the child nodes -->
</html>
</iframe>