This repository has been archived by the owner on Oct 8, 2021. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
First pass implementation of a page event logger bookmarklet to help …
…us quickly diagnose navigation problems for external jQuery Mobile sites. Users can either follow the instructions for using/setting up the bookmarklet in log-page-events.html, or simply include the log-page-events.js directly in their source.
- Loading branch information
Showing
2 changed files
with
132 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
<!DOCTYPE HTML> | ||
<html> | ||
<head> | ||
<meta charset="utf-8"> | ||
<meta name="viewport" content="width=device-width"> | ||
<title>Page Event Logger Bookmarklet</title> | ||
</head> | ||
|
||
<body> | ||
<h1>Page Event Logger Bookmarklet</h1> | ||
<p>A simple bookmarklet for logging jQuery Mobile page events. To use, bookmark the following link:</p> | ||
<script> | ||
document.write('<p><a id="bookmarklet-link" href="javascript:function loadScript(u){var s=document.createElement(\'script\');s.setAttribute(\'language\',\'javascript\');s.setAttribute(\'src\',u);document.body.appendChild(s);} loadScript(\'' + ( location.href.replace( /\.html/, ".js" ) ) + '\');">Page EventLogger Bookmark</a></p>'); | ||
</script> | ||
<p>For platforms that don't allow bookmarking of <code>javascript:</code> urls, you can copy/paste the following source for the bookmarklet directly into the browser's location bar then hit enter or hit the "go" button on your keypad:</p> | ||
<p> | ||
<textarea id="ta" rows="10" cols="50"></textarea> | ||
</p> | ||
<p>NOTE: Some browsers like Chrome will strip off the javascript: prefix from the string above when you paste it into the location bar. Make sure what you pasted is prefixed by javascript: before attempting to load the bookmarklet.</p> | ||
<script> | ||
document.getElementById("ta").value = document.getElementById("bookmarklet-link").href; | ||
</script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,108 @@ | ||
/*! | ||
* jQuery Mobile v@VERSION | ||
* http://jquerymobile.com/ | ||
* | ||
* Copyright 2011, jQuery Project | ||
* Dual licensed under the MIT or GPL Version 2 licenses. | ||
* http://jquery.org/license | ||
*/ | ||
|
||
// This is code that can be used as a simple bookmarklet for debugging | ||
// page loading and navigation in pages that use the jQuery Mobile framework. | ||
// All messages are sent to the browser's console.log so to see the messages, | ||
// you need to make sure you enable the console/log in your browser. | ||
|
||
(function($, window, document) { | ||
if ( typeof $ === "undefined" ) { | ||
alert( "log-page-events.js requires jQuery core!" ); | ||
return; | ||
} | ||
|
||
var pageEvents = "mobileinit pagebeforechange pagechange pagechangefailed pagebeforeload pageload pageloadfailed pagebeforecreate pagecreate pageinit pagebeforeshow pageshow pagebeforehide pagehide pageremove"; | ||
|
||
function getElementDesc( ele ) | ||
{ | ||
var result = []; | ||
if ( ele ) { | ||
result.push( ele.nodeName.toLowerCase() ); | ||
var c = ele.className; | ||
if ( c ) { | ||
c = c.replace( /^\s+|\s+$/, "" ).replace( /\s+/, " " ); | ||
if (c) { | ||
result.push( "." + c.split( " " ).join( "." ) ); | ||
} | ||
} | ||
if ( ele.id ){ | ||
result.push( "#" + ele.id ) | ||
} | ||
} | ||
return result.join( "" ); | ||
} | ||
|
||
function debugLog( msg ) | ||
{ | ||
console.log( msg ); | ||
} | ||
|
||
function getNativeEvent( event ) { | ||
|
||
while ( event && typeof event.originalEvent !== "undefined" ) { | ||
event = event.originalEvent; | ||
} | ||
return event; | ||
} | ||
|
||
function logEvent( event, data ) | ||
{ | ||
var result = event.type + " (" + (new Date).getTime() + ")\n"; | ||
|
||
switch( event.type ) | ||
{ | ||
case "pagebeforechange": | ||
case "pagechange": | ||
case "pagechangefailed": | ||
result += "\tpage: "; | ||
if ( typeof data.toPage === "string" ) { | ||
result += data.toPage; | ||
} else { | ||
result += getElementDesc( data.toPage[ 0 ] ) + "\n\tdata-url: " + data.toPage.jqmData( "url" ); | ||
} | ||
result += "\n\n" | ||
break; | ||
case "pagebeforeload": | ||
case "pageloadfailed": | ||
result += "\turl: " + data.url + "\n\tabsUrl: " + data.absUrl + "\n\n"; | ||
break; | ||
case "pageload": | ||
result += "\turl: " + data.url + "\n\tabsUrl: " + data.absUrl + "\n\tpage: " + getElementDesc( data.page[ 0 ] ) + "\n\n"; | ||
break; | ||
case "pagebeforeshow": | ||
case "pageshow": | ||
case "pagebeforehide": | ||
case "pagehide": | ||
result += "\tpage: " + getElementDesc( event.target ) + "\n"; | ||
result += "\tdata-url: " + $( event.target ).jqmData( "url" ) + "\n\n"; | ||
break; | ||
case "pagebeforecreate": | ||
case "pagecreate": | ||
case "pageinit": | ||
result += "\telement: " + getElementDesc( event.target ) + "\n\n"; | ||
break; | ||
case "hashchange": | ||
result += "\tlocation: " + location.href + "\n\n"; | ||
break; | ||
case "popstate": | ||
var e = getNativeEvent( event ); | ||
result += "\tlocation: " + location.href + "\n"; | ||
result += "\tstate.hash: " + ( e.state && e.state.hash ? e.state.hash + "\n\n" : "" ); | ||
break; | ||
} | ||
|
||
debugLog( result ); | ||
} | ||
|
||
// Now add our logger. | ||
$( document ).bind( pageEvents, logEvent ); | ||
$( window ).bind( "hashchange popstate", logEvent ); | ||
|
||
})( jQuery, window, document ); |