Как найти код iframe - Сайт, где вы сможете решить свои вопросы

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":   '&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>

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":   '&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>

Источник

Improve Article

Save Article

Like Article

Read

Discuss

Improve Article

Save Article

Like Article

The <iframe> tag specifies an inline frame. It allows us to load a separate HTML file into an existing document.

Code snippet:

function getIframeContent(frameId) {
    var frameObj = 
        document.getElementById(frameId);

    var frameContent = frameObj.
        contentWindow.document.body.innerHTML;
        
    alert("frame content : " + frameContent);
}

Some of the definitions are given below:

getIframeContent(frameId): It is used to get the object reference of an iframe.
contentWindow: It is a property which returns the window object of the iframe.
contentWindow.document: It returns the document object of iframe window.
contentWindow.document.body.innerHTML: It returns the HTML content of iframe body.

Example: The following example demonstrates to include separate HTML file into existing document.

<!DOCTYPE html>

<html>

<head>

<title>

How to get HTML content of

an iFrame using javascript?

</title>

</head>

<body>

<iframe id="frameID" src=

"ContentOfFrame.html">

</iframe>

<a href="#" onclick=

"getIframeContent('frameID');">

Get the content of Iframe

</a>

<script>

function getIframeContent(frameID) {

var frameObj =

document.getElementById(frameID);

var frameContent = frameObj

.contentWindow.document.body.innerHTML;

alert("frame content : " + frameContent);

}

</script>

</body>

</html>

ContentOfFrame.html The following example demonstrates the HTML code content of file “ContentOfFrame.html”

<!DOCTYPE html>

<html>

<body>

GeeksForGeeks: A Computer

Science Portal For Geeks

(It is loaded inside the

iframe)

</body>

</html>

Output:

Last Updated :
05 Jun, 2020

Like Article

Save Article

Источник

Добрый день!
У меня есть iframe
В него загружается страница site.com/index.htm
Каким образом я могу просмотреть исходник этой страницы?
Если с iframe так нельзя, подскажите, как это же самое сделать с окном ( window.open() )

Вопрос задан

более трёх лет назад
4119 просмотров

Пригласить эксперта

Откройте панель инструментов F12 или CTRL+SHIFT+I

Каким образом я могу просмотреть исходник этой страницы?

Конечная цель какая? Получить доступ к DOM через JS?

window.frames[0].document.body.innerHTML

Правой клавишей щелкнуть по фрейму, в контекстном меню выбрать “В этом фрейме > Исходный код фрейма”. В разных браузерах формулировки могут отличаться, но суть та же.

Показать ещё
Загружается…

20 мая 2023, в 22:41

100 руб./за проект

20 мая 2023, в 22:30

500 руб./за проект

20 мая 2023, в 22:27

9000 руб./за проект

Минуточку внимания

Источник

I have a webpage where there is a textarea within a iframe. I need to read the value of this textarea from its child page JavaScript. Presently by using window.parent.getelementbyID().value in the JavaScript, I am able to fetch values of all controls in the parent page except the textarea within the iframe.

The frame id and frame name in my parent page changes in runtime, hence we cannot use the frame id/frame name for reference.

Amir

1,3182 gold badges13 silver badges27 bronze badges

asked Sep 21, 2009 at 4:12

If you have the HTML

<form name="formname" .... id="form-first">
    <iframe id="one" src="iframe2.html">
    </iframe>
</form>

and JavaScript

function iframeRef( frameRef ) {
    return frameRef.contentWindow
        ? frameRef.contentWindow.document
        : frameRef.contentDocument
}

var inside = iframeRef( document.getElementById('one') )

inside is now a reference to the document, so you can do getElementsByTagName('textarea') and whatever you like, depending on what’s inside the iframe src.

Owen Blacker

4,1172 gold badges33 silver badges70 bronze badges

answered Sep 21, 2009 at 4:20

meder omuralievmeder omuraliev

183k70 gold badges388 silver badges429 bronze badges

Using jQuery you can use contents(). For example:

var inside = $('#one').contents();

answered Jul 3, 2013 at 10:37

Doug AmosDoug Amos

4,2331 gold badge21 silver badges23 bronze badges

Источник

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

Важен JavaScript, и HTML в точности такой.

УС: В разделе <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>

Источник

Минуточку внимания

Вам также может понравиться

Как составить предложение со словом листопад

Как составить список iptv каналов

Как найти значение вектора зная координаты

Добавить комментарий Отменить ответ