1 | // The purpose of this is to show how and when events fire, considering 5 steps
|
---|
2 | // happening as follows:
|
---|
3 | //
|
---|
4 | // 1. Load URL
|
---|
5 | // 2. Load same URL, but adding an internal FRAGMENT to it
|
---|
6 | // 3. Click on an internal Link, that points to another internal FRAGMENT
|
---|
7 | // 4. Click on an external Link, that will send the page somewhere else
|
---|
8 | // 5. Close page
|
---|
9 | //
|
---|
10 | // Take particular care when going through the output, to understand when
|
---|
11 | // things happen (and in which order). Particularly, notice what DOESN'T
|
---|
12 | // happen during step 3.
|
---|
13 | //
|
---|
14 | // If invoked with "-v" it will print out the Page Resources as they are
|
---|
15 | // Requested and Received.
|
---|
16 | //
|
---|
17 | // NOTE.1: The "onConsoleMessage/onAlert/onPrompt/onConfirm" events are
|
---|
18 | // registered but not used here. This is left for you to have fun with.
|
---|
19 | // NOTE.2: This script is not here to teach you ANY JavaScript. It's aweful!
|
---|
20 | // NOTE.3: Main audience for this are people new to PhantomJS.
|
---|
21 |
|
---|
22 | var sys = require("system"),
|
---|
23 | page = require("webpage").create(),
|
---|
24 | logResources = false,
|
---|
25 | step1url = "http://en.wikipedia.org/wiki/DOM_events",
|
---|
26 | step2url = "http://en.wikipedia.org/wiki/DOM_events#Event_flow";
|
---|
27 |
|
---|
28 | if (sys.args.length > 1 && sys.args[1] === "-v") {
|
---|
29 | logResources = true;
|
---|
30 | }
|
---|
31 |
|
---|
32 | function printArgs() {
|
---|
33 | var i, ilen;
|
---|
34 | for (i = 0, ilen = arguments.length; i < ilen; ++i) {
|
---|
35 | console.log(" arguments[" + i + "] = " + JSON.stringify(arguments[i]));
|
---|
36 | }
|
---|
37 | console.log("");
|
---|
38 | }
|
---|
39 |
|
---|
40 | ////////////////////////////////////////////////////////////////////////////////
|
---|
41 |
|
---|
42 | page.onInitialized = function() {
|
---|
43 | console.log("page.onInitialized");
|
---|
44 | printArgs.apply(this, arguments);
|
---|
45 | };
|
---|
46 | page.onLoadStarted = function() {
|
---|
47 | console.log("page.onLoadStarted");
|
---|
48 | printArgs.apply(this, arguments);
|
---|
49 | };
|
---|
50 | page.onLoadFinished = function() {
|
---|
51 | console.log("page.onLoadFinished");
|
---|
52 | printArgs.apply(this, arguments);
|
---|
53 | };
|
---|
54 | page.onUrlChanged = function() {
|
---|
55 | console.log("page.onUrlChanged");
|
---|
56 | printArgs.apply(this, arguments);
|
---|
57 | };
|
---|
58 | page.onNavigationRequested = function() {
|
---|
59 | console.log("page.onNavigationRequested");
|
---|
60 | printArgs.apply(this, arguments);
|
---|
61 | };
|
---|
62 |
|
---|
63 | if (logResources === true) {
|
---|
64 | page.onResourceRequested = function() {
|
---|
65 | console.log("page.onResourceRequested");
|
---|
66 | printArgs.apply(this, arguments);
|
---|
67 | };
|
---|
68 | page.onResourceReceived = function() {
|
---|
69 | console.log("page.onResourceReceived");
|
---|
70 | printArgs.apply(this, arguments);
|
---|
71 | };
|
---|
72 | }
|
---|
73 |
|
---|
74 | page.onClosing = function() {
|
---|
75 | console.log("page.onClosing");
|
---|
76 | printArgs.apply(this, arguments);
|
---|
77 | };
|
---|
78 |
|
---|
79 | // window.console.log(msg);
|
---|
80 | page.onConsoleMessage = function() {
|
---|
81 | console.log("page.onConsoleMessage");
|
---|
82 | printArgs.apply(this, arguments);
|
---|
83 | };
|
---|
84 |
|
---|
85 | // window.alert(msg);
|
---|
86 | page.onAlert = function() {
|
---|
87 | console.log("page.onAlert");
|
---|
88 | printArgs.apply(this, arguments);
|
---|
89 | };
|
---|
90 | // var confirmed = window.confirm(msg);
|
---|
91 | page.onConfirm = function() {
|
---|
92 | console.log("page.onConfirm");
|
---|
93 | printArgs.apply(this, arguments);
|
---|
94 | };
|
---|
95 | // var user_value = window.prompt(msg, default_value);
|
---|
96 | page.onPrompt = function() {
|
---|
97 | console.log("page.onPrompt");
|
---|
98 | printArgs.apply(this, arguments);
|
---|
99 | };
|
---|
100 |
|
---|
101 | ////////////////////////////////////////////////////////////////////////////////
|
---|
102 |
|
---|
103 | setTimeout(function() {
|
---|
104 | console.log("");
|
---|
105 | console.log("### STEP 1: Load '" + step1url + "'");
|
---|
106 | page.open(step1url);
|
---|
107 | }, 0);
|
---|
108 |
|
---|
109 | setTimeout(function() {
|
---|
110 | console.log("");
|
---|
111 | console.log("### STEP 2: Load '" + step2url + "' (load same URL plus FRAGMENT)");
|
---|
112 | page.open(step2url);
|
---|
113 | }, 5000);
|
---|
114 |
|
---|
115 | setTimeout(function() {
|
---|
116 | console.log("");
|
---|
117 | console.log("### STEP 3: Click on page internal link (aka FRAGMENT)");
|
---|
118 | page.evaluate(function() {
|
---|
119 | var ev = document.createEvent("MouseEvents");
|
---|
120 | ev.initEvent("click", true, true);
|
---|
121 | document.querySelector("a[href='#Event_object']").dispatchEvent(ev);
|
---|
122 | });
|
---|
123 | }, 10000);
|
---|
124 |
|
---|
125 | setTimeout(function() {
|
---|
126 | console.log("");
|
---|
127 | console.log("### STEP 4: Click on page external link");
|
---|
128 | page.evaluate(function() {
|
---|
129 | var ev = document.createEvent("MouseEvents");
|
---|
130 | ev.initEvent("click", true, true);
|
---|
131 | document.querySelector("a[title='JavaScript']").dispatchEvent(ev);
|
---|
132 | });
|
---|
133 | }, 15000);
|
---|
134 |
|
---|
135 | setTimeout(function() {
|
---|
136 | console.log("");
|
---|
137 | console.log("### STEP 5: Close page and shutdown (with a delay)");
|
---|
138 | page.close();
|
---|
139 | setTimeout(function(){
|
---|
140 | phantom.exit();
|
---|
141 | }, 100);
|
---|
142 | }, 20000);
|
---|