A HTML to Javascript Converter for Writing to New Tabs


This HTML to Javascript Converter has been specially built to allow developers to write code that programmatically opens a new tab together with text or code of his / her choice:





The code you may enter in the box above should be nothing else than the source of a working HTML-file (your domain). Inserting that code into the box and following the instructions will allow you to write the result of the (original) inserted code to a new tab.

This way you can write an iframe plus some text outside it, for instance, to a new tab. A typical example would be (the red line produces the close button for the new tab):
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Custom New Tab </title>
</head>
<body >
<div style="position: absolute; top: 0px; right: 2px; font-family: verdana; font-size: 18px; color: white; background: gray; cursor: pointer; padding-left:5px; padding-right: 5px" onclick="window.close()">X</div>
<div style="text-align: center; font-family: verdana; font-size: 16px; position: relative; top: 10px" >Hello from <i>some_site.com</i>. </div>
<div style="position: fixed; left: 50px; top: 100px; right: 50px; bottom: 100px; padding: 5px; border: 1px solid black; border-radius: 5px">
<iframe src="http://wikipedia.com" style="height: 100%; width: 100%; border:0;">
</iframe>
</div>
</body>
</html>

This gives the

Here's the code (to be entered into the box) for loading some title-text together with an image and a script that specifies the height of the image:
<!doctype html>
<html>
<head>
<title>My village</title>
</head>
<body style="font-family: verdana; font-size: 12px; ">
<div style="position: absolute; top: 0px; right: 2px; font-family: verdana; font-size: 18px; color: white; background: gray; cursor: pointer; padding-left:5px; padding-right: 5px; z-index: 1" onclick="window.close()">X</div>
<div style="position: absolute; left:0; top:10px; right:0; bottom: 0; overflow: auto">
<div id='the_caption' style='text-align: center; margin-top: 10px; margin-bottom: 10px; background: white'>
<b>Johan Dijkstra</b> (1896-1978): <i>Kerkje te Ezinge</i> </div>
<div id='content_without_the_caption' style='position: relative; text-align: center'>
<img style='height: 100%; border: 1px solid black; ' alt='' src='http://www.westnieuws.nl/wp-content/uploads/2015/05/Kerkje-Ezinge-Johan-Dijkstra-620x330.jpeg'>
</div>
<script>
function height()
{document.getElementById('content_without_the_caption').style.height=window.innerHeight-document.getElementById('the_caption').clientHeight-60+'px'}
height();
window.onresize=function(){height()}
</script>
</div>
</body>
</html>

Entering this code into the box should produce

How about playing an embedded YouTube-video in a new tab? This code would do it:
<!doctype html>
<html>
<head>
<title>Russian Easter Festival</title>
</head>
<body style="background: gray; color: white; font-weight: bold">
<div style="position: absolute; top: 0px; right: 2px; font-family: verdana; font-size: 18px; color: white; background: gray; cursor: pointer; padding-left:5px; padding-right: 5px; z-index: 1" onclick="window.close()">X</div>
<div style="font-family: verdana; font-size: 13px; text-align: center">
Nikolaj Rimski-Korsakov - Russian Easter Festival Op. 36<br>
Philharmonie Zuidnederland, Stefan Blunier
</div>
<div style="position: fixed; left: 30px; top: 70px; right: 30px; bottom: 30px">
<iframe style="width: 100%; height: 100%" src="https://www.youtube.com/embed/9YF4hMFfSig?rel=0&vq=large" frameborder="0" allowfullscreen>
</iframe>
</div>
</body>
</html>

Here's the of inserting the code into the box.

Of course, you can leave things very simple by just entering some text into the box and leaving out the close button:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Custom New Tab </title>
</head>
<body >
So simple!
</body>
</html>




Enjoy!
Arie Molendijk, mesdomaines.nu