html内嵌子页面并配合CGI进行页面更新

待解决问题:

在基于嵌入式平台开发基于Boa服务器的过程中,遇到以下两个问题:

1、Boa中经常使用CGI对页面进行输出,但某些页面每次只需改变其中某一部分,其余部分(如菜单栏、标题栏等)无需变更,若每次均将整个页面重新调用CGI输出,其工作量太大,且代码上不易于阅读和理解。

2、不同功能对应不同的子页面,但在访问不同子页面时地址栏会显示对应的文件名称,从一定程度上来说这是不安全的。

解决方法:

可以考虑使用一个页面作为框架,带有无需经常变动的菜单栏、标题栏等,然后在这个主页面嵌入子页面,每次从嵌入式平台读取到新的数据需要更新至页面时,只需使用CGI输出至子页面即可。

实现方式如下:

比如我打算在主页面index.html里嵌入子页面,则在index.hex对应位置添加

<iframe src="net.html" frameBorder="0" width="600" height="400" scrolling="no" ></iframe>

以上语句表示在此页面嵌入boa www目录下地net.html文件,边框为0,不显示滚动条。

此时打开主页面index.html时可看到已经嵌入了子页面net.html,并且可以观察到不管子页面中进行何种跳转,浏览器地址栏显示的地址都是主页面的地址,这样实现了对本地子页面真实地址的隐藏,解决了上述问题2。

net.html中采用JS按钮跳转至CGI脚本或直接通过表单提交调用CGI脚本对net.html进行输出。

例如:

<script language="JavaScript" src="jump.js"></script>

<input style="margin-left:20px" type="button" value="读取" οnclick="readNet()">

然后在JS脚本的readNet()函数中调用readNet.cgi对页面进行输出,可以观察到只有嵌入的子页面部分进行了页面的绘制(数据更新),解决了上述问题1。


©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页