Question

无论如何都要获取加载iframe的页面的源代码？我不想更改任何代码，我只想阅读它。我还需要能够使用javascript / html来获取它。

Answer 1

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

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

Answer 2

试试这样：

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

我知道它看起来很复杂，但我正在为您提供100％防弹方式，以便在您的网页上查看您的源代码。 我并不完全知道如何在iframe中展示它，但还有另一种方法来查看源代码，这比iframe好得多，而这就是方法。

重要的是JavaScript和HTML就是这样。

CSS：在ionic build ios部分：

<head></head>

<强> JavaScript的：

<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代码，但为了让它适用于所有浏览器，建议您也使用它们。

Answer 4

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

Answer 5

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

例如：

$(iframe).contents().find('body').html();

如果不匹配，您可以再次加载它（因为它可能已经存储在客户端中，它可能不会再次发送到服务器）：

var html;
$.get($(iframe).get(0).src, function(content) {
    html = content;
});

获取iframe的源代码

5 个答案: