Javascript 获取 iframe 的源代码

Question

提问by Franz Payer

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.

有没有办法获取 iframe 加载的页面的源代码？我不想更改任何代码，我只想阅读它。我还需要能够使用 javascript/html 获得它。

Answer 1

采纳答案by ?ime Vidas

document.getElementById('iframeID').contentWindow.document.body.innerHTML

Works in Firefox, Chrome, Opera, IE9 beta

适用于 Firefox、Chrome、Opera、IE9 测试版

Answer 2

回答by Lumic

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>

Answer 3

回答by SeekLoad

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.

我知道它看起来很复杂，但我为您提供了一种 100% 防弹的方式，可以在您的页面上查看您的源代码。我不完全知道如何在 iframe 中显示它，但是有另一种查看源代码的方法比 iframe 好得多，这就是方法。

What is important is the JavaScript and the HTML is exactly like this.

重要的是 JavaScript，而 HTML 正是如此。

CSS:In the <head></head>section:

CSS：在该<head></head>部分：

<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:

JavaScript：

<script languade="JavaScript">
        $(function() {
            $("<pre />", {
                "html":   '&lt;!DOCTYPE html>\n&lt;html>\n' + 
                        $("html")
                            .html()
                            .replace(/[<>]/g, function(m) { return {'<':'&lt;','>':'&gt;'}[m]})
                            .replace(/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi,'<a href=""></a>') + 
                        '\n&lt;/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.

注意：您不需要从网上使用这些 JavaScript 代码，但为了使其在所有浏览器上都能正常工作，建议您也使用它们。

<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:

HTML：在该<body></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>

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":   '&lt;!DOCTYPE html>\n&lt;html>\n' + 
                        $("html")
                            .html()
                            .replace(/[<>]/g, function(m) { return {'<':'&lt;','>':'&gt;'}[m]})
                            .replace(/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi,'<a href=""></a>') + 
                        '\n&lt;/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>

Answer 4

回答by wmorrell

See https://developer.mozilla.org/en/HTML/Element/iframe#Scriptingfor 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.

有关基于 Mozilla 的浏览器如何处理它，请参阅https://developer.mozilla.org/en/HTML/Element/iframe#Scripting。你最喜欢的 JavaScript 库中应该有抽象，可以处理 IE、WebKit、Gecko 等 DOM 之间不可避免的命名差异。

Answer 5

回答by lepe

Using JQuery: http://api.jquery.com/contents/(only if domain match)

使用 JQuery：http: //api.jquery.com/contents/（仅当域匹配时）

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;
});

Javascript 获取 iframe 的源代码

提问by Franz Payer

采纳答案by ?ime Vidas

回答by Lumic

回答by SeekLoad

回答by wmorrell

回答by lepe

相关推荐

最近更新

标签

Javascript 获取 iframe 的源代码

提问by Franz Payer

采纳答案by ?ime Vidas

回答by Lumic

回答by SeekLoad

回答by wmorrell

回答by lepe

相关推荐

Javascript jQgrid：多列行标题

Javascript 使用javascript设置跨子域cookie

Javascript javascript中的document.form是什么意思？

Javascript window.location.hash = " "; 防止滚动到顶部？

相关推荐

最近更新

标签