Development Frameset

So I've been working on a JavaScript tool that will control the linking and display of an element on a web page. The content will be generated by the script and will naturally be dependent on parameters passed and properties of objects. And just like any script its got to be tested in lots of web browsers.

Eventually I'll be using document.write to place the content onto the page, but while developing the page I change the innerHTML of a div within the page. That also means that when I change the settings I can regenerate the block and see if everything is working. Now some people might ask why not just stick with innerHTML instead of document.write, but this approach will allow me to have no impact on the layout if JavaScript is disabled and to have multiple of these elements within a page if needed. Some coders might think document.write is antiquated, but I believe in using the right tool for the job, even if they are a little well-worn.

<div id="show"></div>

var block = document.getElementById("show")

block.innerHTML=generatedElements

Now as I am working on this I want to be able to change the attributes of the object that controls the display. One easy way to do this is to add controls. I could add them to the same document, but then my test document becomes less reflective of the documents that will hold the code in the end. Also, my test document has to meet some requirements -- for example, it has to be a template-based document -- and I didn't want to mess that up.

So what I did was make a frameset with controls on the left frame and my test document on the right. Now I can enter exactly the parameters that I want to test and see the results immediately.

What makes this a little slicker is that I named each form element that controls an attribute "atr_XXXX" where "XXXX" is the name of the attribute to be modified within the object. Now I simply cycle through the form's elements and modify the object's attribute with that name (I use eval to make is simpler). And because its in another frame I have to poke at it with parent.rightFrame. I think it works really well.

function Update() {
  if (parent) {
     var l=document.theform.elements.length
     for (var i=0; i<l; i++) {
        if (document.theform.elements[i].name) {
           if (document.theform.elements[i].name.substring(0,4)=="atr_") {
              var out='parent.rightFrame.sclSociaLink.'
              out+=document.theform.elements[i].name.substring(4,
                   document.theform.elements[i].name.length)
              out+="="+document.theform.elements[i].value
              eval(out)
           }
        }
     }
     parent.rightFrame.showTestbed()
  }
}