Cut And Paste Code For Lesson 13


This week we'll learn how to display and size any webpage within our JavaScript window.
And, how to plot a point anywhere on the page.
We're working toward our new application, which is a "keep alive" page clicker!!!!
We'll also practice using Notpad++ to program off line.
Click here to go back to our lessons page.


 Here is the code that creates a link, then clicks on the link:

<html>
<head>
</head>
<body>
<a href="http://www.google.com" id="mylink">Click Me</a>
<script language="Javascript" type="text/javascript">
document.getElementById('mylink').click()
</script>
</body>
</html>

 

The HTML command "iframe" allows you to display a web page at any size within your JavaScript project:

<!DOCTYPE html>
<html>

<iframe width="800" height="600" src="http://www.noonco.com"></iframe>

<body>
<script>
</body>
</html>

 

The following JavaScript demonstrates importing a web page, creating a page sized JS frame, and simulating a mouse click.
It almost works, but needs some additional code, so check back as we update it!

<!DOCTYPE html>
<html>
<iframe width="800" height="600" src="http://www.noonco.com"></iframe>
<body>
<script>
// Create a canvas that extends the entire screen
// and it will draw right over the other html elements, like buttons, etc
var canvas = document.createElement("canvas");
canvas.setAttribute("width", window.innerWidth);
canvas.setAttribute("height", window.innerHeight);
canvas.setAttribute("style", "position: absolute; x:0; y:0;");
document.body.appendChild(canvas);
//Then you can draw a point at (10,10) like this:
var ctx = canvas.getContext("2d");
ctx.fillRect(10,65,10,10);
//function simulateClick(x, y) {
//    jQuery(document.elementFromPoint(x, y)).click();
//}
//simulateClick(100, 250);
//simulateClick(400, 250);
</script>
</body>
</html>