如何在js文件中写加载Applet控件(js与jsp分离技术)
我们在写代码的时候,一般喜欢将JSP和JS实现分离开,将页面部分的代码写在.jsp结尾的文件中,而将javascript代码则写在.js结尾的文件中,这样写有个好处,那就是javascript是静态代码,在工程部署上,可以将这部分代码部署到静态资源服务器上,从而加快页面的加载速度。
Javascript中经常有一部分代码是动态产生的,导致我们经常不得不将这部分代码写到jsp文件中,这就导致代码看起来不雅和难懂。那么我们有没有办法将需要写到jsp页面上的代码写到js文件中呢?
我现在举个例子,假如我们的页面上需要加载一个applet控件,但这个applet的加载是有条件的,只有在某种情况下,控件才会加载,而其它情况则不加载(这样子能加载页面的加载速度)。就好比淘宝的截屏功能,我们在正常聊天的时候,控件是不加载的,只有点击了截屏功能的时候,控件才会被加载和安装。
这种情况,就需要我们预先不加载applet控件,而是在javascript控制加载控件了。你可能会有点疑问,javascript如何加载控件呢?
我们可以这样实现,在jsp中写一个空的div,这样,页面加载这个div是不耗性能的。
<div id="testDiv"></div>
另外,我们在js文件中,根据需要,加载下面语句:
//得到DIV对象
var testDiv = document.getElementById("testDiv");
//建立applet控件的语句
var appletStr = '<applet id="testApplet" name=" testApplet" height="0" width="0" code="com. TestApplet" codebase="/applet/" archive="testApplet.jar"></applet>';
//加载applet控件
testDiv.innerHTML = appletStr;
这样子,你就可以王html代码中的div动态加载一个applet对象了。
你可能想说,我如果将把js写成公共的文件,可以供很多jsp调用,那些jsp页面也不在需要写死一个名为testDiv的对象,那怎么办呢?
其实这个好办,我们只要在js文件中写这么这段话,就可以实现了
document.writeln('<div style="position: absolute; width:0px; height:0px;top: 5px; right: 5px; display:none" id=" testDiv">');
上面这句话的意思跟原先不一样了,这里是js文件中往jsp页面中显示一个固定位置的div对象,由于js页面不知道jsp在哪个地方加载js文件,所有像原先那样写一个相当位置的div是不大妥当的,而加载一个固定位置的div,则无论jsp在哪个地方加载js文件,都可以保证div想固定的地方显示了。