How to get Page InnerHTML?-CodePudding

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>

CodePudding user response：

I think you might be looking for outerHTML property:

console.log(document.documentElement.outerHTML);

CodePudding user response：

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;