web页面中实现局部页面的刷新

需求：当web页面中有部分布局相同的，而另一部分不同的时候就需要实现页面的局部跳转或刷新。

实现技术：iframe+input

功能：将页面中不同的部分编写为几个新的HTML文件，在主界面中使用<iframe>标签在局部显示不同的子界面的内容。不同子界面的显示根据父界面中选择来显示对应的子界面。

下面是实现代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Streamedian HTML5 RTSP/HLS player example</title><script src="videojs-ie8.min.js"></script><script src="video.min.js"></script><script type="text/javascript">videojs.options.flash.swf = 'video-js.swf'</script></head>
<body><input type="button" value="百度一下" onClick="parent.displayinhere.location.href='http://www.baidu.com/'">
<input type="button" value="腾讯网" onClick="parent.displayinhere.location.href='http://www.qq.com/'"><iframe name="displayinhere" width=250px; height=200px; src="http://www.hao123.com"></body>
</html>

说明：这里仅是父界面的代码。子界面就用“百度一下”和“腾讯网”代替，默认显示“百度一下”。

重点：<input>标签的onclick和<iframe>标签的name要对应。

web页面中实现局部页面的刷新相关推荐

Vue | 实现页面跳转刷新，在Vue页面中调用其他页面的方法
最近有一个登录界面的需求,感觉很简单,尝试各种方法每次都感觉快要成功了,但还是没能解决问题,果然没有系统学习就是很难立刻找到突破点,难以一语中的,好在历经千帆,在页面调用中就解决了这个问题. 需求描述 ...
【Flutter】Flutter 混合开发 ( 关联 Android 工程与 Flutter 工程 | 安卓页面中嵌入 Flutter 页面 | 安卓中启动 Flutter 页面 )
文章目录前言一.创建 Android 项目二.关联 Android 工程与 Flutter Module 工程 1.配置 Flutter Module工程 2.配置 build.gradle 3 ...
flex页面中嵌入html页面
使用flex-iframe插件在gitHub上的地址如下 https://github.com/flex-users/flex-iframe 可以这样引入这个插件 <s:Application ...
微信小程序——API promise化，全局数据共享，MobX，将Stroe中的成员绑定到页面中，在页面上使用Strore中的成员
一.API promise化 1．基于回调函数的异步 API 的缺点默认情况下,小程序官方提供的异步 API 都是基于回调函数实现的,例如,网络请求的 API 需要按照如下的方式调用: 缺点:容易造 ...
thymeleaf页面中引入公共页面
一.前言当我们在html页面使用thymeleaf时,经常会遇到这样的情况.有一些html片段在我们所有页面都存在,造成了代码重复.遇到这种场景,我们就可以把公共代码段抽取到一个公共页面,在需要使用 ...
如何在web项目中访问HTML页面
为什么同样在web工程webContent目录下建了一个html页面,http://localhost:8080/springmvcDemo/index.html访问却报404? 为什么在web工程w ...
Web应用中设置欢迎页面
欢迎页面的设置和url-pattern -- 设置欢迎页面在浏览器地址栏中直接通过项目名称访问时,默认显示的页面就是欢迎页面,可以是.html.jsp,可以通过welcome-file-list进行 ...
web前端中制作简单页面实现让文字在图片旁边
如图所示下面是源代码: <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
springboot的thymeleaf一个页面中引入其它页面
引入页面内容(copy为自定义的) <div th:fragment="copy">这是引入内容</div> 引入方式(footer为引入页面名称) < ...

web页面中实现局部页面的刷新

web页面中实现局部页面的刷新相关推荐

最新文章

热门文章