forked from lingtalfi/where-is-focus-bookmarklet
-
Notifications
You must be signed in to change notification settings - Fork 0
MasterInQuestion/showHTML
This branch is 4 commits ahead of lingtalfi/where-is-focus-bookmarklet:master.
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Latest commit | ||||
Repository files navigation
".js" files in this repository are unrolled versions of the bookmarklet. ".lite" postfixed are versions optimized for modern mainstream browsers. (legacy polyfills removed) [ ".lite" |*| !showHTML (Click) |*| javascript: (function () { var x0 = document.createElement( "textarea" ); x0.style = "position: fixed; z-index: 2147483647; left: 0; top: 0; width: 100%; height: " + ( document.documentElement.clientHeight * 0.25 ) + "px; opacity: 0.8; color: black; background-color: white"; x0.onfocus = function () { this.style.opacity = 1; }; x0.onblur = function () { this.parentNode.removeChild( this ); document.body.removeChild( x1 ); }; var x1 = document.createElement( "div" ); x1.style.height = x0.style.height; var insert = function () { document.body.insertBefore( x1, document.body.firstChild ); document.body.insertBefore( x0, x1 ); }; try { var f0 = function ( event ) { removeEventListener( "mousedown", f0 ); removeEventListener( "touchstart", f0 ); x0.innerText = event.target.outerHTML; insert(); }; addEventListener( "mousedown", f0 ); addEventListener( "touchstart", f0 ); } catch ( e ) { x0.innerText = e; insert(); }; })(); ] [ |*| !showHTML (Click) |*| javascript: (function () { var x0 = document.createElement( "textarea" ); x0.style.cssText = "position: fixed; z-index: 2147483647; left: 0; top: 0; width: 100%; height: " + ( document.documentElement.clientHeight * 0.25 ) + "px; opacity: 0.8; color: black; background-color: white"; x0.onfocus = function () { this.style.opacity = 1; }; x0.onblur = function () { this.parentNode.removeChild( this ); document.body.removeChild( x1 ); }; var x1 = document.createElement( "div" ); x1.style.height = x0.style.height; ( document.body ) || ( document.body = document.getElementsByTagName( "body" )[0] ); var insert = function () { document.body.insertBefore( x1, document.body.firstChild ); document.body.insertBefore( x0, x1 ); }; try { var f0; if ( typeof addEventListener === "function" ) { f0 = function ( event ) { removeEventListener( "mousedown", f0, false ); removeEventListener( "touchstart", f0, false ); x0.innerText = event.target.outerHTML; insert(); }; addEventListener( "mousedown", f0, false ); addEventListener( "touchstart", f0, false ); } else { f0 = function () { document.documentElement.detachEvent( "onmousedown", f0 ); x0.innerText = event.srcElement.outerHTML; insert(); }; document.documentElement.attachEvent( "onmousedown", f0 ); }; } catch ( e ) { x0.innerText = e; insert(); }; })(); |*| Note: This should theoretically work with IE6. Though which has an URI length limit of ~ 502 Bytes. ] [ |*| !showHTML (Focus) |*| javascript: (function () { var x0 = document.createElement( "textarea" ); try { x0.innerText = document.activeElement.outerHTML; } catch ( e ) { x0.innerText = e; }; x0.style.cssText = "position: fixed; z-index: 2147483647; left: 0; top: 0; width: 100%; height: " + ( document.documentElement.clientHeight * 0.25 ) + "px; opacity: 0.8; color: black; background-color: white"; x0.onfocus = function () { this.style.opacity = 1; }; x0.onblur = function () { this.parentNode.removeChild( this ); document.body.removeChild( x1 ); }; var x1 = document.createElement( "div" ); x1.style.height = x0.style.height; ( document.body ) || ( document.body = document.getElementsByTagName( "body" )[0] ); document.body.insertBefore( x1, document.body.firstChild ); document.body.insertBefore( x0, x1 ); })(); |*| Note: [[ "document.activeElement" won't give the expected result for most cases. Using `document.querySelector( ":focus" )` wouldn't help either. See also: https://stackoverflow.com/q/497094 ]] ] The bookmarklet has much functional overlap with 【F12】 Developer tools' element picker. (and in general inferior) It's primarily intended for mobile browsers: which typically lack the DevTools, meanwhile probably also have broken handling for "mouseover" alike: rendering elements that relied on such much inaccessible. The bookmarklet should somewhat workaround this issue.
About
JavaScript bookmarklet to display the HTML of chosen element.
Topics
Resources
Stars
Watchers
Forks
Languages
- JavaScript 100.0%