How to identify the position of a script tag in a DOM?

Question

Maybe the best way to do this, but currently I have a well-encapsulated JavaScript object that can have some custom options. I include an HTML snippet on the page (through Dreamweaver snippets), and on the page my JS file is loaded, which goes through the DOM and identifies any of these code snippets as specific functionality, and goes ahead and installs this functionality.

That’s all, until I want to add more than one object to the page and configure them. The important point here is that you can add as many objects to the page as you want with my current setting - because they are common at this point and do not have an id attribute.

Now I want to configure these objects, so I thought: "How about an external file containing configuration settings that these objects check and apply if a configuration object is found." This works well too, but the configuration data is now a bit "deleted". I guess it will annoy my other colleagues in the end, this is just one more thing to remember.

So, to my question, I am happy to insert these code blocks, which will still run the self-tooling of objects when the page loads. But what I would like to try also inserts a script block that contains configuration settings. I need a tool for this inserted code block, knowing that its parent is the context for the configuration.

Code example:

<div class="snippet"> <_contents of this 'snippet'_/> <script type="text/javascript"> new Snippet().init({ rootElement: REFERENCE_TO_THIS_SCRIPT_TAGS_PARENT_NODE, configOptionA: true, configOptionB: false }); </script> </div> 

Note. <div class="snippet"> does not have an 'id' attribute because I want more than one of them to be deleted per page.

Other solutions are welcome if they adhere to my limitations!

Answer 1

My other related question (now answered) addresses this now, in fact, I ended up with:

 <div class="snippet"> <elements... /> <script type="text/javascript"> var tmpVarName = 'configOb_'+Math.floor(Math.random()*1111111) ; document[tmpVarName] = { remainVisible:true, hoverBehaviour:false }; </script> </div> 

... and then in a script loaded on each page that scans any relevant elements to create an instance and configuration:

 var snippets = yd.getElementsBy(function(el){ return yd.hasClass(el, "snippet"); },null,document ); for( var i=0; i<snippets.length;i++ ) { var s = snippets[i] ; yd.generateId(s, '_snippet_'+i ); var tag = yd.getElementBy(function(el){ return true; },'script',s ); var ob = new Snippet(); ob.setId( s.id ); ob.init( eval( tag.innerHTML ) ); } 

---

For a more complete context of the above code;

• yd = YAHOO.util.Dom
• Snippet.init () and Snippet.setId () are exposed to the methods of a module object called Snippet ()

Now that my inserted “chunks” of content do not have an id attribute or dynamically evaluated configuration context objects, I can add as many options as I want. My only real problem is performance if a whole bunch of these Snippet () objects are added to my page (not likely).