page_events.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  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. var sys = require("system"),
  22. page = require("webpage").create(),
  23. logResources = false,
  24. step1url = "http://en.wikipedia.org/wiki/DOM_events",
  25. step2url = "http://en.wikipedia.org/wiki/DOM_events#Event_flow";
  26. if (sys.args.length > 1 && sys.args[1] === "-v") {
  27. logResources = true;
  28. }
  29. function printArgs() {
  30. var i, ilen;
  31. for (i = 0, ilen = arguments.length; i < ilen; ++i) {
  32. console.log(" arguments[" + i + "] = " + JSON.stringify(arguments[i]));
  33. }
  34. console.log("");
  35. }
  36. ////////////////////////////////////////////////////////////////////////////////
  37. page.onInitialized = function() {
  38. console.log("page.onInitialized");
  39. printArgs.apply(this, arguments);
  40. };
  41. page.onLoadStarted = function() {
  42. console.log("page.onLoadStarted");
  43. printArgs.apply(this, arguments);
  44. };
  45. page.onLoadFinished = function() {
  46. console.log("page.onLoadFinished");
  47. printArgs.apply(this, arguments);
  48. };
  49. page.onUrlChanged = function() {
  50. console.log("page.onUrlChanged");
  51. printArgs.apply(this, arguments);
  52. };
  53. page.onNavigationRequested = function() {
  54. console.log("page.onNavigationRequested");
  55. printArgs.apply(this, arguments);
  56. };
  57. if (logResources === true) {
  58. page.onResourceRequested = function() {
  59. console.log("page.onResourceRequested");
  60. printArgs.apply(this, arguments);
  61. };
  62. page.onResourceReceived = function() {
  63. console.log("page.onResourceReceived");
  64. printArgs.apply(this, arguments);
  65. };
  66. }
  67. page.onClosing = function() {
  68. console.log("page.onClosing");
  69. printArgs.apply(this, arguments);
  70. };
  71. // window.console.log(msg);
  72. page.onConsoleMessage = function() {
  73. console.log("page.onConsoleMessage");
  74. printArgs.apply(this, arguments);
  75. };
  76. // window.alert(msg);
  77. page.onAlert = function() {
  78. console.log("page.onAlert");
  79. printArgs.apply(this, arguments);
  80. };
  81. // var confirmed = window.confirm(msg);
  82. page.onConfirm = function() {
  83. console.log("page.onConfirm");
  84. printArgs.apply(this, arguments);
  85. };
  86. // var user_value = window.prompt(msg, default_value);
  87. page.onPrompt = function() {
  88. console.log("page.onPrompt");
  89. printArgs.apply(this, arguments);
  90. };
  91. ////////////////////////////////////////////////////////////////////////////////
  92. setTimeout(function() {
  93. console.log("");
  94. console.log("### STEP 1: Load '" + step1url + "'");
  95. page.open(step1url);
  96. }, 0);
  97. setTimeout(function() {
  98. console.log("");
  99. console.log("### STEP 2: Load '" + step2url + "' (load same URL plus FRAGMENT)");
  100. page.open(step2url);
  101. }, 5000);
  102. setTimeout(function() {
  103. console.log("");
  104. console.log("### STEP 3: Click on page internal link (aka FRAGMENT)");
  105. page.evaluate(function() {
  106. var ev = document.createEvent("MouseEvents");
  107. ev.initEvent("click", true, true);
  108. document.querySelector("a[href='#Event_object']").dispatchEvent(ev);
  109. });
  110. }, 10000);
  111. setTimeout(function() {
  112. console.log("");
  113. console.log("### STEP 4: Click on page external link");
  114. page.evaluate(function() {
  115. var ev = document.createEvent("MouseEvents");
  116. ev.initEvent("click", true, true);
  117. document.querySelector("a[title='JavaScript']").dispatchEvent(ev);
  118. });
  119. }, 15000);
  120. setTimeout(function() {
  121. console.log("");
  122. console.log("### STEP 5: Close page and shutdown (with a delay)");
  123. page.close();
  124. setTimeout(function(){
  125. phantom.exit();
  126. }, 100);
  127. }, 20000);