Is there anyway to get the source code of the page that an iframe loaded? I do not wish to CHANGE any of the code, I just want to READ it. I also need to be able to get this using javascript/html.
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
回答1:
document.getElementById('iframeID').contentWindow.document.body.innerHTML
Works in Firefox, Chrome, Opera, IE9 beta
回答2:
Try it like this:
<!DOCTYPE html>
<html>
<body>
//this is iframe I ll look for its source
<iframe id="frmin" src="http://www.w3schools.com"></iframe>
<p>Click the button to see the source.</p>
//this is display I will display Iframe's source here
<div id="srcout"></div>
//show source upon click event
<button onclick="myFunction()">Show it</button>
<script>
function myFunction() {
//get Iframe element ready for javascript manipulation
var frm = document.getElementById("frmin");
//get display element ready for javascript manipulation
var dsp = document.getElementById("srcout");
//find Iframe's HTML (root) element, [0] because I'm using getElementsByTagName which returns node list so I have to chose the 1st one, and put its outer content (i.e. with outer tags) to display, i.e. dsp.innerText. I use innerText because I want a text output not formatted as html.
dsp.innerText = frm.contentDocument.getElementsByTagName('html')[0].outerHTML;
}
</script>
</body>
</html>
回答3:
I know it looks complicated but I am giving you a 100% bullet proof way that works to view your source codes on your page. I do not exactly know how to show it in iframes, but there is another way to view source codes witch is much better then iframes and this is how.
What is important is the JavaScript and the HTML is exactly like this.
CSS: In the <head></head> section:
<style type="text/css" >
.button
{
background:#000cff;
padding:2px 10px;
color:white;
text-decoration:none;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
cursor: pointer;
font-weight: bold;
color: white;
display: inline-block;
box-shadow: 0 0 3px gray;
margin: 0px;
font: bold 11px Arial, Sans-Serif;
}
#source-code
{
display:none;
position:absolute;
top:-24px;
left:0;
width:100%;
height:414px;
background:rgba(255,255,255,0.0);
}
#source-code:target { display: block; }
#source-code pre
{
padding:20px;
font:14px/1.6 Monaco, Courier, MonoSpace;
margin:50px auto;
background:rgba(0,0,0,0.8);
color:white;
width:80%;
height:80%;
overflow:auto;
}
#source-code pre a,
#source-code pre a span
{
text-decoration:none;
color:#00ccff !important;
}
#x
{
position:absolute;
top:30px;
left:10%;
margin-left:-41px;
}
.control-copytextarea
{
position:absolute;
top:-3px;
left:20px;
cursor: pointer;
font-weight: bold;
padding:3px 10px;
border-radius: 5px 5px 0 0;
background: darkred;
color: white;
display: inline-block;
box-shadow: 0 0 3px gray;
margin: 0px;
font: bold 10px Arial, Sans-Serif;
}
</style>
JavaScript:
<script languade="JavaScript">
$(function() {
$("<pre />", {
"html": '<!DOCTYPE html>\n<html>\n' +
$("html")
.html()
.replace(/[<>]/g, function(m) { return {'<':'<','>':'>'}[m]})
.replace(/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi,'<a href="$1">$1</a>') +
'\n</html>',
"class": "prettyprint"
}).appendTo("#source-code");
prettyPrint();
});
</script>
<script languade="JavaScript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script languade="JavaScript">
var pageTracker = _gat._getTracker("UA-68528-29");
pageTracker._initData();
pageTracker._trackPageview();
</script>
NOTE: You do not need to use these JavaScript codes from online, but for the sake of having it work on all browsers it is advised you use them too.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://css-tricks.com/examples/ViewSourceButton/prettify/prettify.js"></script>
HTML: In the <body></body> section:
<a class="button" href="#source-code" id="view-source">Show the Source Code for this page</a>
<div id="source-code" align="left">
<a href="#" id="x"><input type="button" alt="close" class="control-copytextarea" value=" Close Source Code Viewing " /></a>
</div>
NOTE: You can directly copy and paste the codes to your webpage, it will work exactly as it is.
Full EXAMPLE:
<html>
<head><title>View your Source Code</title>
<style type="text/css" >
.button
{
background:#000cff;
padding:2px 10px;
color:white;
text-decoration:none;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
cursor: pointer;
font-weight: bold;
color: white;
display: inline-block;
box-shadow: 0 0 3px gray;
margin: 0px;
font: bold 11px Arial, Sans-Serif;
}
#source-code
{
display:none;
position:absolute;
top:-24px;
left:0;
width:100%;
height:414px;
background:rgba(255,255,255,0.0);
}
#source-code:target { display: block; }
#source-code pre
{
padding:20px;
font:14px/1.6 Monaco, Courier, MonoSpace;
margin:50px auto;
background:rgba(0,0,0,0.8);
color:white;
width:80%;
height:80%;
overflow:auto;
}
#source-code pre a,
#source-code pre a span
{
text-decoration:none;
color:#00ccff !important;
}
#x
{
position:absolute;
top:30px;
left:10%;
margin-left:-41px;
}
.control-copytextarea
{
position:absolute;
top:-3px;
left:20px;
cursor: pointer;
font-weight: bold;
padding:3px 10px;
border-radius: 5px 5px 0 0;
background: darkred;
color: white;
display: inline-block;
box-shadow: 0 0 3px gray;
margin: 0px;
font: bold 10px Arial, Sans-Serif;
}
</style>
<script languade="JavaScript">
$(function() {
$("<pre />", {
"html": '<!DOCTYPE html>\n<html>\n' +
$("html")
.html()
.replace(/[<>]/g, function(m) { return {'<':'<','>':'>'}[m]})
.replace(/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi,'<a href="$1">$1</a>') +
'\n</html>',
"class": "prettyprint"
}).appendTo("#source-code");
prettyPrint();
});
</script>
<script languade="JavaScript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script languade="JavaScript">
var pageTracker = _gat._getTracker("UA-68528-29");
pageTracker._initData();
pageTracker._trackPageview();
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://css-tricks.com/examples/ViewSourceButton/prettify/prettify.js"></script>
</head>
<body>
<a class="button" href="#source-code" id="view-source">Show the Source Code for this page</a>
<div id="source-code" align="left">
<a href="#" id="x"><input type="button" alt="close" class="control-copytextarea" value=" Close Source Code Viewing " /></a>
</div>
</body>
</html>
回答4:
See https://developer.mozilla.org/en/HTML/Element/iframe#Scripting for how Mozilla-based browsers handle it. There should be abstractions in Your Favorite JavaScript Library that will handle the inevitable naming differences between IE, WebKit, Gecko, etc DOMs.
回答5:
Using JQuery: http://api.jquery.com/contents/ (only if domain match)
For example:
$(iframe).contents().find('body').html();
If it doesn't match, you may load it again (as it may be stored already in the client it may not go to the server again):
var html;
$.get($(iframe).get(0).src, function(content) {
html = content;
});
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://img.manongdao.com/sparkler-677774__340.jpg', '推荐 迷人小祖宗 的文章《Getting the source code of an iframe》','https://www.manongdao.com/article-759304.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}