How to get Page InnerHTML?

Question

This question isn't solved yet.

Given a webpage with the following page source (as it appears under right click -> page source option):

<head><script language="javascript" type="text/javascript">
var framePara = new Array(
0,
"main.htm",
1,
0,0 );
</script>
<script language="javascript" type="text/javascript">
var indexPara = new Array(
"192.168.0.1",
1742822853,
"tplinklogin.net",
0,0 );
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>TL-WR845N</title>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="wed, 26 Feb 1997 08:21:57 GMT">
<link href="../dynaform/css_main.css" rel="stylesheet" type="text/css">
<script language="javascript" src="../dynaform/common.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript"><!--
//--></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript" src="../localiztion/char_set.js" type="text/javascript">
</script><script type="text/javascript">
var startUrl = "";
var startHelpUrl = "";
if(framePara[0] == 1)
{
    startUrl = "../userRpm/WzdStartRpm.htm";
    startHelpUrl = "../help/WzdStartHelpRpm.htm";
}
else
{
    startUrl = "../userRpm/StatusRpm.htm";
    /*changed by ZQQ, 2015.7.25, corresponding to function StatusRpmHtm*/
    if (framePara[2] == 0x08 || framePara[2] == 0x07 || framePara[2] == 0x06 || framePara[2] == 0x03)
    {
        startHelpUrl = "../help/StatusHelpRpm_AP.htm";
    }
    else if (framePara[2] == 0x04)
    {
        startHelpUrl = "../help/StatusHelpRpm_APC.htm";
    }
    else
    {
        startHelpUrl = "../help/StatusHelpRpm.htm";
    }
}
document.write("<FRAMESET rows=90,*>");
document.write("<FRAME name=topFrame marginWidth=0 marginHeight=0 src=\"../frames/top.htm\" noResize scrolling=no frameSpacing=0 frameBorder=0 id=\"topFrame\">");
document.write("<FRAMESET cols=182,55%,*>");
document.write("<FRAME name=bottomLeftFrame marginWidth=0 marginHeight=0 src=\"../userRpm/MenuRpm.htm\" noResize frameBorder=1 scrolling=auto style=\"overflow-x:hidden\" id=\"bottomLeftFrame\">");
document.write("<FRAME name=mainFrame marginWidth=0 marginHeight=0 src=" +startUrl+" frameBorder=1 id=\"mainFrame\">");
document.write("<FRAME name=helpFrame marginWidth=0 marginHeight=0 src="+startHelpUrl+" frameBorder=1 id=\"helpFrame\">");
document.write("</FRAMESET>");
</script></head>

        
    
<frameset rows="90,*"><frame name="topFrame" marginwidth="0" marginheight="0" src="../frames/top.htm" noresize="" scrolling="no" framespacing="0" frameborder="0" id="topFrame"><frameset cols="182,55%,*"><frame name="bottomLeftFrame" marginwidth="0" marginheight="0" src="../userRpm/MenuRpm.htm" noresize="" frameborder="1" scrolling="auto" style="overflow-x:hidden" id="bottomLeftFrame"><frame name="mainFrame" marginwidth="0" marginheight="0" src="../userRpm/StatusRpm.htm" frameborder="1" id="mainFrame"><frame name="helpFrame" marginwidth="0" marginheight="0" src="../help/StatusHelpRpm.htm" frameborder="1" id="helpFrame"></frameset>

<noframes>
    <body id="t_noFrame">Please upgrade to a version 4 or higher browser so that you can use this setup tool.</body>
</noframes>


</frameset>

which JS command can be helpful to retrive the full Inspect element html code?

I have tried the following (and other variations):

document.documentElement.innerHTML;

But that didn't work too as I'm yet getting the output as in page source and no as in inspect element.

while some of what I'm expecting:

<frameset rows="90,*"><frame name="topFrame" marginwidth="0" marginheight="0" src="../frames/top.htm" noresize="" scrolling="no" framespacing="0" frameborder="0" id="topFrame"><frameset cols="182,55%,*"><frame name="bottomLeftFrame" marginwidth="0" marginheight="0" src="../userRpm/MenuRpm.htm" noresize="" frameborder="1" scrolling="auto" style="overflow-x:hidden" id="bottomLeftFrame"><frame name="mainFrame" marginwidth="0" marginheight="0" src="../userRpm/StatusRpm.htm" frameborder="1" id="mainFrame"><frame name="helpFrame" marginwidth="0" marginheight="0" src="../help/StatusHelpRpm.htm" frameborder="1" id="helpFrame"></frameset>

<noframes>
    <body id="t_noFrame">Please upgrade to a version 4 or higher browser so that you can use this setup tool.</body>
</noframes>


</frameset>

`document.head.innerHTML` and `document.body.innerHTML` might do the trick, provided they are defined. — mardubbles, Apr 10 '22 at 02:37
Just tested both here on SO, so maybe share your code on why it didnt work. I literally opened browser dev tools and in the console typed `document.head.innerHTML` and `document.body.innerHTML`. No errors. — mardubbles, Apr 10 '22 at 02:39
it's a specific website, can I send you PM with login information? it's not a matter of no errors I'm getting the output as in page source not as in inspect element — Roi, Apr 10 '22 at 02:40
If its a specific website you want the source of, consider using a server-side language (e.g. PHP) to grab the contents. — mardubbles, Apr 10 '22 at 02:42
@mardubbles I mean I want general solution but don't understand why it's not working for the above website... — Roi, Apr 10 '22 at 02:43
Check https://www.w3schools.com/jsref/prop_html_innerhtml.asp to understand the differences between innerHTML, innerText, and textContent. " getting the output as in page source and no as in inspect element" is not clear - tell us what you get and what is expected in detail. — Christian, Apr 10 '22 at 02:44
If website uses frames/iframes, you can't access source of them from main page javascript — vanowm, Apr 10 '22 at 02:56

vanowm · Answer 1 · 2022-04-10T02:47:11.237

0

I think you might be looking for outerHTML property:

console.log(document.documentElement.outerHTML);

edited Apr 10 '22 at 02:47

answered Apr 10 '22 at 02:45

vanowm

9,466
2
21
37

Could be that OP wants to grab a page contents that he or she doesn't have access to, to even run the script. An XY problem. Inferred by the need to run such a script when would already have access to the full code. – mardubbles Apr 10 '22 at 02:46
@vanovm Good catch! Just reading https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML as I am interested in the details: "The outerHTML attribute of the Element DOM interface gets the serialized HTML fragment describing the element including its descendants. It can also be set to replace the element with nodes parsed from the given string. To only obtain the HTML representation of the contents of an element, or to replace the contents of an element, use the innerHTML property instead." – Christian Apr 10 '22 at 02:48
1

It is a good catch though, I agree too. OP might need to explain what their end-goal is. outerHTML will also get the inline "attributes" on the container. – mardubbles Apr 10 '22 at 02:49
Didn't work too as tested on: http://103.225.93.197/ – Roi Apr 10 '22 at 02:50
103.225.93.197 is your router/network @Roi - please share what you get and what you expect in detail. What is "the full Inspect element html code"? – Christian Apr 10 '22 at 02:51
1

Didn't work how? – vanowm Apr 10 '22 at 02:51
@Christian already mentioned in my question, it's a friends router. – Roi Apr 10 '22 at 02:52
@vanowm compare what you get to what is shown in inspect element, not the same (after you do login) – Roi Apr 10 '22 at 02:52
2

gosh...someone has opened router access through internet and posted it to the public??? – vanowm Apr 10 '22 at 02:52
@vanowm yes were closing it as soon as this is resolved – Roi Apr 10 '22 at 02:57
@vanowm were u able to verify that the above doesn't work as expected? – Roi Apr 10 '22 at 02:58
In the meantime, I'll have a look at your file system @Roi. Just joking. Someone else however could be serious. – mardubbles Apr 10 '22 at 02:58
looks pretty much [exactly the same](https://i.imgur.com/qDLSfkz.png) to me. There are some differences, but it's probably due to browser is trying correct incorrect format. – vanowm Apr 10 '22 at 03:08
@vanowm it's clearly not.... have you logged in? I can't see all the buttons in your output – Roi Apr 10 '22 at 09:28
@vanowm any updates? – Roi Apr 10 '22 at 18:46
Sorry, I don't know what you need, your description of the issue is not clear, there is no "right click" on the page allowed, the source of the page is the same as the elements tab in the dev tools. So, I'm lost. – vanowm Apr 10 '22 at 22:06
@vanowm can we have a chat so we can talk for 1 min? – Roi Apr 11 '22 at 18:54

score 0 · Answer 2 · answered Apr 10 '22 at 22:42

0

Element.outerHTML

The outerHTML attribute of the Element gets the serialized HTML fragment describing the element including its descendants. It can also be set to replace the element with nodes parsed from the given string. However to only obtain the HTML representation of the contents of an element ideally you need to use the innerHTML property instead. So reading the value of outerHTML returns a DOMString containing an HTML serialization of the element and its descendants. Setting the value of outerHTML replaces the element and all of its descendants with a new DOM tree constructed by parsing the specified htmlString.

Essentially you should be using:

document.documentElement.outerHTML;

answered Apr 10 '22 at 22:42

undetected Selenium

183,867
41
278
352

Hi, If you kindly try this in browser at: 103.225.93.197 you will notice that it's not working (login with admin:admin) – Roi Apr 11 '22 at 03:49
Status Page, right? – undetected Selenium Apr 11 '22 at 05:48
It's a router login page, login with username: admin, password:admin and run your command in browser. You can notice the output isn't similar to inspect element output. – Roi Apr 11 '22 at 09:52

Christian · Answer 3 · 2022-04-12T21:31:59.623

0

My conclusion, you are or your try to access the wrong page

Your code document.documentElement.innerHTML; code gives you the <noframes> element (see noframes on developer.mozilla.org) .

<noframes>
    <body id="t_noFrame">Please upgrade to a version 4 or higher browser so that you can use this setup tool.</body>
</noframes>

I guess you are either looking at the login page or any page similar to this:

Try to access the content of a single frame

You can try to access the conten of the single frames by reading and using their names, for example <FRAME name=mainFrame>, see How can I get an element from within a frameset frame using JavaScript?.

Try window.frames[1].document.getElementById('someElementId')

Download the complete website

There are some alternatives to download the complete website, see Is it possible to download a websites entire code, HTML, CSS and JavaScript files?.

edited Apr 12 '22 at 21:31

answered Apr 12 '22 at 21:15

Christian

4,902
4
24
42

Hi, still doesn't answer my question... I don't want to get content of specific element I'm asking how to get it all using selenium. as I said you can try to run in in console after you login you will notice all "solutions" have same output as source code not inspect element... – Roi Apr 13 '22 at 04:12
Selenium was not mentioned before. The frameset is [built dynamically at runtime](https://stackoverflow.com/questions/7317911/dynamically-insert-a-frame-inside-a-frameset-as-first-frame-in-native-javascript). To access a specific frame; you can still use something link `driver.switch_to.frame(1)` – Christian Apr 13 '22 at 07:16

How to get Page InnerHTML?

3 Answers3

Element.outerHTML

Try to access the content of a single frame

Download the complete website