Home » Html » How to display some HTML by typing it into the address bar?

How to display some HTML by typing it into the address bar?

Posted by: admin November 29, 2017 Leave a comment

Questions:

Is there a way to have the browser display a given HTML page by pasting the HTML code into the address bar and then typing Enter?
Browser is Google Chrome. Unfortunately, if I paste the HTML and then hit enter, it redirects to the Google search site… which is not what I want!


I want to paste the HTML code, such as <html><body>…</body></html>

Another option I thought about is to paste something like

javascript:document.write(‘<html><body>…</body></html>’);

but that appends the HTML to the current page, while I want to reset the page contents instead.

Answers:

You can use data:text/html, an example:

data:text/html,<h1>Hello World</h1><script>alert('JavaScript works too!');</script>

Other examples of data URIs: https://developer.mozilla.org/en/data_URIs

Questions:
Answers:
javascript:document.write("your code here");

Questions:
Answers:

Or, to make things even easier if you need different HTML displayed at different times, try putting this in the address bar then entering the HTML into the prompt. This JavaScript that goes in the address bar is called a bookmarklet, and if you need to do this often you can add it as a bookmark/favourite for easy access.

javascript:document.write(prompt('Enter the HTML', ''));

Questions:
Answers:

URL: javascript:document.write('foo');

You can display HTML data using DOM manipulation, but you can’t directly input HTML.

Questions:
Answers:
javascript:void(document.write("<html style='color:red'>HTML goes here</html>"))

Questions:
Answers:

You can do this with this:

javascript:document.location.replace( 'about:Blank' ); javascript:void(document.write("<html>HTML here</html>"));

If you want to open a new tab/screen and show it there you can use this:

javascript:window.open("javascript:void(document.write('<html>HTML here</html>'));", "test");

Not sure how this works with chrome tho.

Questions:
Answers:

You can also do it directly in your browser like this if using chrome (tested on mac). Just paste it in the adressbar and voilá you can copy the tab char.

data:text/html,<pre>&#9</pre>