Firstly, I’m in Visby for a conference regarding museum exhibitions in Sweden with a project in availability and norm criticism, meaning I have been working from a hotel room during the spare hours. This is bad because I don’t have my good desktop rig, but then again it is often good for my concentration and thereby inspiration. SO, my previous success with finding out just how easy it is to create a webpage which works as a site editor with an iframe came to a abrupt stop.
I realized that appending JS lib references to iframes via the src mime-method did not cause the libraries to actually load. I tried a lot of stuff, including alternate ways of injecting JS libraries into iframes, either with no success or making the page load extremely slow, and deserting iframes all together. Working with something else than an iframe however proved disadvantageous since other ways don’t simulate an actual separate web pages as well.
Eventually, I came up with a working solution. I let the iframe load a normal HTML file which includes necessary libraries and then use an invisible iframe in between in order to be able to use the magic of “encodeURIComponent”. I can then extract the body and other parts from the invisible iframe and replace the contents of my prepared, iframed site. This way the JS lib refs are kept intact and I still have dynamic HTML. For the styling I use a style tag with a certain id which I update the contents of in the prepared webpage.
I have also added separate editors for markup (HTML) and styling (CSS). The next step will be to make it so that resizing divs in the output window actually changes the styling on the editor side. Then I will work on a simple way to connect dynamic database content and after that syntax highlighting and neat editor controls.