Skip to content

MasterInQuestion/showHTML

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 

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%