comment on

The JavaScript program on a web page can dynamically modify the page, so what you see has very little or no resemblance to the HTML source code! So, if you can scrape your web page using JavaScript, you get a peek at what's actually on the screen.

Here is an example. When you click on the "View HTML" button on this page, you'll see one thing. Then you click on the "Change" button which modifies the code, and then you click on View HTML again, and you'll see the code with some slight changes. The source code hasn't changed, but what's in the memory has changed, and when you get to harvest that, you get the real picture.

Here is the JavaScript program that harvests the HTML code:

var DATA = document.all[0].innerHTML;

If the block of HTML code you're trying to harvest is marked with an ID tag like this:

<DIV ID="Part3">
...

OR

<P ID="MyText">
...

OR

<TABLE ID="Table2">
...
[download]

then you don't need to harvest the entire HTML page. All you have to do is harvest whatever is tagged. So, you would just do this:

var DATA = document.getElementById("Part3").innerHTML;

Instead of using "innerHTML," you could also use "innerText" which gives you only the plain text without all the HTML tags and whatnot:

var DATA = document.getElementById("Part3").innerText;

Once you have the code in the DATA variable, then you can run a regex or something to get the actual number you're looking for.. JavaScript regex works like perl's.


<HTML>
<BODY>
<NOSCRIPT>
<DIV STYLE="BACKGROUND-COLOR:RED; COLOR:WHITE; FONT-FAMILY:ARIAL;"><CE
+NTER>This page requires JavaScript.</CENTER>
</DIV>
</NOSCRIPT>
<H3 ID="HEADING">Welcome</H3>
<DIV ID="CONTENT">
<P>This is a very simple HTML page.
<P><INPUT TYPE=BUTTON VALUE=" View HTML " onClick="ViewHTML();">
<INPUT TYPE=BUTTON VALUE=" Change " onClick="DoSomething();">
</DIV>

<SCRIPT>
function ViewHTML() {
  var DATA = document.all[0].innerHTML;
  alert("This is the page content as seen from JavaScript:\n\n" + DATA
+);
}

function DoSomething() {
  document.getElementById("HEADING").innerHTML = "<FONT COLOR=BLUE>DEA
+R VISITOR</FONT>";
  var MyCONTENT = document.getElementById("CONTENT");
  MyCONTENT.innerHTML = "<FONT COLOR=RED>" + MyCONTENT.innerHTML;
}
</SCRIPT>
[download]

I tested the above code, and it works in Firefox 52, KMeleon 7.5, QupZilla 1.8.6, Safari 5.1.7, Google Chrome 75, Internet Explorer 6, Opera 7.5, and Vivaldi 1.0. I have also tested it with an iPhone 7, Nokia Lumia 930 Windows Phone and an old Android 6 tablet. I haven't used any "ultra modern technology" that will break your phones. Everything in this example script is pretty standard.

Once you get the number you want to send back to your perl script, you could send it back by loading a picture:


<HTML>
<BODY>
<IMG NAME=PIX6 BORDER=0 WIDTH=1 HEIGHT=1 STYLE="POSITION:ABSOLUTE; TOP
+:0; LEFT:0;">

<SCRIPT>

NUMBER = 90;
document.images.PIX6.src = "http://www.yourwebsite.com/yourscript.pl?"
+ + NUMBER;
</SCRIPT>
[download]

Here you're sending the number 90 back to your perl script.

You could also signal to your perl script when somebody loads your web page with JavaScript turned off by putting a picture within the NOSCRIPT tags. Whatever you put between the NOSCRIPT tags will only appear when JavaScript is disabled on the page:

<NOSCRIPT>

<IMG SRC="http://www.yourwebsite.com/yourscript.pl?N" BORDER=0 WIDTH=1
+ HEIGHT=1 STYLE="POSITION:ABSOLUTE; TOP:0; LEFT:0;">

</NOSCRIPT>
[download]

In reply to Re: Running JavaScript from within Perl by harangzsolt33
in thread Running JavaScript from within Perl by anautismobserver

Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!

Titles consisting of a single word are discouraged, and in most cases are disallowed outright.

Read Where should I post X? if you're not absolutely sure you're posting in the right place.

Please read these before you post! —

Posts may use any of the Perl Monks Approved HTML tags:

a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, details, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr

You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)

	For:		Use:
	&		`&`
	<		`<`
	>		`>`
	[		`[`
	]		`]`

Link using PerlMonks shortcuts! What shortcuts can I use for linking?

See Writeup Formatting Tips and other pages linked from there for more info.