Scripts dynamically generate VML

It is very important for us to write VML to combine it with the database. If combined with the database, reading data and converting data into VML will become two parts. If you use ASP to generate a page containing a lot of VML, once the amount of data is too high, the entire page becomes huge, the download speed is slow, and the IE interprets the code slowly, so it becomes very important to dynamically generate VML with scripts.

Drawing a schematic diagram with VML can make the above meaning clearer:

The previous picture and text are simply: use an Iframe as the background and generate it in the front desk with scripts. Maybe you are worried that the background has been completed, but the front desk has not been initialized yet, so you can rest assured, because the process of reading data is definitely relatively slow. If you are worried about the small amount of data, as long as you put it inThe script is placed in front of the Body and the Iframe is placed in the Body at the end of the Body, there will be no synchronization error problem.
Now let’s talk about how to dynamically generate VML using scripts. In fact, this is the same process as using scripts to generate HTML dynamically.

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>Dynamic VML creation</title>
</head>
<STYLE>
v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>
<script language="JavaScript">
function createPoint(x,y,v)
{
var strElement="<v:rect title='"+v+"' style='top:"+x+";left:"+y+"width:100;height:100'></v:rect>";
var newPoint = document.createElement(strElemnt);
group1.insertBefore(newPoint);
}
</script>
<body>
<v:group ID="group1" style="WIDTH:200px;HEIGHT:200px;" coordsize = "200,200">
</v:group>
<iframe src="" name="data" style="display:none"></iframe>
</body>
</html>

Corresponding in:

After reading the above, do you have any understanding of this model? Let’s talk about some issues that need to be paid attention to when dynamically generating VML. First, let’s talk about the createElement method of document. Different IE versions, the use of createElement is also different. In the early versions of IE, createElement can only create OPTION in Select, for example, var newOption=("OPTION"); But after IE5.0, createElement can create all objects, and the method is var newElement=("<div id='oDIV'></div>"); Note that this parameter must be a completed HTML tag, not DIV. The advantage of using this method is that you can use a statement to describe the newly created object clearly. The insertBefore method is very useful, it inserts the newly created object to the end.
We have Group1 from the beginning, and all the VMLs generated dynamically in the future can be inserted directly behind Group1. I have done three experiments. The first is ordinary, using ASP to generate VML code; the second is to generate scripts on the same page without using Iframe; the third is the example above, using Iframe to generate scripts. As a result, under the condition of large data volume, the third one is the most efficient, followed by the second one, and the first one has a significant feeling of slowness.
The next section will tell the most exciting features of VML, zoom in and out!