在html指定元素中显示独立网页内容

最新推荐文章于 2024-07-03 21:53:40 发布

刘峰1011

最新推荐文章于 2024-07-03 21:53:40 发布

阅读量2.3k

点赞数

分类专栏：前端文章标签： html 前端

本文链接：https://blog.csdn.net/zgjllf1011/article/details/79288182

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这里讲一下如果我们已经有一个完整html页面，现在想要在某个元素内显示另外一个独立的页面应该怎么实现。

首先写第一个页面:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>test</title>
		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	</head>

	<style>
		div{
			border : 1px solid black;
			margin : 10px 20px 30px 40px;
		}
	</style>

	<script type="text/javascript">  
	function test(){
	    $.post("view.php", {},function(data)
	    {
	        $("#value").html(data);
	    });
	}

	</script>

	<body>
		<div>
			div1
		</div>

		<div>
			<p id="value"></p>
		</div>

		<div>
			div2
		</div>

		<div>
			<button type="button" οnclick="javascript:test();"> show </button>
		</div>
	</body>
</html>

这里我们定义了4个div，其中第二个中我们添加了一个元素p，这就是我们准备输出网页内容的目标元素。

最后的div中我们创建了一个按钮，点击的时候会调用js的test方法，该方法内就是输出网页内容的主要逻辑。

test()方法中view.php就是我们想要输出的目标页面，来看下view.php的内容:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>view</title>
	</head>

	<body>
		view
	</body>
</html>

这里很简单，就是显示"view".

来看一效果:

像这样当我们点击按钮时，第二个div中就显示了我们想要的内容.

刘峰1011

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录