需求:当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要对应。