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

最新推荐文章于 2021-02-13 16:28:07 发布

原创最新推荐文章于 2021-02-13 16:28:07 发布 · 1.8k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #web

HTML+CSS 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用iframe和input标签实现在网页中进行局部跳转或刷新的技术。通过将页面的不同部分拆分为独立的HTML文件，并利用iframe标签在主页面上展示这些子页面，可以实现根据用户的选择动态加载不同的子页面内容。

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