如何在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 条评论
登录 后参与评论

相关文章

来自专栏韩东吉的Unity杂货铺

零基础入门 21: UGUI Inputfield

因为一些外部原因,以后文章的发布只会在公众号内推送,取消了在蛮牛专栏的文章更新,望蛮牛小伙伴周知,关注微信公众号,可以第一时间收到新分享的推送通知。

40720
来自专栏君赏技术博客

百思不得姐数据挖掘第一篇

这是此文档的第一篇文章,写在之前要说的话。里面设计的技术点可能有些新人不是太了解,我只会说我遇到的难点和思路,文章也是想到那里写到那里。

7630
来自专栏前端下午茶

Vue 使用中的小技巧

在vue的使用过程中会遇到各种场景,当普通使用时觉得没什么,但是或许优化一下可以更高效更优美的进行开发。下面有一些我在日常开发的时候用到的小技巧,在下将不定期更...

30320
来自专栏游戏杂谈

【hta版】获取AppStore上架后的应用版本号

之前写过一篇文章:获取AppStore上架后的应用版本号,那一篇文章使用node.js实现,存在的问题就是如果在没有安装node.js运行环境下是无法运行的,而...

13620
来自专栏macOS 开发学习

Mac OSX 开发基础控件学习之 NSOutlineView

在开发基于osx的Application的过程中,当我们需要显示一组列表结构的数据时,比较容易想到的控件是NSTableView;但如果你显示的数据有层级结构...

25120
来自专栏彭湖湾的编程世界

【javascript】原生js更改css样式的两种方式

下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1;css表达式...

28480
来自专栏狮乐园

codereview-s8

之后再efficiencyView方法中调用stopPropagation方法阻止事件冒泡

9630
来自专栏向治洪

微信小程序实例之摇一摇抽奖

概述 前面我们讲了如何开始微信小程序搭建和一些组件的介绍。微信小组件和微信小程序入门 微信小程序目录 为了更好的理解小程序和小程序开发,我们首先来看一下项目的目...

65860
来自专栏小白安全

XSS跨站脚本攻击的原理分析与解剖

《xss攻击手法》一开始在互联网上资料并不多(都是现成的代码,没有从基础的开始),直到刺的《白帽子讲WEB安全》和cn4rry的《XSS跨站脚本攻击剖析与防...

33950
来自专栏Puppeteer学习

Headless Chrome:服务端渲染JS站点的一个方案【中篇】【翻译】防止重新渲染优化

25030

扫码关注云+社区

领取腾讯云代金券