Use the popup window to create an infinitely webpage menu (2)

Last time I talked about how to use popup to create an unlimited menu in the web. The two problems to be solved are the coexistence of multiple popup windows and the handling of events in Popup. Multiple popups' questions I have already discussed how to use the parentwindow of popup.doc ument to create Popup again. This is even done, and the second question is annoying. Why?

The popup object created through createpopup contains a document attribute, which is actually an HTML container. The DHTML for building popup can be stored in its parent document or other documents, msdn says. Specify ument. Body to append other DHTML content, such as: popup.doc ument. Body. innerhtml = '..' or popup.doc ument. Body. appendchild (...). Here we have encountered some weird features of popup. We found that: VaR Win = Window;
VaR Doc = Win.doc ument;
VaR Popup = Win. createpopup ();
VaR Popdoc = Popup.doc ument;
VaR Popwin = Popdoc. parentwindow;
VaR Pop1_c = Popwin.doc ument;

Result popdoc! = Popw.c. It's okay. It won't wait until we call popdoc. write and pop1_c. after the write operation, the execution result is the same, that is, the data is written into the popup window. But fortunately, this does not affect our menu implementation. It's just weird.

Although the above popdoc and popw.c references are different, the execution results are the same, and the popup can be modified as expected. We can find that popup.doc ument. the appandchild method of the body is different from the innerhtml attribute in adding DHTML content to the popup. This difference brings a lot of trouble to me, it makes the Logical Data of menus (menu classes built by JavaScript) and UI representation (visual appearance of menus built by HTML elements) messy and event transfer between them.

We have two internal HTML libraries for popup. one is to use the innerhtml of popup.doc ument. Body to directly put htmlCodeUse the appendchild method of popup.doc ument. Body to operate the Dom. Note that you must use the popup Document Object to create DHTML elements before you can use appendchild to add them. For example, although the popdoc and popwindoc references in the above Code are not equal, they are indeed the doucment objects of popup. Only the objects obtained by createelement can be appended to popup. If you use docto createelementto get the object, appendchild will get a runtime error in popup.doc uemnt. Body: Error: invalid argument ..

Why is the appendchild method and innerhtml attribute described by the internal handler for half a day? Because they have their own advantages. If you use appendchild, you can use the logical menu data (the class implemented by JavaScript) when creating menu data) and UI display elements (HTML) are referenced between each other, so that when we process menu eventsProgramAnd the entire execution structure is clearer (this will be detailed when the menu handles events ). In this case, we should certainly use this method to append the content of our menu, but we have encountered a maddening problem of popup. Use popup.doc ument. body. after the appendchild method imports DHTML content, some attributes assigned to the dhmtl element in advance will be invalid, including nowrap, onstartselect, and rules. The three attributes are invalid, it seriously affects the display of the menu UI, that is, the effect obtained in the popup window after appendchild is used, and the correct effect we want on the left is in IE.

The use of appendchildshould be disabled, and the use of popup.doc ument should be changed. body. innerhtml directly assigns values to HTML. However, this method cannot establish a link between the menu Logical Data and the UI elements in the object reference relationship, although object references can be stored in attributes of HTML elements, when HTML elements are copied as strings, the attach events and object references stored in attributes on HTML elements are lost. Therefore, you can only associate them using other methods. Therefore, we implemented a global class named _ menucache _ similar to hash table to manage the one-to-one correspondence between them.

To be continued...