专栏首页源哥的专栏如何在js文件中写加载Applet控件(js与jsp分离技术)

如何在js文件中写加载Applet控件(js与jsp分离技术)

                        如何在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想固定的地方显示了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何判断是关闭还是刷新网页

    我们在写js代码的时候,经常要判断网页是否被关闭了,如果是被关闭了,就执行某段代码,这个可以用HTML的onbeforeunload事件来执行一段js代码,但是...

    源哥
  • 由于网速引起的问题

    我们经常会碰到这种情况,一个网页在一台电脑上运行没有什么问题,在另外一台电脑上就会报找不到属性的错误,这个是由于一般是由于我们触发某个事件时,这段js代码还没...

    源哥
  • 在struts中使用国际化(i18n)

    在struts中使用国际化(i18n)     i18n可以满足对系统的国际化,它的原理就是将页面上的所有标志都放到一个消息资源文件中,不同的语言要提供不同的消...

    源哥
  • JS中的闭包回顾

    在全局环境下,由于有变量提升这个机制在,所以在执行上下文环境中,数据体现的不尽相同:

    前端_AWhile
  • Git的后悔药

    这种情况是你已经把一个文件修改了add到暂存区了,但又想重新放回工作区,这种不会更改本地磁盘的文件

    腾讯工蜂
  • webpack实战——代码分片

    对于web应用来说通常会有一些库和工具是不常变动的,可以将它们放在一个单独的入口中,由该入口产生的资源不会经常更新,因此可以有效地利用客户端缓存,让用户不必在每...

    流眸
  • MySql规范

    where 1. 条件比较 <=> 可以判断null值,=是不可以判断null值 < > >= <= != <=>

    悠扬前奏
  • JavaScript基础学习--07函数的传参、重用、价格计算

    Demos:   https://github.com/jiangheyan/JavaScriptBase 一、函数传参      1、参数=js数据类型  ...

    用户1148399
  • Linux下原码安装 python-3.

    py3study
  • SQL注入常用函数和关键字总结

    这个函数很常用,有三个参数,按顺序分别是字符串,起始位置和长度。可以求指定字符串的子串。当然,第一个参数可以是列的名字。这个函数似乎和mid没有什么不同,如果m...

    KevinBruce

扫码关注云+社区

领取腾讯云代金券