使用隐藏框架加载远程JS脚本(调用远程函数)
2023-06-13 09:12:01 时间
远程脚本(Remote Scripting)就是远程函数调用,通过远程函数调用实现异步通信。所谓异步通信,就是在不刷新页面的情况下,允许客户端与服务器端进行非连续的通信。这样用户不需要等待,网页浏览与信息交互互不干扰,信息传输不用再传输完整页面。
远程脚本的设计思路:创建一个隐藏框架,使用它载入服务器端指定的文件,此时被载入的服务器端文件所包含的远程脚本(JavaScript 代码)就被激活,被激活的脚本把服务器端需要传递的信息通过框架页加载响应给客户端,从而实现客户端与服务器异步通信的目的。
所谓隐藏框架,就是设置框架高度为 0,以达到隐藏显示的目的。隐藏框架常用来加载一些外部链接和导入一些扩展服务,其中使用最多的就是使用隐藏框架导入广告页。
下面示例演示如何使用框架集实现异步通信的目的。为了方便同学们能够直观的了解远程交互的过程,本例暂时显示隐藏框架。
1) 新建一个简单的框架集(index.htm),其中第 1 个框架默认加载页面为客户交互页面,第 2 个框架加载的页面是一个空白页
html head title /title /head frameset rows= 50%, 50% frame src= main.htm name= main / frame src= black.htm name= server / /frameset /html
2) 设计空白页(black.htm)。
html head title 空白页 /title /head body h1 空白页 /h1 /body /html
3) 在客户交互页面(main.htm)中定义一个简单的交换按钮,当单击该按钮时将为底部框架加载服务器端的请求页面(server.htm)。
html head title 与客户交互页面 /title script function request () { //请求函数,加载服务器端页面 parent.frames[1].location.href = server.htm window.onload = function () { //页面加载完毕,为按钮绑定事件处理函数 var b = document.getElementsByTagName ( inpit )[0]; b.onclick = request; /script /head body h1 与客户交互页面 /h1 input name= submit type= button id= submit value= 向服务器发出请求 /body /html
4) 在服务器响应页面(server.htm)中利用 JavaScript 脚本动态改变客户交互页面的显示信息。
html head title 服务器端响应页面 /title script window.onload = function () { //当该页面被激活并加载完毕后,动态改变客户交互页面的显示信息。 parent.frames[0].document.write ( h1 Hi,大家好,我是从服务器端过来的信息使者。 /h1 /script /head body h1 服务器端响应页面 /h1 /body /html
5) 在浏览器中预览 index.htm,就可以看到如下图所示的演示效果。
响应前:
![使用隐藏框架加载远程JS脚本(调用远程函数)](http://ytso-blog-oss-img.oss-cn-beijing.aliyuncs.com/wp-content/uploads/2021/07/20/20210720_60f640622d95c.gif)
响应后:
![使用隐藏框架加载远程JS脚本(调用远程函数)](http://ytso-blog-oss-img.oss-cn-beijing.aliyuncs.com/wp-content/uploads/2021/07/20/20210720_60f640623b732.gif)
23221.html
htmljavaJavaScript相关文章
- Fabric.js 使用纯色遮挡画布(前景色)
- 使用 Dapr JS SDK 让 Nest.js 集成 Dapr(微软开源的分布式应用程序运行时)
- 利用JS将a标签超链接到一个随机数字地址
- JS获取当前年份_js获取当前时间年月日
- JS document对象详解
- 使用浮动框架实现JS异步通信
- 使用JS连接MySQL数据库:实现化繁为简(js连接mysql数据库)
- 使用 JS 操作 Redis:实现强大数据存储.(js调用redis)
- 妙用JS获取Oracle信息的快速方法(js获取Oracle)
- 使用JS操作Oracle数据库探索潜在可能性(js和oracle数据库)
- 使用JS+XML(数据岛)实现分页)
- js控制框架刷新
- 简单的js分页脚本
- JQuery,Extjs,YUI,Prototype,Dojo等JS框架的区别和应用场景简述
- js打印纸函数代码(递归)
- js两行代码按指定格式输出日期时间
- js延迟加载改变JS的位置加快网页加载速度
- js图片自动切换效果处理代码
- IE、FF、Chrome浏览器中的JS差异介绍
- js获取当前地址JS获取当前URL的示例代码
- JS操作CSS随机改变网页背景实现思路
- js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
- 我用的一些Node.js开发工具、开发包、框架等总结