By continuing to use the site, you agree to the use of cookies. You can find out more by following this link. I Accept
navi icon
With javascript for javascript. first: open the chrome console click on the menu icon in the top right choose the option 'More tools', click next 'Developer Tools'.
2016-03-11 18:40:33
//create your own online editor with javascript and the chrome browser for javascript\r\n//\r\n//first: open the chrome console\r\n//click on the menu icon in the top right\r\n//choose the option 'More tools', click next 'Developer Tools'.\r\n//\r\n//The developer tools shows the console in the bottom.\r\n//\r\n/**\r\nclears the body\r\n*/\r\ndocument.body.innerHTML = '';\r\ndocument.body.className = '';\r\n//document.html.setAttribute('style','width: 100%; min-height: 100%; height: 100%;');\r\ndocument.body.setAttribute('style','width: 100%; min-height: 100%; height: 100%; text-align: left;');\r\ndocument.body.style.margin = '0';\r\ndocument.body.style.padding = '0';\r\n/** \r\n\r\n*/\r\nif (typeof area == 'undefined') {\r\n	window.area = document.createElement('textarea');\r\n}\r\ndocument.body.appendChild(area);\r\n/**\r\n*/\r\narea.style.width='50%';\r\narea.style.cssFloat='left';\r\narea.style.height=(window.innerHeight*0.8)+'px';\r\narea.style.resize='none';\r\narea.setAttribute('id','area');\r\n/***/\r\narea = document.querySelector('#area');\r\n/**\r\n*/\r\nif (typeof out == 'undefined') {\r\n	window.out = document.createElement('div');\r\n}\r\ndocument.body.appendChild(out);\r\n/**\r\n*/\r\nout.style.border='1px solid #ccc';\r\nout.style.width='49%';\r\nout.style.height=(window.innerHeight*0.8)+'px';\r\nout.style.padding='2px';\r\nout.style.float='left';\r\nout.setAttribute('id','out');\r\n/***/\r\nout = document.querySelector('#out');\r\n/**\r\n*/\r\n/*area.value = "document.body.innerHTML = '';\n" +\r\n"if (typeof area == 'undefined') { window.area = document.createElement('textarea'); }\n" +\r\n"document.body.appendChild(area);\n" +\r\n"area.style.width='50%';\n" +\r\n"area.style.cssFloat='left';\n" +\r\n"area.style.height=(window.innerHeight*0.8)+'px';\n" +\r\n"area.setAttribute('id','area');\n" +\r\n"area.style.resize='none';\narea = document.querySelector('#area');\n" +\r\n"if (typeof out == 'undefined') { window.out = document.createElement('div'); }\n" +\r\n"document.body.appendChild(out);\n" +\r\n"out.style.border='1px solid #ccc';\n" +\r\n"out.style.width='49%';\n" +\r\n"out.style.height=(window.innerHeight*0.8)+'px';\n" +\r\n"out.style.padding='2px';\n" +\r\n"out.style.float='left';\n" +\r\n"out.setAttribute('id','out');\nout = document.querySelector('#out');";*/\r\narea.placeholder = 'edit your code here';\r\n/**\r\n*/\r\nwindow.evalCode = function() { window.code = area.value; console.log(code); };\r\n/**\r\n*/\r\nwindow.buttonTest = document.createElement('button');\r\ndocument.body.appendChild(buttonTest);\r\n/**\r\n*/\r\nbuttonTest.innerText = 'test';\r\n/**\r\n*/\r\nbuttonTest.setAttribute('onclick', 'evalCode();');\r\n/*\r\nclick button test now\r\nrewrite fucntion evalCode\r\nthe button disapears\r\n*/\r\n\r\nwindow.code = '';\r\nevalCode = function() { code = area.value; console.log(code); window.func = Function('window','document',code); func(window,document); };\r\n\r\n/**\r\nappend the buttonTest again\r\n*/\r\ndocument.body.appendChild(buttonTest);\r\n/**\r\nor create a menu\r\n*/\r\nwindow.menu = document.createElement('div');\r\nmenu.style.position = 'absolute';\r\nmenu.style.bottom = 0;\r\nmenu.style.background = '#ddd';\r\nmenu.style.width = '100%';\r\ndocument.body.appendChild(menu);\r\ndocument.body.removeChild(buttonTest);\r\nmenu.appendChild(buttonTest);\r\n\r\nwindow.store = localStorage;\r\nsaveStore = function(key,value) { store.setItem(key, btoa(value)); };\r\nloadStore = function(key) { return atob(store.getItem(key)); };\r\n/***/\r\nwindow.buttonSave = document.createElement('button');\r\nmenu.appendChild(buttonSave);\r\nbuttonSave.innerText = 'save local';\r\nbuttonSave.setAttribute('onclick', 'code==\'\'?code = area.value:code; saveStore(\'code\',code);');\r\n/***/\r\nwindow.buttonLoad = document.createElement('button');\r\nmenu.appendChild(buttonLoad);\r\nbuttonLoad.innerText = 'load local';\r\nbuttonLoad.setAttribute('onclick', 'code = loadStore(\'code\'); area.value = code;');\r\n\r\n//why not about:blank, but any other webpage like the default searchpage from google.\r\n//if you perfome above code you will fail with the warningmessage\r\n//"VM48:99 Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document."\r\n//which means about:blank is a local unhosted webpage. For security reasons it is not allowed to perform any local \r\n//context (code) in the web(browser) and vici versa. \r\n//try instead on the default searchpage from google or run an empty webpage on a localhost 'web'-server\r\nconsole.log(localStorage.getItem('code'));\r\n//you can call\r\nwindow.func = new Function('window','document',atob(localStorage.getItem('code')));\r\nfunc(window,document);\r\n//and you see your webpage again;



Share the article: 




comments powered by Disqus
Wilfredo Lam in the Tate

Wilfredo Lam in the Tate

I know looking at pictures has some influence on ones state of mind. Because pictures are looking back.

The GDC2014 is coming

The GDC2014 is coming

and so I will be coming to San Francisco, too.