"Copy as HTML" on nested IFrame elements in Chrome Inspector
Question
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.
3 answers
solution1
3 2012-12-14 00:20:35
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.
Setup:
- Close all of your Google Chrome browsers, then launch Google Chrome with web security disabled. Otherwise running
DisplayIframeContent.jswill produce an error like this.
Unsafe JavaScript attempt to access frame with URL...
Example:
cd LOCATION\OF\GOOGLE\CHROME
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.
Usage:
- After launching Google Chrome open up your test website.
- Press F12 to open the devtools.
- Copy and paste the content of jQuery inside the console.
- Copy and paste
DisplayIframeContent.jsinside the console.
// @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";
- Copy and paste the output from the console.
Expected Output:
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"
solution2
1 ACCPTED 2020-01-22 16:02:19
I finally found a solution, via a Chrome Extension called Save Page WE by DW-dev.
https://chrome.google.com/webstore/detail/save-page-we/dhhpefjklgkmgeafimnjhojgjamoafof
It is also available for Firefox.https://addons.mozilla.org/en-US/firefox/addon/save-page-we/
solution3
0 2015-04-17 22:03:00
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.