Получение исходного кода iframe - PullRequest
Новая
       5

Получение исходного кода iframe

8 голосов
/ 19 января 2011

Есть ли способ получить исходный код страницы, на которую загружен iframe? Я не хочу менять код, я просто хочу его прочитать. Мне также нужно иметь возможность получить это с помощью javascript / html.

Ответы [ 5 ]

1 голос
/ 19 января 2011 
document.getElementById('iframeID').contentWindow.document.body.innerHTML

Работает в Firefox, Chrome, Opera, IE9 beta

0 голосов
/ 01 марта 2017

Я знаю, что это выглядит сложно, но я даю вам 100% пуленепробиваемый способ, который работает для просмотра ваших исходных кодов на вашей странице. Я точно не знаю, как показать это в iframes, но есть другой способ просмотра исходных кодов, который намного лучше, чем iframes, и вот как.

Что важно, так это JavaScript и HTML точно такой же.

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: 

<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="$1">$1</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>

Примечание: Вам не нужно использовать эти коды 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: В разделе <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>

ПРИМЕЧАНИЕ: Вы можете напрямую скопировать и вставить коды на свою веб-страницу, она будет работать точно так же, как она.

Полный ПРИМЕР: 

<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="$1">$1</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>
0 голосов
/ 21 октября 2015

Попробуй так: 

<!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>
0 голосов
/ 19 января 2011

Использование JQuery: http://api.jquery.com/contents/ (только если домен совпадает)

Например: 

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

Если он не совпадает, вы можете загрузить его снова (каквозможно, он уже сохранен на клиенте, он больше не может перейти на сервер): 

var html;
$.get($(iframe).get(0).src, function(content) {
    html = content;
});
0 голосов
/ 19 января 2011

См. https://developer.mozilla.org/en/HTML/Element/iframe#Scripting, как браузеры на основе Mozilla справляются с этим.В вашей любимой библиотеке JavaScript должны быть абстракции, которые будут обрабатывать неизбежные различия имен в DOM IE, WebKit, Gecko и т. Д.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...